Кодинг
★ Рубрика: Кодинг
★ Тема: CSS

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

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


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


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


Использовав например, div для формирования абзаца, можно разместить абзац без первой стилизованной буквы так как это сделано в настоящем абзаце. Все просто, понятно и доступно. Отметим, что предложенный здесь способ формирования буквицы хорошо подходит и для адаптивного шаблона - размер буквы настраивается под размер основного шрифта текста.

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;
}
 Похожие публикации: CSS

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]