Стили CSS — создаем эффектно оформленную блочную цитату

Автор: Крис Койер
Перевод: Всеволод Козлов

Всем нам знакома блочная цитата. Основное ее применение: цитирование фрагментов информации с других сайтов или, например, на форуме — цитирование участников дискуссии.

Стили CSS - создаем эффектно оформленную блочную цитату

Кто-то уделяет оформлению блочной цитаты внимание, кто-то нет. А почему? Это ведь так просто…

В этой статье мне хотелось бы поделиться с Вами несколькими стилями оформления блочных цитат.

Фрагмент HTML-кода (код общий для всех примеров, неободимо только подставить нужное название стиля)

<blockquote class="style1"><span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt processus soluta sequitur autem demonstraverunt.</span></blockquote>

Фрагменты CSS стилей для различных вариантов оформления

better-blockquotes-with-css-1.gif

blockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

better-blockquotes-with-css-2.gif

blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

better-blockquotes-with-css-3.gif

blockquote.style3 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(images/openquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote.style3 span {
display: block;
background-image: url(images/closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

better-blockquotes-with-css-4.gif

blockquote.style4 {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(images/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

better-blockquotes-with-css-5.gif

blockquote.style5 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(images/openquote5.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style5 div {
padding-right: 50px;
display: block;
background-image: url(images/closequote5.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Скачать графические элементы цитат, использованные в вышеприведенных примерах.

Оригинал статьи: Better Blockquotes with CSS

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*