оформление цитат в современном стиле

Доброго времени суток, друзья. Красиво оформленные цитаты в тексте не только элемент дизайна. Оформлению цитат в сообщениях стоит уделять особое внимание, ведь красиво оформленный участок текста лучше воспринимается читателем. В первую очередь цель цитирования — это привлечь внимание посетителя.

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

Сегодня во всех примерах привела для наглядности скриншоты. Вы же выбираете для себя понравившийся вариант и просто копируете его код. Можно проверить работу кода в этом редакторе. 

Вариант 1.

оформление цитат

Код

<blockquote>
  <p>Главное в женщине не одежда, а милые манеры, рассудительность и строгий режим дня.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>
<style>blockquote {
background: linear-gradient(135deg, #F6EEDB 50%, #F4FEF9 50%);
padding: 50px 30px;
text-align: center;
position: relative;
color: #49152C;
padding: 30px 50px;
font-family: 'Lato', sans-serif;
}
blockquote p {
font-size: 22px;
margin-top: 30px;
}
blockquote p:before {
content: "\201C";
font-size: 100px;
color: #EA6844;
font-family: serif;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
blockquote cite {
font-style: normal;
}</style>

Вариант 2.

оформление цитат

Код

<blockquote>
  <p>Лучший модный аксессуар женщины - красивый мужчина.</p>
  <cite>Коко Шанель</cite>
</blockquote>

<style>blockquote {
margin: 0;
background: white;
border-top: 5px solid #EAF9F9;
border-bottom: 5px solid #EAF9F9;
color: #3A3C55;
padding: 30px 30px 30px 90px;
position: relative;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
left: 20px;
top: 20px;
color: white;
background: #FB6652;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 50px;
line-height: 1.35;
text-align: center;
}
blockquote p {
margin: 0 0 16px;
font-size: 22px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
}</style>


Вариант 3.

оформление цитат

Код

<blockquote>
  <p>Люди, обладающие хорошим вкусом могут носить бижутерию. Остальные – предпочитают золото.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

<style>blockquote {
margin: 0;
background: #BCE8EA;
color: #131314;
padding: 30px 30px 30px 90px;
position: relative;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
top: 20px;
left: 16px;
color: black;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
blockquote:after {
content: "";
width: 4px;
background: white;
position:absolute;
left: 70px;
top: 20px;
bottom: 20px;
}
blockquote p {
margin-top: 0;
font-size: 24px;
font-weight: 300;
}
blockquote cite {
font-style: normal;
text-transform: uppercase;
}</style>



Вариант 4.


Код

<blockquote>
  <p>Главное в женщине не одежда, а милые манеры, рассудительность и строгий режим дня.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

<style>
blockquote {
margin: 0;
background: #FFF4ED;
padding: 40px;
color: #3F484D;
position: relative;
font-family: 'Lato', sans-serif;
text-align: center;
}
blockquote:before, blockquote:after {
font-size: 45px;
color: #3CA1D9;
position: absolute;
height: 2px;
left: 40px;
right: 40px;
line-height: .5;
background: linear-gradient(to right, #3CA1D9 45%, transparent 45%, transparent), linear-gradient(to right, transparent, transparent 55%, #3CA1D9 55%);
font-family: serif;
}
blockquote:before {
content: "\201C";
top: 30px;
}
blockquote:after {
content: "\201D";
bottom: 30px;
}
blockquote p {
font-size: 20px;
}
blockquote footer {
margin-bottom: 1em;
}
blockquote cite {
font-style: normal;
}</style>

Вариант 5.


Код

<blockquote>
  <p>Ничто так не старит женщину, как слишком богатый костюм.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>
<style>
blockquote {
margin: 0;
background: #F0F0F1;
color: #333334;
padding: 20px 30px;
position: relative;
border-left: 35px solid #DFDEDE;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
left: -29px;
top: 5px;
color: #BCBCBC;
font-size: 50px;
text-shadow: 1px 2px 0 white;
}
blockquote p {
margin: 0 0 16px;
font-size: 20px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
font-weight: 300;
}</style>


В участке кода

<blockquote>
  <p>Главное в женщине не одежда, а милые манеры, рассудительность и строгий режим дня.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

Пишите вашу цитату и имя автора. Общий фон цитат определяется свойством background: и вы легко можете подобрать нужный цвет, если воспользуетесь этой таблицей цветов. При написании сообщения перейдите в режим HTML и установите в нужном месте готовый код.

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

Сегодня всё. До встречи.

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

введите пожалуйста свой email :

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

  1. Вика, приветик. Ну о-о-чень симпатично! И как в той рекламе:"Берём!" Спасибо, дорогая, за твои полезные шпаргалки. 🌹🌹🌹 Приятных выходных!

    ОтветитьУдалить
    Ответы
    1. Люба. Бери и пользуйся. Цитатами многие пользуются. Хоть Блоггер нам и предоставил возможность выделения цитаты в панели инструментов. но там скучновато. Спасибо тебе.

      Удалить
  2. Очень интересная и полезная вещь.

    ОтветитьУдалить
  3. Zelo bardzo, Vika! Это по-польски. А по-русски - очень красиво! Слава Богу, я пока цитирую, в основном, себя. А то бы была очередная головная боль.

    ОтветитьУдалить
    Ответы
    1. Ну, Семён, сначала и не поняла. Ну я в ответ тебе на иврите מאוד יפה . Кстаи пока сложно тебе. Но в Блоггере в редакторе есть функция выделения цитаты. Просто нужно выделить цитируемый текст и нажать на значок кавычки. На первое время можно ей воспользоваться.

      Удалить
  4. Согласна - оформление имеет большое значение. Спасибо за такой подробный пост, забираю в копилку. (Я пока цитаты оформляю в фотошопе в виде картинки)

    ОтветитьУдалить
    Ответы
    1. Вика, а ведь эти коды не несут ни какой нагрузки на блог, по сравнению с картинками.

      Удалить
  5. Вика, круто! Сделала в последней статье. Спасибо-преспасибо!!!

    ОтветитьУдалить
    Ответы
    1. Вика, и еще вопрос на злобу дня. А если это стихотворная тема, то как ввести чтобы не сплошной текст был, а строки соблюдались. Пыталась, не получилось, пишет всё, как прозу.

      Удалить
  6. Виктория, скопировала все твои коды! Я люблю цитаты! Конечно, все пригодятся. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Ирина, ты часто размещаешь цитаты. Обратила внимание, что просто меняешь цвет текста. А вот сам тег blockquote поисковики видят и знают, что это именно цитата. Даже если кому сложно вот так , как я в примере привела в редакторе Блоггер предусмотрен этот тег. Выше Семёну писала об этом. А так сложного в кодах ничего нет. В черновик скопируешь нужный, заменяешь текст на свой и вуаля- вставляешь просто в нужном месте в режиме HTML

      Удалить
  7. Валерия, при переносе строк на языке HTML применяется тег <br>
    Тогда соответственно пишем так, например
    Дама сдавала в багаж<br>
    Диван, чемодан, саквояж...
    И всё будет ОК. Цитаты нужно выделять. Это и красиво и правильно.

    ОтветитьУдалить
  8. Спасибо за очередную красоту,забрала себе,буду экспериментировать)

    ОтветитьУдалить
    Ответы
    1. Зоя, да красоты много не бывает. забирай.

      Удалить
  9. Виктория, мне очень понравился твой пост об оформлении цитат. Приглашаю посмотреть мой новый пост, в котором я использовала твой третий вариант.

    ОтветитьУдалить
    Ответы
    1. Ирина, посмотрю обязательно. Спасибо.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML