Создаем симпатичные цитаты всего двумя стилями

Самое интересное в цитатах это то, что их все читают

И вы тоже это прочитали. Простой и действеный способ привлечь внимание посетителей и выделить часть текста. Причем делается это в несколько строк.

Любому блочному контейнеру задается класс, в котором мы описываем следующие правила и в последствии присваиваем этот класс по требованию Помимо этого нам нужны две картинки с кавычками, ну или хотя бы одна, в зависимости от дизайна.

Стили описаны так, что закрывающие кавычки вложены как background для всего блока, а открывающие кавычки через псевдоэлемент :first-letter. Через padding указаны необходимые нам отступы, чтобы текст не наезжал на кавычки. Все остальное по вкусу.

CSS:

.pullquote {
width: 25%;
font-size:125%;
line-height:140%;
margin:10px;
background: url(/images/closequote.gif) no-repeat bottom right !important;
padding:0px 35px 5px 5px;
border: 1px dotted #9b4b4b;
text-align:justify;
}
.pullquote:first-letter {
background: url(/images/openquote.gif) no-repeat left top!important;
padding:5px 2px 10px 35px!important;
}

Рабочий пример для ленивых смотрим и забираем здесь.

P.S. Как верно подметил Number One, не совсем семантически верно использовать для цитат тэг p, так как для этих целей существует спецтэг blockquote. Но это не критично. В любом случае решать вам.

Единственная разница в том что стили надо прописывать не для “любого блочного контэйнера” а для blockquote

(проголосовали: 3, рейтинг: 4.67 из 5)

Загрузка ...

Рубрика CSS. Автор Curly Brace | 19 Февраль 2007

7 Комментариев »

1 0
Такое оформление мне очень симпотично, но за .pullquote:first-letter огромное человеческое спасибо!

Комментарий by Sam — Февраль 19, 2007 @ 12:52 pm | Цитировать
2 0
to Sam

не за что

Комментарий by neutrino — Февраль 19, 2007 @ 1:51 pm | Цитировать
3 0
А что с кроссбраузерностью у этого примера?

Комментарий by larin — Октябрь 16, 2007 @ 8:55 pm | Цитировать
4 0
А что с кроссбраузерностью у этого примера?

Комментарий by DenVdmj — Ноябрь 15, 2007 @ 3:21 pm | Цитировать
5 0
С кроссбраузерностью у него все в порядке. Интернет Эксплорер 6 поддерживает псевдокласс :first-letter, единственное обязательное условие - чтобы между псевдоклассом и фигурной скобкой был пробел:
```
h1:first-letter {
```
Комментарий by neutrino — Ноябрь 15, 2007 @ 3:26 pm | Цитировать
6 0
Гораздо лучче чем у before и after
q:before{ content: “\AB” }
q:after{ content: “\BB” }

Комментарий by DenVdmj — Ноябрь 15, 2007 @ 3:30 pm | Цитировать
7 +1
Гораздо лучче чем у before и after q:before{ content: "\AB" } q:after{ content: "\BB" }

Так before и after как раз не поддерживаются в IE6

Комментарий by neutrino — Ноябрь 15, 2007 @ 3:32 pm | Цитировать