Оформление цитат blockquote,CSS

Оригинальное оформление цитат (blockquote)при публикации страниц блога.Оформить  внешний вид блока показа цитат можно с помощью CSS-стилей и весь процесс установки не займёт и пару минут.Все примеры тестировались на блоге и должны работать.Необходимо просто выбрать понравившийся Вам вариант и установить код в шаблон или же в любой гаджет НТМЛ. Простые манипуляции в результате которых ваш блог станет неотразимым.

 Варианты оформления цитат.

Пример 1

<style type="text/css"> blockquote { border: dotted #044 2px; border-left:solid #044 5px; margin:10px 50px; padding:15px; color:#044; font-style:italic; font-size:14px; background:#F8FBFA; }</style> 

Пример 2

<style type="text/css"> blockquote:after { border-color: #d37 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 #fdc; border: 5px solid #d37; border-radius: 69px; color: #000; font-style: italic; padding: 10px 20px; position: relative; text-align: center; width: 460px; }</style>

Пример 3 Ниже в примере оформления

<style> .post blockquote { overflow:auto;width:450px;height:auto; font-family: "", "verdana", Courier, mono, serif; margin: 2.5em 30px; padding: 1.5em 100px; line-height:1.1em; clear : both; color:#000; list-style-type : none; background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKX6yydHvbkh8JdAUtdZHvvBQ5eZsQLRaFycy3se0mroQomNXmDkRDBSuK__vJOD8IwFUajuPPMd5Q1lQZXU06wy96yNSps3xz8EDYB7DKXrBWMi1xk5aigYE3Fd7E71eFH27yg5Pzke5o/s1600/v-gol.ru.jpg) repeat-y top left; border : 2px solid #ddd; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); }</style>

Пример  4

<style type="text/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; }</style>

Пример  5

<style> .post blockquote { overflow:auto;width:450px;height:auto; font-family: "", "verdana", Courier, mono, serif; margin: 2.5em 30px; padding: 1.5em 100px; line-height:1.1em; clear : both; color:#000; list-style-type : none; background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPMYBWh3RPeBaLuX73KLj8ewjKOWGHQn4HS9GTQiVCHGF2aaBpwlB7hJUXJJ_kjLykYYkDkMt1AGYNOPoHupixomkj_tGU_PIRHdKiqUsAem8cnbJ-UVV3taPQMMRkRI2IaUU9kjJCzOZV/s1600/v-gol.ru.jpg) repeat-y top left; border : 2px solid #ddd; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); }</style>