Цитаты в тексте и варианты их оформления

Привет друзья. Предлагаю вам опять несколько вариантов оформления цитаты в сообщении. Достаточно часто в блогах используют цитирование. И потому сама цитата в тексте, должна выделяться на основном фоне сообщения. Самое главное, быть правильно оформленной.

У цитат есть специальный тег blockquote. Именно его использование и позволяет не считать приведённый в кавычках текст за плагиат. В редакторе Блоггер есть функция,  которая позволит выделить нужный участок, как цитату. Это значок кавычек. Но сам выделенный участок при этом не очень красиво смотрится.

Поэтому, чтобы придать ей привлекательности используем стили CSS. Меняя цветовую гамму, цитируемый участок можно сделать в совершенно уникальном оформлении.

Предложу несколько вариантов. В кодах можно менять все цветовые значения на свои.  Также изменять толщину рамки, закругление углов. В вариантах 3 и 4 присутствуют картинки. Можно подобрать свои.

1. Вариант в синем оформлении.

Код.

.post blockquote {
background: linear-gradient(#020A5B,  #9799B8) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.6em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0)  #020A5B;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}

Вариант 2. С закруглёнными углами

Код.

.post blockquote {
background: none repeat scroll 0 0 # #ECF0ED;
border: 10px solid #FC8E42;
border-radius: 180px 180px 180px 180px;
color: # #06B910;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;

}

Вариант 3. С фоновой картинкой

Код.

.post blockquote {
margin : 0 20px;
padding: 20px 20px 20px 20px;
background : #DCDCDC url( http://img1.liveinternet.ru/images/attach/c/3/77/637/77637243_17749550accb.png
) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 4px solid #696969; }
.post blockquote p {
margin: 0;
padding-top:10px;
}

Вариант 5. С кавычками

Код.

.post blockquote {
 display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
    font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color:#7D7EAC ;
  text-align: justify;
  border-left: 15px solid #7D7EAC ;
  border-right: 1px dotted #7D7EAC ;
    -moz-box-shadow: -1px 2px 5px #ccc;
  -webkit-box-shadow: -1px 2px 5px #ccc;
  box-shadow: -1px 2px 5px #ccc;
}
.post blockquote:before{
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #8DACC0;
  position: absolute;
  left: 10px;
  top:5px;
}
.post blockquote:after{
  content: "";
}
.post blockquote a{
  text-decoration: none;
  background:#D08A08 ;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}
.post blockquote a:hover{
 color: #666;
}

Вариант 6.  Со сменой фона при наведении курсора. Посмотрите здесь.

Код

.post blockquote
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #F2F1F1;
color: #000;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover
{
background-color: CornflowerBlue ;
color: #fff;
}
.post blockquote:active
{
background-color: lightblue ; ;
color: #000;
}

Если вы что-то подобрали для себя, копируйте нужный код. Заходим в шаблон блога, изменить HTML, находим строку и над ней устанавливаем его. Затем при написании сообщения выделите участок текста с цитатой и нажмите на значок кавычки. В режиме просмотра будет виден результат. 

Если будут затруднения с изменениями стилей при оформлении своего варианта, пишите в комментариях. А у меня сегодня всё. Спасибо что читаете мои шпаргалки. Удачи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email