Цитаты на CSS и Blockquote. 11 примеров использования

Первая статья в этом году будет полностью посвящена цитатам в тексте и такому замечательному CSS тегу, как <blockquote>, а также оформлению цитат с помощью CSS стилей. Если вы занимаетесь размещением контента на своём сайте, то обязательно должны использовать в тексте выделенные цитаты, т.к. они помогают акцентировать внимание на отдельных важных фразах, а также позволяет разбить скучный массив текста красивыми блоками, в том числе с анимацией.

В этой статье мы покажем варианты, как выделить цитаты тегом<blockquote>и CSS стилями. Наслаждайтесь этими 100% бесплатными примерами с открытым исходным кодом. Варианты включает в себя анимированные блок-цитаты, эффекты зависания, стили типографики и другое.

Поехали!

1. Цитата (BlockQuotes) со шрифтом Font Awesome

HTML

<blockquote class="blockquote">
<p>Моралес превратил и без того пластичную боливийскую демократию в пластилин, с которым его руки играют, как ему заблагорассудится.</p>
</blockquote>

<blockquote class="otro-blockquote">Творчество &mdash; это просто соединение вещей. Когда вы спрашиваете творческих людей, как они что-то сделали, они чувствуют себя немного виноватыми, потому что на самом деле они этого не делали, они просто что-то видели. Через некоторое время это показалось им очевидным. Это потому, что они смогли объединить свой опыт и синтезировать новые вещи. <span>Стив Джобс</span></blockquote>

CSS

.blockquote {
 padding: 60px 80px 40px;
 position: relative;
}
.blockquote p {
 font-family: "Utopia-italic";
 font-size: 35px;
 font-weight: 700px;
 text-align: center;
}
 .blockquote:before {
 position: absolute;
 font-family: 'FontAwesome';
 top: 0;
 content:"\f10d";
 font-size: 200px;
 color: rgba(0,0,0,0.1);
}
 .blockquote::after {
 content: "";
 top: 20px;
 left: 50%;
 margin-left: -100px;
 position: absolute;
 border-bottom: 3px solid #bf0024;
 height: 3px;
 width: 200px;
}
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
.otro-blockquote{
 font-size: 1.4em;
 width:60%;
 margin:50px auto;
 font-family:Open Sans;
 font-style:italic;
 color: #555555;
 padding:1.2em 30px 1.2em 75px;
 border-left:8px solid #78C0A8 ;
 line-height:1.6;
 position: relative;
 background:#EDEDED;
}
 .otro-blockquote::before{
 font-family:Arial;
 content: "\201C";
 color:#78C0A8;
 font-size:4em;
 position: absolute;
 left: 10px;
 top:-10px;
}
 .otro-blockquote::after{
 content: '';
}
 .otro-blockquote span{
 display:block;
 color:#333333;
 font-style: normal;
 font-weight: bold;
 margin-top:1em;
}

2. Цитата с hover эффектом

HTML

<div class="box2"><i class="fas fa-quote-left fa2"></i>
<div class="text2"><i class="fas fa-quote-left fa2"></i>
<div>
<h3>Цитата дня</h3>
<p>Для современного мира базовый вектор развития обеспечивает актуальность системы массового участия. Предварительные выводы неутешительны: синтетическое тестирование играет важную роль в формировании прогресса профессионального сообщества.</p>
</div>
</div>
</div>

CSS

.box {
 background-color: transparent;
 border-radius: 3px;
 color: #fff;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 400px;
 height: 300px;
 transform-style: preserve-3d;
 perspective: 2000px;
 transition: .4s;
 text-align: center;
 &:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: transparent;
 border-top: 20px solid #fff;
 border-left: 20px solid #fff;
 box-sizing: border-box;
 }
 &:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-bottom: 20px solid #fff;
 border-right: 20px solid #fff;
 box-sizing: border-box;
 }
 .fas {
 font-size: 25px;
 height: 50px;
 width: 50px;
 line-height: 50px !important;
 background-color: #fff;
 color: #2C3A47;
 }
 .fa2 {
 position: absolute;
 bottom: 0;
 right: 0;
 z-index: 1;
 }
 .text {
 position: absolute;
 top: 30px;
 left: -30px;
 width: calc(100% + 60px);
 height: calc(100% - 60px);
 background-color: #2C3A47;
 border-radius: 3px;
 transition: .4s;
 .fa1 {
 position: absolute;
 top: 0;
 left: 0;
 }
 div {
 position: absolute;
 top: 50%;
 left: 0;
 transform: translateY(-50%);
 text-align: center;
 width: 100%;
 padding: 30px 60px;
 line-height: 1.5;
 box-sizing: border-box;
 h3 {
 font-size: 30px;
 margin-bottom: 5px;
 }
 p {
 font-size: 15px;
 }
 }
 }
 &:hover {
 .text {
 transform: rotateY(20deg) skewY(-3deg)
 }
 transform: translate(-50%, -50%) rotateY(-20deg) skewY(3deg)
 }
}

