" uCoz - это не просто бесплатный хостинг и CMS, но и средство заработка! "

Сайт-помощник по uCoz [ Beta ]

Поиск по uCoz

Ник: Гость
Зарегистрироваться?

Создать сайт бесплатно Регистрация домена

Главная » Материалы » Скрипты для uCoz » Эффекты

Данный раздел находится в разработке!
Поэтому может не корректно отображатся и функционировать!

Эффект текста на картинке / Информер-картинка

Описание: Красиво оформленная картинка с текстом на изображении и тенью под ним. Хорошо пойдёт для каких-то информационных целей.

Установка:

1. Ставим стили для нашего изображения в таблицу стилей CSS.

Код

/* image */

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

2. Далее, ставим код самого изображения в код страницы, где вам нужно.

Код

<div id="photo">
  <div id="photo_info">
  <h2>Создай свой сайт вместе с нами легко! uMasters.ucoz.ru</h2>
  </div>
  <img src="http://umasters.ucoz.ru/_ld/0/64565954.jpg" alt="" width="880">
  </div>

Дополнение: Размеры, отступы, цвета и прочее - легко меняется в CSS

Смотреть Демо

Автор публикации: Prochtenniy Повысить репутацию Prochtenniy за эот материал

Источник: Смотреть | Дата публикации: 09.02.2013 | Просомтров: 1615

$ Помощь по установке и настройке $

E-mail отправителя *:
Тема письма:
Текст сообщения *:

Эффект текста на картинке / Информер-картинка

Комментарии ↓