Оформления цитаты тег blockquote

Опубликовано: 01.09.2018

видео Оформления цитаты тег blockquote

Аббревиатуры, термины и цитаты в HTML. #15

Тег blockquote предназначен для выделения части текста со стилями, отличающими от основного текста. В частности, это выделение цитаты и оформляется как принято в кавычках («….»). Но это нестрогое правило можно немного пофантазировать и стилизовать тег blockquote на свой вкус. В WordPress цитата вставляется в панели оформления текста в сокращенном виде «b-quote». Достаточно выделить отрывок текста и нажать на «b-quote» после чего фрагмент текста будет обвернут в тег blockquote.


HTML тег blockquote или как выделить и оформить цитату в HTML документе

Это очень удобно и внешне подчеркивает дизайн что весьма приятно для глаз. У тега blockquote есть атрибут cite с помощью которого, указывается источник цитаты.

Пример.

<blockquote cite="http://wordsmall.ru">….</ blockquote>

Но также cite используется, как тег и определяет имя произведений (песня, фильмы, книги и т.д.)

Пример.

Что касается поддержки, то тег blockquote поддерживают все популярные браузеры.

Давайте рассмотрим несколько интересных примеров оформления цитаты.

Оформления цитаты без кавычек.

Минимализм всегда приветствуется, простенько и со вкусом. Пару линий, фон подходящего цвета и оформления цитаты готово. Такие стили можно встретить на многих сайтах, ведь главное, выделить цитату от основного контента. Чтобы пользователь сразу обратил внимание на эту часть текста.

1.

CSS

blockquote { background: none repeat scroll 0 0 #fafafa; border-bottom: 3px dashed #bababa; border-top: 3px dashed #bababa; color: #878787; font-family: Georgia,serif; font-size: 16px; font-style: italic; line-height: 1.45; padding: 10px 15px; position: relative; text-align: center; width: 450px; }

2.

CSS

blockquote { background: none repeat scroll 0 0 padding-box rgba(255, 255, 255, 0.1); border-left: 5px solid #6d0c80; box-shadow: 0 0 20px #222222; color: #ffffff; font-family: arial; font-size: 16px; font-style: italic; line-height: 1.45; outline: 0 none; padding: 10px 15px; text-align: center; width: 450px; }

3.

CSS

blockquote:after { border-color: #d3791f transparent transparent; border-style: solid; border-width: 15px; content: ""; display: block; height: 0; position: absolute; right: 55px; top: 100%; width: 0; } blockquote { background: none repeat scroll 0 0 #fbbc62; border: 5px solid #d3791f; border-radius: 69px; color: #802600; font-style: italic; padding: 10px 20px; position: relative; text-align: center; width: 460px; }

4.

CSS

blockquote { background: none repeat scroll 0 0 #eeeeee; border-left: 5px solid #b4b4b4; border-right: 5px solid #b4b4b4; color: #333333; font-style: italic; padding: 10px 20px; text-align: center; width: 460px; box-shadow: 0 0 5px #c0c0c0; }

5.

CSS

blockquote { background: none repeat scroll 0 0 #ff7873; border: 4px dashed #9f1813; color: #fff; font-style: italic; padding: 10px 20px; text-align: center; width: 460px; }

Оформления цитаты с картинками

Для разнообразия или если дизайн сайта требует можно оформить цитату с картинками. Добавить различные элементы, скрепку, книжный орнамент или чей-то портрет и т.д. Это насколько фантазия позволяет делать что-то креативное.

6.

CSS

blockquote { background: none repeat scroll 0 0 #f4e892; color: #252540; font-family: arial; font-size: 17px; font-style: italic; line-height: 1.45; text-align:center; padding: 15px 38px; position: relative; width: 450px; box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.1) inset; } blockquote:before{ position:absolute; margin-top:-33px; margin-left:-20px; content:url('webof.png'); } blockquote:after{ z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; -webkit-box-shadow: 0 19px 7px #a7a7a7; -moz-box-shadow: 0 19px 7px #a7a7a7; box-shadow: 0 19px 7px #a7a7a7; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); }

Скачать картинку

7.

CSS

blockquote:before { content: url("bottom.png"); margin-left: 14%; margin-top: 177px; position: absolute; } blockquote { background: url("top.png") no-repeat scroll 50% 11px #fedbc2; color: #555555; font-family: arial; font-size: 17px; font-style: italic; line-height: 1.45; text-align:center; padding: 55px 38px; position: relative; width: 450px; }

Скачать картинку Скачать картинку

8.

CSS

blockquote { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background:#f7f7f7; border-color: transparent; border-image: url("border2.png") 30 30 30 30; border-style: solid; border-width: 15px; box-shadow: 0 0 3px #cacaca; color: #555555; font-family: arial; font-size: 17px; font-style: italic; line-height: 1.45; text-align:center; padding: 19px 31px; width: 450px; }

Скачать картинку

Оформления цитаты с кавычками.

Традиционное оформление цитаты – в кавычках. Это самый распространённый стиль что в зачастую применяют. Кавычки могут быть одинарные или двойные кавычки , как говорилось ранее в статье. Все дело в кусе, требований и т.д.

9.

CSS

blockquote{ padding: 30px 20px 30px 45px; width:500px; background-color: #DB532B; color:white; box-shadow: 0 5px 2px rgba(0,0,0,0.1); position:relative; transition: background-color 0.6s linear; } blockquote:after { content: " "; height: 0; width: 0; position: absolute; top: 100%; border: solid transparent; border-top-color: #DA532B; border-left-color:#DA532B; border-width: 10px; left: 10%; } blockquote:before { color: #ffffff; content: "“"; display: block; font-size: 80px; left: 5px; position: absolute; top: -10px; }

10.

CSS

blockquote:before { background: url("quotationmark.png") repeat scroll -3px -3px #ddd; border-radius: 25px; bottom: -25px; content: " "; display: block; height: 25px; left: -30px; position: relative; transition: background-color 350ms ease 0s; width: 25px; } blockquote:after { background: url("quotationmark.png") repeat scroll -1px -32px #ddd; border-radius: 25px; content: " "; display: block; float: right; height: 25px; position: relative; right: -21px; top: -21px; transition: background-color 350ms ease 0s; width: 25px; } blockquote:hover:after, blockquote:hover:before { background-color: #555; } blockquote{ padding: 10px 20px; text-align: center; width: 500px; }

Скачать картинку

11.

CSS

blockquote { float: left; position: relative; width: 450px; } blockquote:before, blockquote:after { content: "\201C"; color: #fff; font-size: 60px; font-family: georgia; position: absolute; z-index: 1; } blockquote:before { top: 20px; left: 5px; } blockquote:after { content: "\201D"; bottom: 0; right: 5px; } blockquote p { background: #333; border-radius: 5px; color: #eee; line-height: 1.5; margin-bottom: 20px; padding: 10px 40px; position: relative; } blockquote p:after { content: ''; height: 0; position: absolute; width: 0; border: 8px solid transparent; border-top-color: #333; border-left-color: #333; top: 100%; left: 35px; }

Надеюсь для вас материал был полезен, и вы выбрали что-нибудь для себя интересное.

IRC (Internet Relay Chat)
rss