Авторское право © WWW : Балбесов нет: Компьютерная графика
Перепубликация материалов,возможна только с устного или письменного разрешения Администрации сайта !
Название статьи , Опубликовано Статьи » Уроки » Веб-дизайн » Двойные кавычки легко и просто
07 мая 2009 00:01

Этот урок по CSS покажет вам как можно отобразить два изображения двойных кавычек используя один тэг blockquote. Прием заключается в применении одного фонового изображения на теге blockquote, а затем применить другой фон на первой букве (псевдо-элементе) blockquote.

Просмотреть двойные кавычки

Загрузить файл HTML

1. Исходный HTML код

Начните с тега blockquote и какого-нибудь текста.

Hello, I am a double quote...

2. Задайте тег blockquote


blockquote {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(images/close-quote.gif) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
}

Код CSS приведенный сверху отобразит графический фон из файла close-quote.gif (закрывающая кавычка) в нижнем правом углу. Элементы padding-left и text-indent создадут висящий отступ величиной -18 пикселей. Это будет выглядеть вот так:

3. Первая буква тега blockquote

Теперь добавьте заполнение на 18 пикселей к первой букве blockquote. Это заставит текст выровняться воедино. Затем отобразите файл open-quote.gif (открывающая кавычка) в верхнем левом углу. Обратите внимание, что первую букву я сделал в отличном стиле шрифта просто, чтобы смотрелось красивее.


blockquote:first-letter {
  background: url(images/open-quote.gif) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

Стиль с врезными кавычками

Если вы хотите сделать врезные кавычки, просто задайте тег blockquote размещенным слева или справа. Посмотрите мой пример с врезными кавычками.


Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»

URL / WWW
http://balbesof.net/article/a-120.html