Двойные кавычки легко и просто
Этот урок по CSS покажет вам как можно отобразить два изображения двойных кавычек используя один тэг
blockquote
. Прием заключается в применении одного фонового изображения на теге
blockquote
, а затем применить другой фон на первой букве (псевдо-элементе)
blockquote
.
Просмотреть двойные кавычки
Загрузить файл HTML
1. Исходный HTML код
Начните с тега
blockquote
и какого-нибудь текста.
<blockquote>
Hello, I am a double quote...</blockquote>
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. Перевод: Портал для дизайнеров «Балбесов НЕТ»
Оцените, пожалуйста, эту статью:
Рейтинг: 1.8/5 (голосов: 9)
Читать комментарии [8] на форуме.
Оставить комментарий