Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

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

Всего комментариев: 7

  • Саша: 7 октября, 2010 в 13:07

    Мне понравилась статья)

    Ответить
  • Вячеслав: 27 марта, 2011 в 09:41

    =))

    Ответить
  • Blogger_: 2 июня, 2011 в 11:50

    Как раз искал в яндексе новый вид цитаты и наткулся на эту статью. Очень вам благодарен!

    Ответить
  • Лара: 2 сентября, 2013 в 16:46

    А скажите куда именно вставлять код нужно? Я плохо в этом разбираюсь.

    Ответить
  • Gennadiy: 4 февраля, 2015 в 18:52

    А ничего, что у вас 3й пример, код написан 1 а в исходнике совсем другой ?)))

    Ответить
    • driver: 5 февраля, 2015 в 00:07

      А в чём отличия то? В исходниках стили прописаны напрямую для div-а и параграфа, а в примере кода обозначен селектор blockquote, стандартный для цитат, разве что свойства border, сократил в примере и всё.

      Ответить
  • Андрей Зенков: 7 февраля, 2016 в 20:44

    Первый вариант самый красивый.

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>