» »

Эффект надписи на изображение для uCoz

Эффект надписи на изображение для 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 в сам код лести не нужно, там все по умолчанию, но кроме ссылки.
04.08.2017 Просмотров: 347 Комментарий: (2)

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

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

Комментарий: 2
avatar
K23 05.08.2017 13:131
0
При сохранении картинки на ПК, текст сохранится?
Kosten
Kosten 05.08.2017 14:572
0
Как понять на ПК сохранить, это простой код, что будет выводить на темно прозрачном описание, как вы его поставите, все сохраниться, только сами потом можете убрать.
avatar