ZorNet.Ru — сайт для вебмастера » HTML и CSS » Оформление изображений 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 Октября 2016 Просмотров: 2532 Комментариев: (10)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 10
Порядок вывода комментариев: Kolinkor 12 Октября 2016 19:22¹ 0 Snoopak, спасибо, то что нужно было, немного только под себя настроил. Snoopak 12 Октября 2016 19:23² 0 не за что) FeStemBer 12 Октября 2016 19:31³ 0 Не устанавливал, а просто проверил HTML, и название просто в низу было, просто хочу сказать, что все можно в стилях исправить и сделать как вам нужно, это где само описание и цвет его, также фон на нем, во общем здорово сделано, сразу все понял. Angerfist 12 Октября 2016 19:35⁴ +2 Хоть тут и фиксированные размеры, но этот правильный общепринятый метод наложения текста на изображение, а не тот что вчера детский с табличной вёрсткой и тегами center Kosten 12 Октября 2016 19:43⁵ 0 Давайте рассуждать здраво, но реально есть люди, которым может понравится скрипт, который без стилей. Может человек не заморачивается по стилям, а просто делает понятно. Для этого нужно всегда иметь альтернативу этому материалу, если судить о дизайн или больше всего оформление. Angerfist 12 Октября 2016 19:48⁷ 0 HTML разметку назвать сценарием (скрипт) хмм... Насчёт табличной вёрстки, давайте стоять на месте, без развития) Kosten 12 Октября 2016 19:52¹⁰ 0 Angerfist, про то говорю, когда есть из чего выбрать, это очень хорошо, пусть даже другой материал не очень, но он также не исключаю, что может кому то понравится. Start 12 Октября 2016 19:49⁸ 0 А что сайт на изображение с ошибкой? zornrt.ru Kosten 12 Октября 2016 19:50⁹ 0 Бывает, но думаю это не главное. tsakonter 12 Октября 2016 19:45⁶ 0 Видать на светлый нужно выводить все по другому.