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

Веб разработка - 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 Текст в перспективе

Google Web Toolkit Создание веб-приложений в наше время - это нудное занятие, при котором к тому же постоянно возникают ошибки. Разработчик может провести до 90% време...

Microsoft LightSwitch – фирменный инструмент для ускоренной разработки Компания Microsoft анонсировала выпуск пакета Visual Studio LightSwitch (ранее носившего кодовое наименование «Кити Хоук»), новейшего пополнения в с...

Microsoft поддержала открытые технологии создания географических карт Microsoft добавила на сервис Microsoft Bing Maps поддержку свободно распространяемых карт OpenStreetMap, которые создаются на основе пользовательски...

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

Скрипты в Google spreadsheets Не так давно стал доступен сервис скриптов в таблицах Google для персональных аккаунтов (gmail). googledocs.blogspot.com/2010/03/apps-script-gall...