Двойной фон с помощью :first-letter

20 12/07

На блоге «The Webmakers Lounge» появилась очень полезная статья об использовании псевдокласса :first-letter для назначения 2-х фоновых изображений одному элементу. Примечательно что способ работает в IE6, но как всегда не без определенного нюанса. Выглядит это следующим образом:

Допустим у нас есть заголовок

<h2>НОВОСТИ</h2>

Добавляем стили…

h2{
background:#002261 url(/images/star2.jpg) right center no-repeat
}
h2:first-letter {
background: url(/images/star1.jpg) left center no-repeat;
padding-left:25px
}

Двойной фон готов!

НОВОСТИ

А нюанс заключается в том что нужно обязательно поставить пробел между самим псевдоклассом :first-letter и открывающей фигурной скобкой, в противном случае в IE6 метод не сработает.

Теги:

Обсуждение:

  5. Alex

    Yuriy, спасибо уже видел. Цитирую последний комментарий к статье на сайте автора:

    У метода всплыла куча разногласий с IE. По разному воспринимают padding у элемента и :first-letter. FF естественно прибавляет padding родителя и :first-line. При включенном hasLayout тоже разногласия. С line-height тоже траблы. Вообщем достаточно попробовать сэмулировать sliding doors и все будет ясно. Годится только для простых примеров вроде тех, что ты привел. А жаль. Ой как жаль ((

    Ответить
  7. motor

    Занимательная штука, спасибо. Кстати что касается пробелов между атрибутом и фигурной скобкой то их нужно ставить в любом случае, так и код выглядит опрятнее и удобочитаемость повышается, да и вот как оказывается в ИЕ6 (всеми любимом :) ) работает лучше.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*