Способы оформления цитат с помощью CSS
Оформление цитат – довольно актуальная задача для блоггера. Кто-то обходится просто наклонным текстом, кто-то использует готовые шаблоны тем. Наиболее привычный вид цитаты – это наклонный текст или фон ввиде кавычки. А вот дизайн кавычки – полностью фантазия блоггера.
Вот несколько примеров:
Пример 1. Наклонный текст и открывающая кавычка.
Лучший веб хостинг для блогов и Ваших сайтов. Выделенные 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
}
Жду ваших комментариев и критики :) Расскажите как вы оформляете цитаты в блоге, или вам достаточно того, как они были оформлены изначально в шаблоне вашей темы? Или вы же все любите экспериментировать?
Dmoz
Как всегда спасибо. Супер обзор.
Цитировать
Поздравляю c PR5, нас тут целый клуб 4-5 :)
Цитировать
e у бя когда eskhosting покупали 5 ссылок, они имелли ввиду по 1 ссылке в статье, а не все 5 ссылок засунуть в один пост.
Советую изменить!
Цитировать
В русской типографике ёлочки больше подходят, а насчёт параграфа внутри – я его не использую.
Цитировать
Да скушно это :( Такого можно понаделать сколько угодно под свой блог
Цитировать
Большое спасибо! Очень по теме!!!
Цитировать
Полезная статья. Как раз изучаю CSS, обязательно возьму на заметку. (положил в закладки) Спасибо.
Цитировать
Кстати, да – почему никто парные кавычки-елочки не использует?
Цитировать
спасибо большое, мне это очень помогло
Цитировать
Здравствуйте! Спасибо за обзор. Не могли бы вы дать ссылку на пример оформления цитат с картинками (как на первом рисунке)? Можно на английском языке. Заранее спасибо :)
Цитировать
Ссылочку, к сожалению, не сохранила, но полную подборку примеров можете найти .
Цитировать
ничего, ничего, спасибо большое :) можно и другие :)
Цитировать
Статья понравилась! Этакий короткий микс практических знаний. Хоть и “зажгли лампу среди белого дня”:)
Цитировать
Пример 1{
margin:10px 40px;
}
строчка с margin лишняя учите css
Цитировать
Почему лишняя? Вы внешние отступы от блока с цитатой не видете?
Цитировать
Объясните, пожалуйста, чайнику – а как в случае с просто html страницой сайта (или ЖЖ) возможно приблизительно подобное оформление блока цитаты ? А то, если просто
Почему же, эти примеры не только для блогов, но и для сайтов. Все зависит от дизайна. Где-то кавычки будут смотреться, а где-то лучше просто обойтись наклонным текстом и бордером, как в примере 3.
Цитировать
сори, вот
<blockquote style="стиль цитаты"></blockquote>Цитировать
Спасибо за информативный пост! А не подскажите, какой код нужно прописывать, чтобы фоном цитаты была картинка?
Я вот пока только изучаю вордпресс и хочу знать все возможности.
Заранее спасибо.
Цитировать
Для того чтобы сделать фон, достаточно прописать свойство background:
blockquote { background:url(тут_путь_к_фону); }Цитировать
В 5 примере нужно заменить строки вида
border: 10px 0 solid #eee;на
border: solid #eee;
border-width: 10px 0;
Цитировать
Сорри, опечатался, не в 5, а в 4 примере.
Цитировать
LeV, а зачем эта замена? Смысл как раз в упрощеной записи
Цитировать
Супер, спасибо, мне пригодилось, за что я благодарен.))
Цитировать
Подскажите чайнику поподробнй как сделать цитату с Кавычками ?
Пример 1 , 3-е Фото – цитата с боку.
Откуда вообще ковычки появляются ? И как их вывести ?
Цитировать