Портал для веб-мастера
Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » HTML

Эффект буквицы

В типографических изданиях очень часто можно встретить буквицу – выделенную по размеру и цвету первую букву первого абзаца. Красиво так смотрится… Вот бы к себе такую на сайт! Некоторые ограничиваются использованием рисунков, но вдруг посетитель отключил показ картинок. Тогда не будет ни буквицы, ни красоты: от нее останется только пустой квадратик. Решением проблемы становится применение CSS.

First-letter

Псевдо-элемент first-letter как раз и занимается управлением первой буквы заданного блока. Он ищет первый элемент и присваивает ему указанные значения. Стиль написания очень прост.

Пример

<Style type=text/css>
  p:first-letter {font-size:200%; color: lime; float: left}
</Style>
<p>
Очень даже стильный абзац</p>

В примере буква 'О' станет зеленой и увеличенной в два раза, при этом текст будет ее обтекать с правой стороны. Если предложение начинается с кавычки, то она вместе с буквой войдет в состав first-letter.
Помимо прочего псевдо-элемент можно использовать совместно с классами и идентификаторами.

Пример

DIV.effect:first-letter {color: gold}
#Litera:first-letter {font-size:1.5; float:left}

 

First-line

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

Пример

<Style type=text/css>
  p:first-line {font-variant: small-caps}
</Style>
<p>
Слегка приподнятая строка,<br>
зато эта часть ни чем особенным не наделена.</p>

Первая строка в абзаце написана малыми прописными буквами: очень эффектное выделение начала статьи в каком-нибудь журнале.

"Было бы интересно использовать оба псевдо-класса в одном блоке" – скажете вы. И такое в CSS возможно. Надо всего лишь два раза определить элемент и украшенный в вашем стиле абзац не заставит себя ждать.

Пример

<Style type=text/css>
DIV#beautiful:first-line {font-weight: bolder; color:#0f0}
DIV#beautiful:first-letter {font-size:16px; font-style: oblique; color:#f00}
</Style>
<div id=beautiful>
Ваша статья самая<br>
статьястая статья в мире.</div>

Автор: Полянко Александр · Добавлена: 2003-07-22
Источник статьи · Просмотров: 2995 · Рейтинг: 4.8

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Ведете ли вы блог?
Всего ответов: 60122
Наша кнопка
WoWeb.ru - портал для веб-мастера