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

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

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


blockquote {        
margin : 0 20px;         
padding: 60px 30px 40px 20px;         
background: #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/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(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left;text-indent: 65px;}


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

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

blockquote {
background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/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(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5amaI/AAAAAAAACOs/wZtmW2g1jC0/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 лет. Это будет вкусно


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger комменты
    Facebook комменты

0 коммент. :

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