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

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


У цитат есть специальный тег 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;
}



4.Вариант.



 Код.

.post blockquote {
margin : 0 20px;
padding: 20px 20px 20px 20px;
background : #CCCCCC url(http://x-vanna.com.ua/wp-content/uploads/2014/06/liniya.png
) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 6px solid #336699 ; }
.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


12 комментариев:

  1. Сегодня сразу 2 новости от тебя: на почту пришла вся статья целиком и очень полезная информация про цитаты. Я уже задумывалась, что будет с сообщением, если я туда вставила кусок неуникального текста в виде цитаты. А, оказывается , все впорядке! Все больше и больше люблю blogger!

    ОтветитьУдалить
    Ответы
    1. Спасибо, Олеся. Да, Блоггер позаботился об этом.

      Удалить
  2. И эта статья в копилочку. Спасибо!

    ОтветитьУдалить
    Ответы
    1. sertifok, пользуйтесь.Рада что пригодилось.

      Удалить
  3. Здравствуй Вика! А ты случайно не знаешь, в каком файле я должен установить коды если у меня Wordpress?

    ОтветитьУдалить
    Ответы
    1. Вика, я уже сам разобрался! Редактировать нужно в файле style css, но
      только что попробовал вставить вариант со сменой фона при наведении курсора, но фон не меняется при наведении курсора. И он вообще выглядит не так, как у тебя в примере.

      Удалить
    2. Ты меня прости пожалуйста за то, что я завалил тебя комментариями и загрузил всех твоих читателей. Надо было мне сначала всё попробовать, а потом только писать :(
      Всё нормально, можешь не париться из-за меня, всё получилось!!!
      Дело в том, что в моём шаблоне стиль цитат обозначен не так как у тебя .post blockquote, вот так - blockquote Всё таки у меня wordpress а не bloger, поэтому в самом коде нужно было это изменить!
      Огромное тебе спасибо за интересную и нужную информацию!

      Удалить
    3. Игорь, привет. Ну не успела ответить тебе сразу и хорошо, что ты сам разобрался. вообще-то другой вариант этого можно ставить в HEAD заключив в теги STYLE. В блоггере тоже blockquote так что можно и так и эдак вставлять.
      Спасибо за визит.

      Удалить
  4. Здравствуйте, Вика! В варианте №6 если перейти по активной ссылке "здесь" есть интересный вариант "золотой ключик". Где можно посмотреть код? Спасибо:))

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Лариса. Возможно, вы это имеете ввиду. http://www.shpargalochki.ru/2015/08/krasivaja-vypadajushhaja-panel-so-skrytym-tekstom.html

      Удалить
    2. Да, Виктория.. Спасибо:))

      Удалить
    3. Заглядывайте!

      Удалить

Пользовательский поиск