Делаем текстовые блоков над изображениями - 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'>");
});

Исходники