5 чудесных стилей для оформления цитаты в блоге

И снова здравствуйте, дорогие читатели IPetrenko.com 
Сегодня я предлагаю вам оценить отличные стили для оформление цитат при помощи css и они вам несомненно понравятся.
Многие блоггеры и вебмастера игнорируют их дизайн, однако оформление цитат blockquote является очень важным в восприятии контента. Я предлагаю универсальный код, который подойдет практически для всех CMS, в том числе WordPress, а также для платформы Blogger.

Стиль оформление цитаты с почтовой совой

blockquote {        
margin : 0 20px;         
padding: 60px 30px 40px 20px;         
background: #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIFCGtxjvUA_EdPHHN-dJZ17dqO2kQwx99jN56j2fiWGdtW-Ohwap08SAZ9tmukarovpjJXPkq_t1Atro-qR9UuJLy4kohHyVVRtgKmzqqABoUBUD-rgnscuBjZSICOzurZe59IkhpwV8/s400/owl.png)
 no-repeat 350px 5px;         
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;         
color : #000;         
border-left: 8px dotted #DAB547; 
}     
   
blockquote p {         
margin: 0;         
padding-top:10px;         
} 

Оформление для тега blockquote с зеленными кавычками

blockquote {
font: italic 1em  "comic sans ms", Tahoma, sans-serif;padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilMogA1A8uuoYxY-v8Hm4Gh-nJwbWDAHzXnI1aHsxaM40DqI_MmCl0boKz6L2DwRuZvEdPllvq27rZfLeOIeAqF1afegeAK77Hhen6os1R2cqpcmhyphenhyphen_SitthEYvdbEpQbRaY4aJ0moGYc/s400/comma2-left.gif) no-repeat top left;text-indent: 65px;}


blockquote p {
margin: 0;
padding-top:10px;
}

Оформление цитаты в блоге (с темных фоном)

blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_0cyyLznwrpDGdHjyHWTIYGDEn6QOtXoJmEkE-4eensGmQTMat5Dy_cI9z5PW0zXm8UFODGFRQ2AV1SqXcJxcXKgtWrZm7-s-15PQtCVVW0j-QMXMB_NBf88uWC-PI1VX6XBzRLZtO8/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}


blockquote p {
margin: 0;
padding-top: 10px;
} 

Стиль оформление blockquote с оранжевыми лапками

blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Ul3lOr-sWH4rFQJMpYPr4L9CZ1e7QmUs0G3IztCGhhmB4cQB4A7aT_9wRWGCTRdi7wxHFSID2kDt4WSYU2rq-8cnxXSQ49e_bL8ybn-nggqrOOEEwiYbHBhWMXVsTJgdSOm8kaLXAMQ/s400/comma1-left.gif) no-repeat top left;
text-indent: 65px;
}

blockquote p {
margin: 0;
padding-top:10px;
}

Оформление цитаты с помощью CSS (свойство border)

blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}
    
blockquote p {
margin: 0;
padding-top:10px;
}

В конце предлагаю посмотреть ролик о том, как менялись вкусы людей в течении последних 100 лет. Это будет вкусно