Как красиво оформить блок цитаты

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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJBjpNtk0K-xqNhH_IAeDKE-x_8_O6dh1chGLZpUb4MV0812TlXcdj3jM4BVqImWcpz1xxH2-3mGEYVUy0DZtA_hmwR9_ZcgWpC4E1iT-yc9xuSJ2e1F4iJCzpb03sB2NbdTzDlgUaztM/s25/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSgyq-SczoyH3z-QPt0Dw4aVVi5aFau23jgRFVSbNAdFOuNK5T6pRUWO10JikpmJEiSe-ZpnnqTZqBIC4T4xkZvqNV6Pm1T6TSDlQQkqwOVQ3Gu2yBG1Ld5E7DDmB0E-tuBO1mZ_MFDLhQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTN3omUhEZ2Oqdd0JBYX2e0ebkX-5gM2RoeKSxOu5GxXPo4jofr8awvrzyosYd5j_1kVcYgw0i61ytD1HtyLT9po2RcTBIPpPuzZxoeu177G-wQL8N0FghvtjcGHqwhZcmrWdUk80ZXgRb/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKpGtHDR8RYi7XjZhmt02YtWl07lOXjD3NkiDsbeMee1cJIH2LvcSaFgadhIF8AXFIIOa-kbnuQQIcvpm43VZBcpycKQLo53fdxTWSooMhndD5u8aEDn_zEywQR-46aVFsz-RqFia3NWBK/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. Можно все стили использовать в шаблоне. Вот вроде и всё.Пока.

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

источник