» »

Оформление изображений CSS на сайте


Оформление изображений CSS на сайте

Здесь вы узнаете как красиво оформить изображение при помощи CSS. На сайте будет смотреться красиво, так как еще название будет его сопровождать. Основном все это оформление происходит как в самом материале, но также можно его поставить в отдельную страницу или сделать фотоальбом. Все очень просто, вам нужно выставить в стилях ширину которая вам нужна, и потом уже идет код под картинку, где вы ставите ссылку на изображение и прописываете к нему название.

Установка:

CSS:

Код
.poster-box {position: relative; overflow: hidden;width: 700px;}
.poster-title {position: absolute; bottom:0px;width: 679px; text-align: center; color: #fff; text-shadow: 0 0 6px #fff; text-transform: uppercase;background: rgba(68, 68, 68, 0.6); padding: 10px 0}


Код:

Код
<div class="poster-box">
  <img src="http://zornet.ru/Ajaxoskrip/Abaveg/0764eac0e6cf4e67a4a4784013135bd9.png">
<div class="poster-title">
Кошки флудят в на сайте ZORNRT.Ru
</div>
</div>


Также вы можете закруглить углы:

Оформление изображений на сайте

Здесь описан скрипт, где все также можно сделать, но не применяя стилей.

Автор: Snoopak
12.10.2016 Просмотров: 433 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
Brung
Brung 12.10.2016 19:221
0
Snoopak, спасибо, то что нужно было, немного только под себя настроил.
Snoopak
Snoopak 12.10.2016 19:232
0
не за что)
FeStemBer
FeStemBer 12.10.2016 19:313
0
Не устанавливал, а просто проверил HTML, и название просто в низу было, просто хочу сказать, что все можно в стилях исправить и сделать как вам нужно, это где само описание и цвет его, также фон на нем, во общем здорово сделано, сразу все понял.
Angerfist
Angerfist 12.10.2016 19:354
+2
Хоть тут и фиксированные размеры, но этот правильный общепринятый метод наложения текста на изображение, а не тот что вчера детский с табличной вёрсткой и тегами center 09a
Kosten
Kosten 12.10.2016 19:435
0
Давайте рассуждать здраво, но реально есть люди, которым может понравится скрипт, который без стилей. Может человек не заморачивается по стилям, а просто делает понятно.

Для этого нужно всегда иметь альтернативу этому материалу, если судить о дизайн или больше всего оформление.
Angerfist
Angerfist 12.10.2016 19:487
0
HTML разметку назвать сценарием (скрипт) хмм... Насчёт табличной вёрстки, давайте стоять на месте, без развития)
Kosten
Kosten 12.10.2016 19:5210
0
Angerfist, про то говорю, когда есть из чего выбрать, это очень хорошо, пусть даже другой материал не очень, но он также не исключаю, что может кому то понравится.
avatar
Start 12.10.2016 19:498
0
А что сайт на изображение с ошибкой? zornrt.ru
Kosten
Kosten 12.10.2016 19:509
0
Бывает, но думаю это не главное.
tsakonter
tsakonter 12.10.2016 19:456
0
Видать на светлый нужно выводить все по другому.
avatar