—»     —»   Создаем буквицу при помощи CSS-элементов :first-line и :first-letter
  Раздел: CSS/Style Sheets   Комментариев: 2  

Создаем буквицу при помощи CSS-элементов :first-line и :first-letter

Есть некоторые такие CSS-селекторы и параметры, которыми, как нам кажется, пользуются довольно редко, хотя они есть в спецификации еще со времен CSS1. Некоторые из них представляют собой псевдо-элементы :first-line и :first-letter.

Как ими пользоваться?

Эти псевдо-элементы работают наподобие смежных :before и :after, и нам кажется, что здесь все довольно доступно и понятно. :first-letter определяет первую букву выделенного элемента, этот псевдо-элемент часто используется для создания типографского эффекта буквица. Давайте рассмотрим, как это реализовано.

p:first-letter {
font-size: 50px;
}

Этот код даст нам следующий результат.

Создаем буквицу при помощи CSS-элементов :first-line и :first-letter

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

Создаем буквицу при помощи CSS-элементов :first-line и :first-letter

Далее, что касается :first-line, то этот псевдо-элемент определяет первую линию целевого элемента. Нижеприведенный пример показывает, как мы можем выделить верхнюю строку абзаца полужирным текстом.

p:first-line {
font-weight: bold;
}

Как и в предыдущим коде :first-letter, этот также повлияет на все первые строки в абзацах на странице.

Создаем буквицу при помощи CSS-элементов :first-line и :first-letter

Так что, в реальных случаях, когда нам нужно добавить буквицу или изменить только первую строку первого абзаца, нам нужно все указывать более детально, либо добавляя дополнительный атрибут класс, либо применяя эти псевдо-селекторы вместе с селекторами :first-child или :first-of-type или что-то вроде того.

p:first-child:first-letter {
font-size: 50px;
}
p:first-child:first-line {
font-weight: bold;
}

Итак, у нас получилось выделить только первый абзац.

Создаем буквицу при помощи CSS-элементов :first-line и :first-letter

Псевдо-элементы в работе

Ну что же, давайте попробуем придать абзацу более привлекательный вид, используя псевдо-элементы. Но перед тем как начать, нам потребуется специальный шрифт для нашей буквицы, и здесь мы остановились на Hominis от Paul Lloyd. Затем мы определяем новое семейство шрифтов в каскадных таблицах стилей следующим образом:

@font-face {
font-family: 'HominisNormal';
src: url('fonts/HOMINIS-webfont.eot');
src: url('fonts/HOMINIS-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/HOMINIS-webfont.woff') format('woff'),
url('fonts/HOMINIS-webfont.ttf') format('truetype'),
url('fonts/HOMINIS-webfont.svg#HominisNormal') format('svg');
font-weight: normal;
font-style: normal;
}

Далее мы выставляем стандартное семейство шрифтов для нашего абзаца:

p {
color: #555;
font-family: 'Georgia', Times, serif;
line-height: 24px;
}

В этом примере мы будем использовать селектор :first-child для указания первого абзаца, и применим декоративные стили, чтобы он выглядел более привлекательно:

p:first-child {
padding: 30px;
border-left: 5px solid #7f7664;
background-color: #f5f4f2;
line-height: 32px;
box-shadow: 5px 5px 0px 0px rgba(127, 118, 100, 0.2);
position: relative;
}

Затем мы добавляем буквицу при помощи :first-letter, увеличиваем размер шрифта, а также применяем новое семейство шрифтов:

p:first-child:first-letter {
font-size: 72px;
float: left;
padding: 10px;
height: 64px;
font-family: 'HominisNormal';
background-color: #7F7664;
margin-right: 10px;
color: white;
border-radius: 5px;
line-height: 70px;
}

Мы также сделаем акцент на первой строке при помощи :first-line следующим образом:

p:first-child:first-line {
font-weight: bold;
font-size: 24px;
color: #7f7664;
}

Наконец, нам нужно добавить декоративный атрибут в виде скрепки к первому абзацу при помощи псевдо-элемента :after.

p:first-child:after {
background: url("../images/paper-clip.png") no-repeat scroll 0 0 transparent;
content: " ";
display: inline-block;
height: 100px;
position: absolute;
right: -5px;
top: -35px;
width: 100px;
}

Это и есть весь необходимый нам код. Теперь наш абзац выглядит гораздо лучше!

Создаем буквицу при помощи CSS-элементов :first-line и :first-letter

Вы также можете посмотреть демо, приведенное по ссылке ниже:

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


В завершение

Как мы уже ранее отмечали в этой статьи, эти псевдо-элементы, особенно :first-letter и :first-line, были добавлены в спецификацию еще со времен CSS1, а значит они отлично поддерживаются в Internet Explorer 8 и более ранних версиях.

Но, насколько нам известно, их не так часто используют. Так что надеемся, что данное руководство вдохновит вас на создание собственных эффектов.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 6454   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 11 декабря 2012 @ 05:37
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
Отличная статейка, записал себе, никогда не пробовал подобное, надо испробовать на очередном клиенте! ))


--------------------
я дизайнер - http://imdesigner.ru
Комментарий #2: 15 января 2013 @ 21:00
Написал: Vatrych — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я встречался с этим еще в первых уроках по CSS, но в сети только в корявом дизайне начинающих, или в западных шедеврах.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031