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

Цитаты на CSS и Blockquote. 11 примеров использования
Цитаты на 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 с анимацией

collect
Moments
Not Things

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

Не важно, как медленно ты продвигаешься, главное, что ты не останавливаешься.


Брюс Ли

743  ❤

HTML

<div class="container">
<blockquote class="blockquote quote-box">
<p class="quotation-mark">&ldquo;</p>
<p class="quote-text">Не важно, как медленно ты продвигаешься, главное, что ты не останавливаешься.</p>
<hr />
<div class="blog-post-actions">
<p class="blog-post-bottom pull-left">Брюс Ли</p>
<p class="blog-post-bottom pull-right"><span class="badge quote-badge">743</span>&nbsp;&nbsp;❤</p>
</div>
</blockquote>
</div>

CSS

blockquote {
border-left:none
}
.quote-badge {
background-color: #000000;
background-color: rgba(0, 0, 0, 0.2);
}
.quote-box {
overflow: hidden;
margin-top: 50px;
padding-top: -25px;
border-radius: 17px;
background-color: #4ADFCC;
color: white;
width: 325px;
box-shadow: 2px 2px 2px 2px #E0E0E0;
} .quotation-mark {
margin-top: 10px;
font-weight: bold;
font-size:100px;
color: white;
font-family: "Times New Roman", Times, Serif;
}
.quote-text {
font-size: 19px;
margin-top: -50px;
}

11. Стильная Цитата

Чем ниже человек душой, тем выше задирает нос.
Он носом тянется туда, куда душою не дороc.
Омар Хайям

HTML

<div class="quote">
<span class="left">❝</span>
<blockquote>
The deeds you do may be the only sermon some persons will hear today.
</blockquote>
<small>Francis of Assisi</small>
<span class="right">❞</span>
</div>

HTML

.quote{
text-align: center;
font-size: 3.3rem;
margin: auto;
padding: 15px;
border: 2px solid black;
max-width: 70%;
position: relative;
margin-top: 100px;
}
blockquote{
color: white;
text-shadow: -1px 1px #555;
font-style: italic;
position: relative;
z-index: 20;
}
.left{
position: absolute;
top: -50px;
left: -20px;
width: 150px;
text-align: left;
z-index: 10;
font-size: 8rem;
color: #336699;
background-color: #ffcc00;
line-height: 200px;
}
.right{
position: absolute;
bottom: -50px;
right: -20px;
width: 150px;
text-align: right;
z-index: 10;
font-size: 8rem;
color: #336699;
background-color: #ffcc00;
line-height: 200px;
}
small{
font-size: 1.7rem;
color: #336699;
position: relative;
z-index: 20;

&:before{
content: "\2014 \0020";
width: 5px;
}
}

Рекомендуем статью "HTML Справочник всех тегов"

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

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

Фоновая волна на простом CSS
Фоновая волна на простом CSS
Рассмотрим в этой статье, как сделать фоновые волны на сайте, используя только возможности CSS3 и SVG файл. Т.е. без применения Javascript.

Бесплатный ФРОНТЭНД
Бесплатный ФРОНТЭНД
Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS...

Анимация для текста на CSS
Анимация для текста на CSS
В наше время без анимационных эффектов на сайте просто не обойтись. Это и слайдеры и скроллеры, различного рода реагирования элементов дизайна при наведении на них мышкой, это анимация при прокрутке страниц и различные выезжающие, выплывающие, выползающие и т.д. блоки контента. Дизайнеры используют свою фантазию на 100%, чтобы их дсайт выделился из общей массы и запомнился Пользователям...

CSS анимация обводки блоков
CSS анимация обводки блоков
Интересные эффекты для границ блоков контента с анимацией, которые вам могут пригодиться при оформлении страниц сайта.

Свойство clip-path
Свойство clip-path
Свойство clip-path в CSS позволяет указать конкретную область элемента для отображения, а остальная часть скрыта (или “обрезана”)...

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.