Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz
Меню сайта
Категории
Создание сайта [6]
С чего начать, что делать?
SEO оптимизация [76]
Статьи о том как раскрутить сайт
HTML [11]
Основы и интересные решения
CSS [11]
Основы и интересные решения
uCoz [32]
Новичкам и профессионалам
Заработок на сайте [4]
Как заработать с помощью сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 14
Гостей: 14
Пользователей: 0

Сайт сегодня посетили:

Делаем текстовые блоков над изображениями

Главная » Статьи веб мастеру » CSS » Делаем текстовые блоков над изображениями

Схема

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

HTML

Code
<div class="image">
  <img src="images/3754004820_91a5c238a0.jpg" alt="" />
  <h2>ВсеБудетОк:<br />а может и нет</h2>
</div>

Проще всего было бы сделать картинку фоном слоя, однако в этом примере я расматриваю изображение как контент. Мы будем использовать этот обертывающий слой для абсолютного позиционирования.

CSS

Code
.image {
  position: relative;
  width: 100%; /* for IE 6 */
  }
h2 {
  position: absolute;

  top: 200px;
  left: 0;
  width: 100%;
  }

Данный код наложит текст сверху изображения, но он не позаботится о прозрачном черном фоне за текстом. Для этого мы не можем использовать <span style="color: blue;">h2</span>, так как это блочный элемент. А нам необходим инлайновый без заданой ширины. Кстати, позвольте небольшой оффтоп. В реализации этого скрипта для ucoz и просто в появлении идеи этого скрипта мне помог развлекательный портал - http://poleno.net. Именно на этом ресурсе собраны лучшие анекдоты и веселые стишки, вдохновившие меня на создание этого скрипта, ну ведь не шаблоны для ucoz, поэтому просто скрипта, спасибо, устанавливайте скрипт дальше.

Давайте добавим еще один (span) слой в тег h2:

Code
<h2><span>ВсеБудетОк:<br />а может и нет</span></h2>


Теперь давайте используем этот (span) слой для стилизации текста и фона:

Code
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}

Проблема

Когда к инлайновому элементу мы добавляем перенос строки, он сразу же переносится на другую строку без отступа. Padding в таком случае не помогает.

Для решения этого мы добавим несколько <span style="color: blue;">span</span> с обоих сторон элемента <span style="color: blue;"><br /></span> для добавления отступа.

Code
<h2><span>ВсеБудетОк:<span class='spacer'></span><br /><span class='spacer'></span>а может и нет</span></h2>

В стилях пропишем отступ:

Code
h2 span.spacer {
padding:0 5px;
}


Исправляем семантику

На данном этапе дизайн готов, но при этом было использовано много дополнительных HTML элементов. А именно много тегов<span style="color: blue;">span</span>. jQuery может нам помочь с этим. Убираем все <span style="color: blue;">span</span> из разметки и динамически их добавляем вот так:

Code
$(function() {
  $("h2")
  .wrapInner("<span>")
  $("h2 br")
  .before("<span class='spacer'>")
  .after("<span class='spacer'>");
});

Исходники


Просмотров: 856 | Комментариев: 0 | Категория: CSS | Опубликовал: vsebudetok | Спасибо сайту

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.