3. Цитата на CSS стилях

HTML

<div class="blockquote-wrapper">
 <div class="blockquote">
 <h1>
 Уважать всякого человека, как самого себя, и поступать с ним, как мы желаем, чтобы с нами поступали, — <span style="color:#ffffff"> выше этого нет ничего .</span>
 </h1>
 <h4>&mdash;Конфуций</em></h4>
 </div>
</div>

CSS

/* center the blockquote in the page */
.blockquote-wrapper {
 display: flex;
 height: 100vh;
 padding: 0 20px;
}

/* Blockquote main style */
.blockquote {
 position: relative;
 font-family: 'Barlow Condensed', sans-serif;
 max-width: 620px;
 margin: 80px auto;
 align-self: center;
} 
/* Blockquote header */
.blockquote h1 {
 font-family: 'Abril Fatface', cursive;
 position: relative; /* for pseudos */
 color: #e74848;
 font-size: 2.8rem;
 font-weight: normal;
 line-height: 1;
 margin: 0;
 border: 2px solid #fff;
 border: solid 2px;
 border-radius:20px;
 padding: 25px;
}

/* Blockquote right double quotes */
.blockquote h1:after {
 content:"";
 position: absolute;
 border: 2px solid #e74848;
 border-radius: 0 50px 0 0;
 width: 60px;
 height: 60px;
 bottom: -62px;
 left: 50px;
 border-bottom: none;
 border-left: none;
 z-index: 3; 
}
.blockquote h1:before {
 content:"";
 position: absolute;
 width: 80px;
 border: 6px solid #292a2b;
 bottom: -3px;
 left: 50px;
 z-index: 2;
}

/* increase header size after 600px */
@media all and (min-width: 600px) {
 .blockquote h1 {
 font-size: 3rem;
 line-height: 1.2;
 }
}

/* Blockquote subheader */
.blockquote h4 {
 position: relative;
 color: #ffffff;
 font-size: 1.3rem;
 font-weight: 400;
 line-height: 1.2;
 margin: 0;
 padding-top: 15px;
 z-index: 1;
 margin-left:150px;
 padding-left:12px;
}

.blockquote h4:first-letter {
 margin-left:-12px;
}

4. Ещё вариант выделения цитаты CSS стилями

5. CSS Quotes с анимацией

HTML

<div class="frame">
 <div class="circle"></div>
 <div class="line left"></div>
 <div class="line right"></div>
 <div class="bracket left"></div>
 <div class="bracket right"></div>
 <div class="small top"><span class="first-letter">c</span>ollect</div>
 <div class="big">Moments</div>
 <div class="small bottom">Not <span class="first-letter">T</span>hings</div>
 <div class="hide top"></div>
 <div class="hide bottom"></div>
</div>

CSS

