Рубрика CSS

Создание двойных кавычек

В этом уроке мы рассмотрим способ создания двойных кавычек, при помощи тега <blockquote>. Способ заключается в применении двух фоновых изображений, одно из которых применяется к тегу <blockquote>, другое к псевдо-элементу first-letter.

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

Начнем с тега <blockquote>, предварительно добавив текст для примера.

<blockquote>Hello, I am a double quote...</blockquote>

2. Определяем тег blockquote

Применяем некоторые свойства CSS.

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;
}

В коде выше отображено применение фонового изображения к тегу <blockquote> и позиционирование его в правом нижнем углу. В результате применения внутренних отступов у нас образовался выступ первой строки -18 пикселей. Выглядит это следующим образом.

3. Стилизация цитаты

Теперь добавим свойство padding-left со значением 18 пикселей к первой строке цитаты. Это позволит нам выровнять текст по левому краю. Осталось применить фоновое изображение, которое будет располагаться в левом верхнем углу.
Примечание: для стилизации прописной буквы в начале цитаты я использовал свойство font.

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;
}

Pullquote стиль (вынос цитаты)

Если вы хотите вынести цитату за пределы текста, то можно воспользоваться свойством float со значением left или right. Посмотреть пример pullquote можно здесь.

Источник: www.webdesignerwall.com.
Перевод: Администратор сайта explorer-soft.com.