Главная » Статьи » Прочее

Эффект текста на картинке

Посмотрите ДЕМО

В CSS
Код
/* image */  

#photo {  
  overflow: hidden;  
  height: 390px;  
  padding-bottom: 5px;  
  *padding-bottom: 45px;  
  background: url('http://hawk.do.am/Kartinki1/34370665.png') center bottom no-repeat;  
  margin-left: 7px;}  
#photo img {  
  border: 1px solid #b3b3b3;  
}  
#photo_info {  
  background: url('http://hawk.do.am/Kartinki1/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;}


Картинки оформляем так
Код
<div id="photo">  
  <div id="photo_info">  
  <h2>Создай свой сайт вместе с нами легко! Hawk.do.am</h2>  
  </div>  
  <img src="http://hawk.do.am/Kartinki1/64565954.jpg" alt="" width="880">  
  </div>
Категория: Прочее | Добавил: slavick (11.08.2013)
Просмотров: 96 | Теги: на картинке, текста, Эффект | Рейтинг: 1.0/2
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]