Wmaster - лучший журнал для вебмастеров июнь 2003 [006]
   на главную     web mastering 
   в номере    

Автор: Полянко Александр
Источник:
http://webbegin.info 
Эффект буквицы  

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



  Перепечатка материалов разрешается, только после письменного разрешения автора (e-mail). При перепечатке любого материала с журнала видимая ссылка на источник www.wmaster.ru и все имена, ссылки авторов обязательны.
© Copyright Wmaster Design Group  2002. 

 
    
      Главная
     Авторам
     Журнал Protoplex
     Форум
      Рассылки
     WWW.DESIGN.ST/udio
 
    
   Природные цвета на web-сайте

 
    
    Карта сайта: нужна ли она?

    Больной вопрос – раскрутка сайта

    Keywords для начинающих

    Apache http server
    - тестируем сайт на дому.


   С чем едят SSI?

   Создаём HTML-формы

   Обмен ссылками - как выбирать сайты

    Рассылка как способ раскрутки

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

 
    
    CGI-скрипты на C++

    Раскрутка сайта, поисковики и...
    mod_rewrite


   Пишем перекодировщик translita
    в кириллицу и обратно на PHP.


 
    
    Ключевые запросы в поисковых
    системах на основе статистики
    Ру-нета


    Зачем нужна регистрация
    в каталогах через 1ps.ru


    Веб-хостинг: кто, где,
    когда и почему


    Google и тематика сайта