.frame {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 400px;
 height: 400px;
 margin-top: -200px;
 margin-left: -200px;
 border-radius: 2px;
 box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.6);
 overflow: hidden;
 background: #201c29;
 color: #fff;
 font-family: 'Open Sans', Helvetica, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.circle {
 position: absolute;
 z-index: 10;
 height: 20px;
 width: 20px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-image: linear-gradient(45deg, #ff049f, #9a0fe0 45%);
 border-radius: 50%;
 animation: circle 1s ease-in-out;
 animation-fill-mode: forwards;
}

.line {
 position: absolute;
 z-index: 10;
 width: 150px;
 height: 1px;
 top: 198px;
 transform: scaleX(0);
} 
.line.left {
 left: 50px;
 transform-origin: 100% 50%;
 animation: lines 1s ease-in-out 0.8s, line-left 1s steps(1) 0.8s;
 background: $lines-color;
}

.line.right {
 right: 50px;
 background: $lines-color;
 transform-origin: 0% 50%;
 animation: lines 1s ease-in-out 0.8s, line-right 1s steps(1) 0.8s;
}

.bracket {
 position: absolute;
 z-index: 10;
 height: 130px;
 width: 1px;
 top: 137px;
 background: $lines-color;
 animation: bracket .4s ease-out 1.7s;
 animation-fill-mode: both;
} 
.bracket:before, .bracket:after {
 position: absolute;
 display: block;
 content: '';
 width: 25px;
 height: 1px;
} 
.bracket.right:before, .bracket.right:after {
 background: $lines-color;
} 
.bracket.left {
 left: 50px;
} 
.bracket.left:before {
 top: 0;
 left: 0;
 transform-origin: 0% 50%;
 animation: bracket-line .2s ease-out 2.1s;
 animation-fill-mode: both;
} 
.bracket.left:after {
 bottom: 0;
 left: 0;
 transform-origin: 0% 50%;
 animation: bracket-line .2s ease-out 2.1s;
 animation-fill-mode: both;
}

.bracket.left:before, .bracket.left:after {
 background: $lines-color;
}

.bracket.right {
 right: 50px;
}

.bracket.right:before {
 top: 0;
 right: 0;
 transform-origin: 100% 50%;
 animation: bracket-line .2s ease-out 2.1s;
 animation-fill-mode: both;
}

.bracket.right:after {
 bottom: 0;
 right: 0;
 transform-origin: 100% 50%;
 animation: bracket-line .2s ease-out 2.1s;
 animation-fill-mode: both;
}

.big {
 position: absolute;
 z-index: 5;
 top: 173px;
 width: 400px;
 text-align: center;
 font-size: 5rem;
 letter-spacing: 2px;
 color: #fff;
 line-height: 50px;
 font-family: "yesteryear", cursive;
 background-image: linear-gradient(33deg, #9a0fe0 25%, #ff049f);
 -webkit-text-fill-color: transparent;
 background-clip: text;
 transition: 0.2s ease-in;
}

.hide {
 position: absolute;
 z-index: 7;
 width: 400px;
 height: 50px;
 background: #201c29;
 left: 0;
 animation: reveal .4s ease-out 1.7s;
 animation-fill-mode: both;
}


.hide.top {
 bottom: 49%;
 transform-origin: 50% 0%;
}

.hide.bottom {
 top: 49%;
 transform-origin: 50% 100%;
}

.small {
 position: absolute;
 z-index: 10;
 width: 400px;
 text-align: center;
 left: 0;
 font-weight: 300;
 font-size: 1.8rem;
 color: #FFFFFF;
 line-height: 30px;
 word-spacing: .7rem;
 text-transform: uppercase;
}

.first-letter {
 font-family: yesteryear, cursive;
 font-size: 3.5rem;
 background-image: linear-gradient(33deg, #9a0fe0 25%, #ff049f);
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.small.top {
 top: 8rem;
 animation: small-top .5s ease-out 2.2s;
 animation-fill-mode: both;
}
.small.bottom {
 bottom: 8rem;
 animation: small-bottom .5s ease-out 2.2s;
 animation-fill-mode: both;
}

@keyframes circle {
 0% {
 transform: scale(1);
 }
 50% {
 transform: scale(1.1);
 }
 90%, 100% {
 transform: scale(0);
 }
}

@keyframes lines {
 0% {
 transform: scaleX(0);
 }
 50% {
 transform: scaleX(1);
 }
 100% {
 transform: scaleX(0);
 }
}

@keyframes line-left {
 0% {
 transform-origin: 100% 50%;
 }
 50%, 100% {
 transform-origin: 0% 50%;
 }
}

@keyframes line-right {
 0% {
 transform-origin: 0% 50%;
 }
 50%, 100% {
 transform-origin: 100% 50%;
 }
}

@keyframes bracket {
 0% {
 transform: scaleY(0);
 }
 100% {
 transform: scaleY(1);
 }
}

@keyframes bracket-line {
 0% {
 transform: scaleX(0);
 }
 100% {
 transform: scaleX(1);
 }
}

@keyframes reveal {
 0% {
 transform: scaleY(1);
 }
 100% {
 transform: scaleY(0);
 }
}
@keyframes small-top {
 0% {
 transform: translateX(-20px);
 opacity: 0;
 }
 100% {
 transform: translateX(0);
 opacity: 1;
 }
}

@keyframes small-bottom {
 0% {
 transform: translateX(20px);
 opacity: 0;
 }
 100% {
 transform: translateX(0);
 opacity: 1;
 }
}

6. Использование blockquote для цитирования

HTML

<blockquote>Хитрость - образ мыслей очень ограниченных людей и очень отличается от ума, на который по внешности походит. Любое человеческое знание начинается с интуиции, переходит к понятиям и завершается идеями.</blockquote>
<cite>Кант</cite>

CSS

blockquote {
 font-weight: 100;
 font-size: 2rem;
 max-width: 600px;
 line-height: 1.4;
 position: relative;
 margin: 0;
 padding: .5rem;
}

blockquote:before,
blockquote:after {
 position: absolute;
 color: #f1efe6;
 font-size: 8rem;
 width: 4rem;
 height: 4rem;
} 
blockquote:before {
 content: '“';
 left: -5rem;
 top: -2rem;
} 
blockquote:after {
 content: '”';
 right: -5rem;
 bottom: 1rem;
} 
cite {
 line-height: 3;
 text-align: left;
}

7. Coffee Quote - используем blockquote, Flexbox, Rgba, before::

HTML

<blockquote class="blockquote">
<h3><strong>Если это кофе</strong>, принеси мне, пожалуйста, чаю; <strong>но если это чай</strong>, пожалуйста, принеси мне кофе.</h3>
<cite>Абрахам Линкольн</cite></blockquote>

CSS

body {
 height: 100vh;
 overflow: hidden;
 background-image: radial-gradient(
 farthest-corner at 40px 40px,
 rgba(70, 40, 25, 0.7) 0%,
 rgba(70, 40, 25, 1) 100%
 );
 display: flex;
 align-items: center;
}

blockquote {
 color: rgba(250, 200, 130, 0.6);
 font-family: Tahoma, sans-serif;
 font-size: 40px;
 width: 60%;
 margin: 0 auto;
}
blockquote h3 {
 font-size: 4rem;
 font-style: italic;
 margin-bottom: 0;
}

blockquote h3::before,
blockquote h3::after {
 content: "“";
 font-family: Georgia;
 font-size: 8rem;
 margin: -2rem 0 0 -4rem;
 position: absolute;
 opacity: 0.5;
}

blockquote h3::after {
 content: "”";
 margin: -1rem -4rem 0 0;
}

blockquote cite {
 font-size: 1.5rem;
}

8. Blockquote с использованием CSS Blur Filter

Для визуального эффекта вам понадобится скрипт TweenMax.js, который можете подключить к своему проекту через CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

HTML

<blockquote>
 <p>
 <span data-duration="1.1" data-delay=".23" data-blur="6">“Две&nbsp;</span>
 <span data-duration="1.4" data-delay=".43" data-blur="3">вещи&nbsp;</span>
 <span data-duration="1.2" data-delay=".25" data-blur="9">бесконечны:&nbsp;</span>
 <span data-duration="1.2" data-delay=".29" data-blur="3">Вселенная&nbsp;</span>
 <span data-duration="1.4" data-delay=".26" data-blur="5">и&nbsp;</span>
 <span data-duration="1.7" data-delay=".19" data-blur="9">человеческая&nbsp;</span>
 <span data-duration="1.2" data-delay=".11" data-blur="5">глупость;&nbsp;</span>
 <span data-duration="1.9" data-delay=".19" data-blur="2" >и&nbsp;</span>
 <span data-duration="1.2" data-delay=".36" data-blur="9" >я&nbsp;</span>
 <span data-duration="1.8" data-delay=".17" data-blur="3" >не&nbsp;</span>
 <span data-duration="1.2" data-delay=".30" data-blur="10" >уверен&nbsp;</span>
 <span data-duration="1.8" data-delay=".19" data-blur="2" >насчёт&nbsp;</span>
 <span data-duration="1.3" data-delay=".18" data-blur="4" >вселенной.”&nbsp;</span>
 </p>
 <cite>Альберт Эйнштейн</cite>
</blockquote>

CSS

blockquote
 display: block
 margin: 0 auto
 text-align: center
 max-width: 900px
 
p,
cite
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 
p
 font-family: Georgia
 color: white
 font-size: 2.7rem
 font-style: italic
 font-weight: 300 
 padding-bottom: 2rem
 
span
 will-change: opacity
 opacity: 0
 &.animate
 opacity: 1
 -webkit-filter: blur(0) !important
 
cite
 font-family: verdana
 font-size: .9rem
 color: #aaa
 opacity: 0
 
 font-style: normal
 font-weight: 500
 
 &.animate
 opacity: 1

Цитата в красивой рамке

HTML

<div id="ct">
<div class="corner " id="left_top"></div>
<div class="corner" id="left_bottom"></div>
<div class="corner" id="right_top"></div>
<div class="corner" id="right_bottom"></div>
<span>Уайльд, Оскар</span>
<blockquote>
<p><i>&ldquo;Законодательным путем нельзя привести людей к добродетели &mdash; и это уже хорошо.&rdquo; </i></p>
</blockquote>

CSS

#ct{height:150px; width:370px;border:1px solid #f1c40f;margin: 100px auto;text-align:center;position:relative;color:#fff;padding:15px;}
span{
 background:#1D1F20;
 color:#f1c40f;
 padding:0 10px;
 font-size:20px;
 position:relative; 
 top:-28px;
}
.corner{height:30px;
 width:30px;
 border-radius:50%;
 border:1px solid #fff;
 transform:rotate(-45deg); 
 position:absolute;
 background:#1D1F20;
}

 #left_top{
 top:-16px;
 left:-16px;
 border-color:transparent transparent #f1c40f transparent;
}
#right_top{
 top:-16px;
 right:-16px;
 border-color:transparent transparent transparent #f1c40f;
}
#left_bottom{
 bottom:-16px;
 left:-16px;
 border-color:transparent #f1c40f transparent transparent ;
}
#right_bottom{
 bottom:-16px;
 right:-16px;
 border-color:#f1c40f transparent transparent transparent;
}
p {padding-top:13px;font-size:18px}

10. Цитата на Bootstrap