Всем привет! Сегодня я покажу как красиво оформить блочную цитату. Эти стили довольно старенькие, но до сих пор вполне актуальны. Посмотреть и выбрать себе стиль оформления можно в демонстрационном блоге. Смотреть. Если выбрали, тогда можем приступать.

Cоздаем эффектно оформленную красивую блочную цитату - стили CSS


Вариант первый:

blockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(https://lh3.googleusercontent.com/-W_t4kr_cnL8/TryHmrdUhJI/AAAAAAAABs8/wFN5wlQGaQ0/s25/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(https://lh4.googleusercontent.com/-P6iY1yjxSZo/TryHkst54uI/AAAAAAAABs0/rUsUI0EgBEw/s25/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
Вариант второй:
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

Вариант третий:

blockquote.style3 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(https://lh3.googleusercontent.com/-rpej94PjpCQ/TryOIy2XNRI/AAAAAAAABt4/7UzggrE0a1I/s65/openquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote.style3 span {
display: block;
background-image: url(https://lh4.googleusercontent.com/-cf5lYCVjw1U/TryOHB0bR4I/AAAAAAAABtw/JSBQhLoekxY/s65/closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Вариант четвёртый:

blockquote.style4 {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(https://lh3.googleusercontent.com/-Ug9Gb1WVyso/TryHgrZkqcI/AAAAAAAABss/ejUw-in9dKU/s96/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

Вариант пятый:

blockquote.style5 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(https://lh5.googleusercontent.com/-FE9KBDRGPXU/TryOMrkGGMI/AAAAAAAABuI/JnOFc9fOP3w/s96/openquote5.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style5 div {
padding-right: 50px;
display: block;
background-image: url(https://lh5.googleusercontent.com/-IJBaN0C6Ut0/TryOLMDUG1I/AAAAAAAABuA/le8LXAuQzMw/s96/closequote5.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
Код стиля вставляется после строчки ]]></b:skin> в вашем шаблоне.
Во время написания поста нужный Вам фрагмент текста заключаем в <blockquote class="style1">Ваша цитата или текст</blockquote> Код общий для всех примеров, неободимо только подставить нужное название стиля 1,2,3 или 4,5. Можно все стили использовать в шаблоне. Вот вроде и всё.Пока.

На вопрос Как красиво оформить блок цитаты? мы ответили.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


5 коммент. :

  1. Спасибо!Очень интересный блог! Немного взяла себе.

    ОтветитьУдалить
  2. Вставляю код после указанной строки ]]> и он отображается в верхней части шаблона, над шапкой.

    ОтветитьУдалить
    Ответы
    1. Такое происходит когда код неправильно вставляете. Не в стили шаблона.

      Удалить