Главная » HTML & CSS » Оформление цитат с помощью CSS

Оформление цитат с помощью 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 и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

7 комментариев
  1. Саша:

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

    Ответить
  2. Вячеслав:

    =))

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

    Ответить
  4. Лара:

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

    Ответить
  5. Gennadiy:

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

    Ответить
    • driver:

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

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

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru