Оформление цитат - довольно актуальная задача для блоггера. Кто-то обходится просто наклонным текстом, кто-то использует готовые шаблоны тем. Наиболее привычный вид цитаты - это наклонный текст или фон ввиде кавычки. А вот дизайн кавычки - полностью фантазия блоггера.
Вот несколько примеров:
Пример 1. Наклонный текст и открывающая кавычка.
Лучший веб хостинг для блогов и Ваших сайтов. Выделенные IP с каждым тарифом.
Блог хостинг с предустановленным Wordpress 2.6. Домен в подарок на всю жизнь!
Лучший веб хостинг с php, mysql. Домены в подарок. Индивидуальные тарифы.
Лучший веб хостинг для seo. Индививидуальные тарифы. IP из разных подсетей класса С, А.
А вот и более интересные варианты:
Но если вам не хочется возиться с картинками, то вполне можно обойтись оформлением с помошью CSS: сделать рамочку или просто отделить текст пунктирной границей.
Ниже я приведу несколько примеров, как оформить цитату с помощью CSS кода.
Пример 1.
2 границы - верхняя и нижняя шириной в 3 пикселя заметно выделят цитату из текста, поэтому цвет текста необязательно делать ярче.
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-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'; } Пример 4.
Рискованный вариант. Прекрасно подойдет для случаев, когда цитата должна обязательно привлечь внимание читателя, призывая его что-то делать, или, наборот, не делать.
“… Пример оформления цитаты …”
CSS код:
blockquote { border: 3px 0 solid #000; padding-left:1px; margin: 10px 40px; } blockquote p{ border: 10px 0 solid #eee; margin: 0; padding: 15px; color: #333333; font:16px 'Arial Black'; } Пример 5.
Очень простенький способ оформления, но благодаря наклонному стилю шрифта Georgia, тексту придается некая загадочность и его непременно захочется прочесть.
CSS код:
blockquote { margin:10px 40px; padding:15px; font: italic 14px Georgia; border: solid 1px #eee } Жду ваших комментариев и критики :) Расскажите как вы оформляете цитаты в блоге, или вам достаточно того, как они были оформлены изначально в шаблоне вашей темы? Или вы же все любите экспериментировать?
