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

HTML и CSS WordSmall

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

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

Пример.

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

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

Пример.

<cite> …. </cite>

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

Браузер Explorer Chrome Firefox Safari Opera
Версия 3.0+ 1.0+ 1.0+ 1.0+ 2.0+
blockquote + + + + +

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

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

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

1.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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;
}

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

— Не забывайте делиться с друзьями в социальных сетях: —

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 7
  • Ева

    А как получить картинку для цитаты? Ссылка на скачивание не верная((( Нужен 6 вариант

    • WordSmall

      Ева, извините! Обновил, можете скачать.

      • Ева

        WordSmall, спасибо))

  • Alex

    7 тоже нет картинки((

  • олег

    В 7 примере, в хроме не отображается

    background: url («top.png») no-repeat scroll 50% 11px #fedbc200;

    пишет: prntscr.com/cx1moo

    • WordSmall

      А путь к картинке правильно указан?

Добавить комментарий
bold quote code