Эффект надписи на изображение для uCoz
 | |
| Здесь вы узнаете как можно наложить темно прозрачную ленту на картинку или изображение, где на ней будет написаны знаки по H2 установлены. Смотря как можно поставить, то можно представить в реальности, где этот пример можно применить. Это все что связано с картинками, что на сайте всегда их хватает. Все сделана на простых стилях, где вы сами эту темно прозрачную ленту, можете выставить под свою гамму цвета. Здесь просто показано как все можно сделать и выставляется в ручную, что в стили можно выставить класс AUTO, это для того чтоб автоматически по размеру была полоса. Возможно кому то нужно сделать не на всю ширину, это можно. Вообще можно считать, что это красивое и оригинальное оформление на интернет ресурсе, где будет под белым оттенком или как вам нужно выставить знаки, что также можно заметить присутствие тени здесь. Если вам интересно для чего вообще это делать, то это больше идет под информационные цели, что для гостей и пользователя сайта будет удобно, где даже не нужно будет краткого описание, если брать как пример каталог фотографий. Но не забываем, что выставить также идет на некоторые, что вам нужно определить и было заметно. Как пример проверки этого материала.  Приступаем к установке: Первое, что нужно сделать, это прописать стили в CSS: Код #photo { overflow: hidden; height: 390px; padding-bottom: 5px; *padding-bottom: 45px; background: url('http://zornet.ru/Aben/ABGEA/34370665.png') center bottom no-repeat; margin-left: 7px;} #photo img { border: 1px solid #b3b3b3; } #photo_info { background: url('http://zornet.ru/Aben/ABGEA/06382988.png') repeat; padding: 25px; width: 831px; position: absolute; margin-top: 260px; margin-left: 0px; color: #fff; } #photo_info h2 { margin: 0; padding: 0; font-weight: normal; font-size: 24px; line-height: 24px; color: #fff;} Где ширина выставлена на width: 831px, что можете редактировать. Второе, остается поставить код картинки на страницу,там где вы хотите видеть это дизайн. Код <div id="photo"> <div id="photo_info"> <h2>Создай свой сайте, вместе с ресурсом ZORNET.RU</h2> </div> <img src="http://zornet.ru/Aben/ABGEA/18078136.jpg" alt="" width="880"> </div> И как дополнение, все настраивается отлично в CSS в сам код лести не нужно, там все по умолчанию, но кроме ссылки. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
