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


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




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


Пример 1

blockquote CSS

<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

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


<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://2.bp.blogspot.com/-N2Dg1gc0h3I/VuGmj5ioMfI/AAAAAAAAEwE/l6E-3HaA4hw/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

blockquote или цитаты


<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

цитаты для блога на CSS

<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://3.bp.blogspot.com/-VRHwH1-a6g4/VuHMa7rrWZI/AAAAAAAAEwU/XRpKNOgmj-A/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>


Отправить комментарий