Заголовки и другие элементы картинками

Веб разработка - CSS

Иногда есть необходимость вставить какой-либо небольшой текст с помощью картинок.
Хочу рассказать об удобном и универсальном способе это делать.
Замечу, что способ кардинально отличается от других известных мне непробиваемостью и семантичностью — на помощь придет псевдоэлемент :before.
Допустим нам надо вставить заголовок h2 рисунком:

Как видно, заголовок нарисован нестандартным шрифтом и расположен
на неоднородном фоне. Поэтому картинку со сплошным фоном вставить нельзя,
надо использовать gif-картинку с прозрачным фоном.Один из лучших способов это сделать:

При отключенных картинках мы увидим обычный заголовок h2
и сможем прочитать заголовок. Сразу скажу, я не специалист
в оптимизации для поисковиков, но насколько знаю, поисковики
заголовок, выполненный в виде картинки, ценят значительно меньше.
Попробуем сделать html-код таким:

А картинку вставим с помощью css. Создадим стили заголовка, максимально похожие на нарисованное:

Следующий шаг — вытесним текстовый заголовок картинкой в псевдоэлементе :before

В результате имеем двойной заголовок. Чтобы избавиться от заголовка выполненного
текстом укажем у заголовка высоту нашей картинки и применим свойство overflow: hidden;

Готово!
Теперь разберемся, что же у нас получилось. Поисковики видят то чего мы добивались.
Пользователи, у которых включены картинки, видят то что задумал дизайнер.
Причем при увеличении или уменьшении размера шрифта ничего не ломается.
Если у пользователя отключены картинки, то картинка в элемент :before не грузится,
но пользователи видят заголовок, выполненный с помощью правил css.
Единственный недостаток в этом случае — при увеличении размера шрифта текст
заголовка начинает обрезаться, поэтому могу рекомендовать указывать
размер шрифта поменьше.
Еще один момент. IE. Для него создаем псевдоэлемент с помощью js (увы, без скриптов никак):

При отсутствии js пользователи IE увидят тоже, что и пользователи
других браузеров при отключенных картинках. Т.е. все ок.

В заключение весь css сразу:

h2{        font: 1.2em georgia,serif;        color: #00416b;        margin: 0 0 1.5em 0;        height: 14px;        overflow: hidden;}h2:before{        content: url(h2_news.gif);        display: block;        line-height: 1em;}h2{        zoom: expression(        runtimeStyle.zoom = 1,        insertAdjacentHTML('afterBegin','<span style= display: block;line-height: 1em; ><img src= h2_news.gif alt= /></span>')        );}

 

---

Читайте:
Боремся с толстыми шрифтами на темном фоне в Сафари Создание превью изображения на основне свойства Overflow Эластичные шаблоны Предварительный одновременный просмотр CSS в Firefox и Internet Explorer Текст в перспективе

Новый JDBC-драйвер для СУБД SQL Server уже доступен в виде предварител Компания Microsoft сделала еще один шаг к обеспечению совместимости своей флагманской СУБД SQL Server с промышленными Java-приложениями, выпустив оз...

Новый язык программирования от Apple? Майк Цай из Daringfireball поделился своим мнением насчет нового языка программирования, который по слухам создает Apple. После просмотра официально...

Adobe оснастила Dreamweaver CS5 поддержкой HTML5 Компания Adobe Systems сегодня представила новое решение для работы с HTML5, которое уже доступно для веб-дизайнеров и разработчиков. Пакет Adobe HT...

Технологии Microsoft для разработчиков сегодня и завтра В последнее время появилось много принципиально новых подходов к архитектуре приложений, равно как и технологий, реализующих эти подходы, и инструме...

Gmail Labs: кто выйдет в свет, а кто уйдет в отставку Мы запустили Gmail Labs более полутора лет назад. Это экспериментальная лаборатория, позволяющая разработчикам предлагать новые функции, а вам – реш...