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

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

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

blockquote {        
margin : 0 20px;         
padding: 60px 30px 40px 20px;         
background: #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHtar7vnfKHFEjqBQYp9GMeKdkft9zJ2hwJ3fFlhZqmtwpV4dCUB9myZ1aWpMSd6pr9UQDOJylbjnlf9_N4NASYptHQNPZDuqQhqn5xI1tgG1qRtqTZkH7M7uWYHuUANaZHYn4lcWmNqY/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/AVvXsEg_xATljhXbhG4ftucGXLORu1QOlaRGOjK_IRYr2GWmpzUBiz4IQqmrB8OqGvNxABwXH0EcCN1sPFuSQiVwP78-7hkrmVjwGRwaLsBpgAHt-V7pRGgTpOE4_Vyj15MUVK-k_HF4iB-tzOo/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/AVvXsEgSgpim6QtZ9ED4JJC-lngiT3FAQtbDjYrPYG6e4xCbPkjg0decvxoIIylQrLS55Np_F5ylr8yHpSFWvB9V1NgMzV5IGr9UWyZoroV3fwT7jKVf_viCTTzAfO9B7ZCMMKvZsCD6S8RRJZs/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/AVvXsEjUyhTd98ZcHrbBblahQ9LOqsAyJoehIleUNX5ylP4jJWARPfMK1Tk9vWYRFnxblKTACoCXkcCMdKGJSaWTWkmxd5Lcpwxrs1YJgSL1KfCbNeNKIzbNcFcY57bVSP5zj_euP3LCOFBmCt0/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 лет. Это будет вкусно