Оформление цитат с помощью CSS

Цитаты на сегодняшний день являются неотъемлемой частью любого мало-мальски серьезного интернет проекта, да и одностраничные сайтики нет-нет да и вставят что нибудь этакое в форме цитаты.
Вставить, это мы все горазды, у многих же возникает проблема с оформлением цитат. В первую очередь цель цитирования — это привлечь внимание посетителя впечатав умную мысль, свою или чужую.
Кто-то обходится просто наклонным текстом, кто-то использует готовые шаблоны. Распространенный вид цитаты – это наклонный текст или фон в виде кавычки. Тут уж все зависит от неуемной фантазии «человеков».
В WordPress цитаты оформляются автоматом и обусловлены стилем Вашего шаблона. Или же с помощью отличного плагина : WP-Note. Если у вас тематический блог и вы хотите подчеркнуть свою мысль в статье, то такое выделение слов c помощью этого плагина несомненно привлечет внимание читателя, да и смотрится это красиво.
С WordPress все понятно, нас интересует как оформить цитату на HTML-странице если нет возможности использования сторонних продуктов. Если вам не хочется возиться с картинками, то вполне можно обойтись оформлением с помошью CSS: сделать рамочку или просто отделить текст пунктирной границей.
Давайте наконец рассмотрим несколько примеров, как оформить цитату с помощью CSS кода.

Пример 1:

CSS код:

blockquote {
border:solid #999;
border-width:3px 0;
margin:10px 40px;
padding:15px;
font-size:14px;
color:#999;
}

Изгаляясь над кодом стиля, можно экспериментировать с внешним видом до бесконечности.

Пример 2:

CSS код:

blockquote {
border: dotted #666 1px;
border-left:solid #ff5a00 5px;
margin:10px 40px;
padding:15px;
color:#333;
font-style:italic;
font-size:14px;
background:#fcfcfc;
}

Такой вариант хорошо подойдет не только для цитат, но и например, для выделения кода, ссылок для скачивания, и т.д…

Пример 3:

Рискованный вариант. Прекрасно подойдет для случаев, когда цитата должна обязательно привлечь внимание читателя, призывая его что-то делать, или наборот не делать.

CSS код:

blockquote {
border: 3px 0 solid #000;
margin: 10px 40px;
}
blockquote p{
border: 10px 0 solid #eee;
margin: 0;
padding: 15px;
color: #333333;
font:16px 'Arial Black';
}

Пример 4:

Довольно строгий, аскетичный вариант оформления. Подойдет для сайтов, где текст является основной частью дизайна, нежели красивые рисунки.

CSS код:

blockquote {
border-left: solid 3px #333;
padding-left:1px;
margin: 10px 40px;
}
blockquote p{
border-left: solid #666 1px;
margin:0;
padding:15px;
color:#333;
font:16px 'Times New Roman';
}

Пример 5:

Ну уж совсем простенький способ оформления цитаты, только благодаря наклонному стилю шрифта Georgia, тексту придается некая стилизация и его наверняка захочется прочесть.

CSS код:

blockquote {
margin:10px 40px;
padding:15px;
font: italic 14px Georgia;
border: solid 1px #eee
}

Посмотрели примеры, теперь делайте выбор и вперед. Код CSS соответственно добавьте в свой файл стилей .cssПри написании какой-нибудь нетленной мысли, просто обнесите ее тегами blockquote и довольные собой любуйтесь результатом.

Расскажите, а как вы оформляете цитаты в блоге, или вам достаточно того, как они были оформлены изначально в шаблоне вашей темы?

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: