Буквица для сайта - css код

Продолжаем добавлять стили для собственного использования на нашем сайте и параллельно показываем нашим читателям, как реализованы те или иные элементы оформления текста. На этот раз в центре нашего внимания буквица - первый символ абзаца. Это отличный способ стилизации текста. Посмотрите пример прямо в этом тексте. Красивая красненькая первая буква абзаца сразу обращает на себя внимания и придает тексту вид журнальной статьи, а легкая тень придает объемность. Шаблоны сайтов с такими элегантными css-элементами всегда выделяются и обращают внимание читателей и пользуются большой популярностью у веб-мастеров.

Когда вы будете писать текст с использованием буквицы, то придется слегка задумываться над тем, с какой буквы и какого слова начать абзац. Хотя, описанный здесь метод работает в любом случае - вам не надо ни о чем заботиться - первая буква в абзаце формируется автоматически. Это может быть даже не буква, а номер. Например, номер пункта. Или даже специальный html-символ. Главное, чтобы он был в том шрифте, который использован для буквицы.

✔ Вот в этом абзаце приводится пример, как можно буквицу использовать не стандартно для выделения нужного вам фрагмента текста специальным значком или символом. Это по сути просто имитация маркированного списка, но совершенно оригинальным способом. Впечатляет.

1 А здесь приводится пример, использования нумерации в качестве первого символа в абзаце. Создается иллюзия номера. Подводя итог, можно сказать, что варианты использования буквицы ограничены только вашей фантазией и потребностями форматирования вашего текста.

Теперь остается только привести css-код, который позволил нам реализовать варианты оформления текста, приведенные на этой странице. Отметить, что это чистый css, котором использован псевдоэлемент :first-letter. Справедливости ради отметим, что этот элемент не срабатывает, если перед текстом есть картинка. А теперь код для блока p:

p:first-letter {
 float: left;
 margin-right: 10px;
 font: 2.4em/1 Georgia;
 text-shadow: 1px 1px 3px silver;
 color: crimson;
}