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

20 декабря 2007, Написано в CSS

На блоге «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 метод не сработает.

8 комментариев к статье «Двойной фон с помощью :first-letter»:

  1. Nikita:
    21 Дек 2007 в 16:17

    А пример показать?

    Ответить
  2. Alex:
    21 Дек 2007 в 16:55

    Добавил

    Ответить
  3. Yuriy Drozdov:
    25 Дек 2007 в 18:49

    А теперь посмотри пример под ие 6 :)

    Ответить
  4. and3:
    25 Дек 2007 в 19:30

    прикольная штука, надо заюзать

    Ответить
  5. Alex:
    25 Дек 2007 в 19:35

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

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

    Ответить
  6. Сергей:
    9 Мар 2008 в 22:26

    Забавная вещица..Нужно будет попробывать..))

    Ответить
  7. motor:
    12 Апр 2008 в 16:51

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

    Ответить
  8. Интересное для веб-мастеров (16.05.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с:
    16 мая 2008 в 07:06

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

    Ответить

Оставь комментарий: