2014
04
Авг

Создание абзацев в тексте



Написание текста с использованием CSS мы рассматривали ранее. Но часто для художественного оформления статьи применяют Буквицу: выделяется буква, которая располагается ниже текста. Интересно она смотрится с изображением животного, растения и других объектов. Оригинальность оформления статей привлекает читателя.

Создание буквицы с помощью рисунка


Рисунок эффектно украшает любую информацию, но если часто применять этот прием понадобится большое количество объектов.Рисунок выравнивается по левому краю свойством float, отступы задаются margin

.pic { float: left; /* Выравнивание по левому краю */ margin: 0 3px 3px 0; /* Отступы вокруг буквы */ } <p><img src="images/P.png" width="80" height="100" class="pic">ellentesque faucibus, dolor egestas convallis ultricies, ante lorem pretium sapien, id ultrices magna nisi et felis. </p>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Буквица в тексте


Для этого используют псевдоэлемент::first-letter и :first-child со свойством float.

Шрифт выбирают оригинальный.

p::first-letter { float: left;/* Выравнивание по левому краю */ color:#FF3300;/*Цвет буквы*/ font-size: 70px; /*Размер буквы*/ line-height: 55px;/*межстрочный интервал*/ padding: 4px 8px 0 3px;/*отступы от буквы*/ font-family: Georgia;/*шрифт буквы*/ }

В этом случае все параграфы будут автоматически выводиться буквицей, что не всегда приемлемо. Поэтому лучше использовать дополнительную разметку с помощью тега span. Для него прописываем свойства. Можно фантазировать с помощью CSS и получать различные варианты. Нужную букву теперь достаточно поместить между тегами span и вы увидите свой результат.

.firstletter { float: left;/* Выравнивание по левому краю */ color:#FF3300;/*Цвет буквы*/ font-size: 70px; /*Размер буквы*/ line-height: 55px;/*межстрочный интервал*/ padding: 4px 8px 0 3px;/*отступы от буквы*/ font-family: Georgia;/*шрифт буквы*/ } <p><span class="firstletter">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis elementum suscipit. Mauris non sodales turpis. Cras ullamcorper ultricies erat, vitae semper est porta ac. Donec nunc ipsum, molestie vel luctus quis, faucibus et risus. Phasellus vitae congue tortor. Nam sit amet erat odio. Morbi non lacus et erat aliquet vestibulum. </p>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР