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

Вариант 1:

Опасность не в том, что компьютер однажды начнет мыслить, как человек, а в том, что человек однажды начнет мыслить, как компьютер.
Sydney J. Harris

<blockquote class="blockquote-1">
	<p>Текст цитаты</p>
	<cite>Автор цитаты</cite>
</blockquote>

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-1 {
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
	margin: 16px 16px 30px 16px;
	padding: 16px 24px;
	position: relative;
	font-size: 16px;
	background: #efefef;
	color: #000;
	font-style: italic;
}
.blockquote-1::before {
	border: 14px solid transparent;
	border-top: 14px solid #efefef;
	border-bottom: 0;
	height: 0;
	width: 0;
	border-top-width: 25px;
	content: '';
	display: block;
	position: absolute;
	left: 40px;
	bottom: -25px;
	transform-origin: center;
	transform: rotate(90deg) skew(-25deg) translateY(17px);
}
.blockquote-1 cite {
	position: absolute;
	bottom: -24px;
	left: 62px;
	font-size: 13px;
	font-style: normal;
	font-weight: 300;
	color: #000;
}

.blockquote-1 {

box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);

margin: 16px 16px 30px 16px;

padding: 16px 24px;

position: relative;

font-size: 16px;

background: #efefef;

color: #000;

font-style: italic;

}

.blockquote-1::before {

border: 14px solid transparent;

border-top: 14px solid #efefef;

border-bottom: 0;

height: 0;

width: 0;

border-top-width: 25px;

content: '';

display: block;

position: absolute;

left: 40px;

bottom: -25px;

transform-origin: center;

transform: rotate(90deg) skew(-25deg) translateY(17px);

}

.blockquote-1 cite {

position: absolute;

bottom: -24px;

left: 62px;

font-size: 13px;

font-style: normal;

font-weight: 300;

color: #000;

}

Вариант 2:

Вариант очень похож на первый, с небольшим отличием.

Кавычка “ ставится для тега  в цитате.

Контент предшествует дизайну. Дизайн без контента не дизайн, это – художественное оформление.
Jeffrey Zeldman

<blockquote class="blockquote-2">
	<p>Текст цитаты</p>
	<cite>Автор цитаты</cite>
</blockquote>

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-2 {
	margin: 16px 16px 30px 16px;
	padding: 26px 24px;
	font-size: 16px;
	background: #BFE2FF;
	border-left: 5px solid;
    border-color: #337AB7;
}
.blockquote-2::after {
	content: '';
	margin-top: -30px;
	padding-top: 0;
	position: relative;
	bottom: -50px;
	left: 20px;
	border-width: 30px 0 0 30px;
	border-style: solid;
	border-color: #BFE2FF transparent;
	display: block;
	width: 0;
}
.blockquote-2 p::before {
	content: "“";
	font-family: Georgia;
	font-size: 40px;
	line-height: 0;
	display: inline-block;
}
.blockquote-2 cite {
	float: right;
	font-size: 13px;
}
.blockquote-2 cite:before {
	content: '- ';
}

.blockquote-2 {

margin: 16px 16px 30px 16px;

padding: 26px 24px;

font-size: 16px;

background: #BFE2FF;

border-left: 5px solid;

border-color: #337AB7;

}

.blockquote-2::after {

content: '';

margin-top: -30px;

padding-top: 0;

position: relative;

bottom: -50px;

left: 20px;

border-width: 30px 0 0 30px;

border-style: solid;

border-color: #BFE2FF transparent;

display: block;

width: 0;

}

.blockquote-2 p::before {

content: "“";

font-family: Georgia;

font-size: 40px;

line-height: 0;

display: inline-block;

}

.blockquote-2 cite {

float: right;

font-size: 13px;

}

.blockquote-2 cite:before {

content: '- ';

}

Вариант 3:

Работает? Не трогай!
Любой программист

<blockquote class="blockquote-3">
	<p>Текст цитаты</p>
	<cite>Автор цитаты</cite>
</blockquote>

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-3 {
	position: relative;
	text-align: center;
	margin: 16px 16px 34px 16px;
	border: 4px solid #337AB7;
	border-radius: 20px;
    padding: 16px 24px;
    font-size: 18px;
}
.blockquote-3:before,
.blockquote-3:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
}
.blockquote-3:before {
	left: 30px;
	bottom: -32px;
	border: 16px solid;
	border-color: #337AB7 transparent transparent #337AB7;
}
.blockquote-3:after {
	left: 35px;
	bottom: -21px;
	border: 12px solid;
	border-color: #fff transparent transparent #fff;
}
.blockquote-3 cite {
    position: absolute;
    bottom: -28px;
    left: 62px;
    font-size: 15px;
    font-weight: bold;
    color: #337AB7;
}

.blockquote-3 {

position: relative;

text-align: center;

margin: 16px 16px 34px 16px;

border: 4px solid #337AB7;

border-radius: 20px;

padding: 16px 24px;

font-size: 18px;

}

.blockquote-3:before,

.blockquote-3:after {

content: '';

position: absolute;

width: 0;

height: 0;

}

.blockquote-3:before {

left: 30px;

bottom: -32px;

border: 16px solid;

border-color: #337AB7 transparent transparent #337AB7;

}

.blockquote-3:after {

left: 35px;

bottom: -21px;

border: 12px solid;

border-color: #fff transparent transparent #fff;

}

.blockquote-3 cite {

position: absolute;

bottom: -28px;

left: 62px;

font-size: 15px;

font-weight: bold;

color: #337AB7;

}

Вариант 4:

Помните, что обычно есть решение проще и быстрее того, что первым приходит вам в голову.
Donald Knuth

<blockquote class="blockquote-4">
	<p>Текст цитаты</p>
	<cite>Автор цитаты</cite>
</blockquote>

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-4 {
    position: relative;
    font-size: 16px;
    margin: 16px 16px 46px 16px;
    border: 2px solid #337AB7;
    border-radius:20px;
    padding: 25px;
}
.blockquote-4::after {
    content:"";
    position: absolute;
    border: 2px solid #337AB7;
    border-radius: 0 50px 0 0;
    width: 40px;
    height: 40px;
    bottom: -40px;
    left: 50px;
    border-bottom: none;
    border-left: none;
    z-index: 2; 
	box-sizing: border-box;
} 
.blockquote-4::before {
    content:"";
    position: absolute;
    width: 80px;
    border: 6px solid #FFF;
    bottom: -3px;
    left: 50px;
    z-index: 1;
}
.blockquote-4 cite {
    position: absolute;
    bottom: -30px;
    left: 110px;
    font-size: 13px;
    font-weight: bold;
    color: #337AB7;
}

.blockquote-4 {

position: relative;

font-size: 16px;

margin: 16px 16px 46px 16px;

border: 2px solid #337AB7;

border-radius:20px;

padding: 25px;

}

.blockquote-4::after {

content:"";

position: absolute;

border: 2px solid #337AB7;

border-radius: 0 50px 0 0;

width: 40px;

height: 40px;

bottom: -40px;

left: 50px;

border-bottom: none;

border-left: none;

z-index: 2;

box-sizing: border-box;

}

.blockquote-4::before {

content:"";

position: absolute;

width: 80px;

border: 6px solid #FFF;

bottom: -3px;

left: 50px;

z-index: 1;

}

.blockquote-4 cite {

position: absolute;

bottom: -30px;

left: 110px;

font-size: 13px;

font-weight: bold;

color: #337AB7;

}

Вариант 5:

Некоторые проблемы лучше не решать, а избегать.
DTony Hoare

<blockquote class="blockquote-5">
	<p>Текст цитаты</p>
	<cite>Автор цитаты</cite>
</blockquote>

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-5 {
    position: relative;
    padding: 16px 24px;
	margin: 16px 16px 26px 16px;	
    font-size: 16px;
    border-top: 2px solid #337AB7;
    border-bottom: 2px solid #337AB7;
}
.blockquote-5::after {
    font-family: Times, sans-serif;
	font-weight: bold;
    position: absolute;
    content: "”";
    color: #BFE2FF;
    font-size: 160px;
    line-height: 0;
    bottom: -22px;
    right: 30px;
	text-shadow: 2px 0 0 #337AB7, -2px 0 0 #337AB7, 0 2px 0 #337AB7, 0 -2px 0 #337AB7, 1px 1px #337AB7, -1px -1px 0 #337AB7, 1px -1px 0 #337AB7, -1px 1px 0 #337AB7;	
}
.blockquote-5 cite {
    color: #337AB7;
    font-size: 15px;
    padding-top: 20px;
	display: block;
}

.blockquote-5 {

position: relative;

padding: 16px 24px;

margin: 16px 16px 26px 16px;

font-size: 16px;

border-top: 2px solid #337AB7;

border-bottom: 2px solid #337AB7;

}

.blockquote-5::after {

font-family: Times, sans-serif;

font-weight: bold;

position: absolute;

content: "”";

color: #BFE2FF;

font-size: 160px;

line-height: 0;

bottom: -22px;

right: 30px;

text-shadow: 2px 0 0 #337AB7, -2px 0 0 #337AB7, 0 2px 0 #337AB7, 0 -2px 0 #337AB7, 1px 1px #337AB7, -1px -1px 0 #337AB7, 1px -1px 0 #337AB7, -1px 1px 0 #337AB7;

}

.blockquote-5 cite {

color: #337AB7;

font-size: 15px;

padding-top: 20px;

display: block;

}

Вариант 6:

Если Вы сделаете хорошую работу для хороших клиентов, то это приведет к следующей хорошей работе для других хороших клиентов. А если Вы сделаете плохую работу для плохих клиентов, то это, в свою очередь, приведет к другой плохой работе для других плохих клиентов.
Michael Bierut

<blockquote class="blockquote-6">
	<p>Текст цитаты</p>
	<cite>Автор цитаты</cite>
</blockquote>

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-6 {
	border-left: 6px solid #BFE2FF;
	font-size: 16px;
	font-style: italic;
	margin: 16px;
	padding: 16px 24px;
	position: relative;
}
.blockquote-6:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -6px;
	height: 40px;
	background-color: #fff;
	width: 6px;
	margin-top: -1em;
}
.blockquote-6:after {
	content: "”";
	position: absolute;
	top: 50%;
	left: -20px;
	color: #337AB7;
	font-size: 50px;
    font-family: Times, sans-serif;
    font-weight: bold;
	line-height: 30px;	
}
.blockquote-6 cite {
    color: #337AB7;
    font-size: 15px;
    padding-top: 10px;
	display: block;
	text-align: right;
}

.blockquote-6 {

border-left: 6px solid #BFE2FF;

font-size: 16px;

font-style: italic;

margin: 16px;

padding: 16px 24px;

position: relative;

}

.blockquote-6:before {

content: "";

position: absolute;

top: 50%;

left: -6px;

height: 40px;

background-color: #fff;

width: 6px;

margin-top: -1em;

}

.blockquote-6:after {

content: "”";

position: absolute;

top: 50%;

left: -20px;

color: #337AB7;

font-size: 50px;

font-family: Times, sans-serif;

font-weight: bold;

line-height: 30px;

}

.blockquote-6 cite {

color: #337AB7;

font-size: 15px;

padding-top: 10px;

display: block;

text-align: right;

}

Вариант 7:

Очень простой пример с тенью.

Сократ говорил «Познай себя». А я говорю «Познай своих пользователей». И знаете что? Они не думают, так же как и вы.
Joshua Brewer

<blockquote class="blockquote-7">
	<p>Текст цитаты</p>
	<cite>Автор цитаты</cite>
</blockquote>

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-7 {
	border: 2px solid #337AB7;
	font-size: 16px;
	font-style: italic;
	margin: 16px 31px 31px 16px;
	padding: 16px 24px;
	position: relative;
	box-shadow: 15px 15px 0 0 #337AB7;  
}
.blockquote-7 cite {
    color: #337AB7;
    font-size: 15px;
    padding-top: 10px;
    display: block;
    text-align: right;
}

.blockquote-7 {

border: 2px solid #337AB7;

font-size: 16px;

font-style: italic;

margin: 16px 31px 31px 16px;

padding: 16px 24px;

position: relative;

box-shadow: 15px 15px 0 0 #337AB7;

}

.blockquote-7 cite {

color: #337AB7;

font-size: 15px;

padding-top: 10px;

display: block;

text-align: right;

}

Вариант 8:

Я хочу создавать красивые вещи, даже если это никому не нужно, в качестве противостояния некрасивым вещам. Это – мое намерение
Saul Bass

<blockquote class="blockquote-8">
	<p>Текст цитаты</p>
	<cite>Автор цитаты</cite>
</blockquote>

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-8 {
	position: relative;
    padding: 16px 24px;
    margin: 16px 46px;    
    font-size: 16px;
	text-align: center;
}
.blockquote-8:before,
.blockquote-8:after {
	position: absolute;
	color: #BFE2FF;
	font-size: 100px;
    font-family: Times, sans-serif;	
	line-height: 100px;	
}
.blockquote-8:before {
	content: '“';
	left: -30px;
	top: -10px;
}
.blockquote-8:after {
	content: '”';
	right: -30px;
	bottom: -10px;
}
.blockquote-8 cite {
    color: #337AB7;
    font-size: 15px;
    padding-top: 10px;
    display: block;
}

.blockquote-8 {

position: relative;

padding: 16px 24px;

margin: 16px 46px;

font-size: 16px;

text-align: center;

}

.blockquote-8:before,

.blockquote-8:after {

position: absolute;

color: #BFE2FF;

font-size: 100px;

font-family: Times, sans-serif;

line-height: 100px;

}

.blockquote-8:before {

content: '“';

left: -30px;

top: -10px;

}

.blockquote-8:after {

content: '”';

right: -30px;

bottom: -10px;

}

.blockquote-8 cite {

color: #337AB7;

font-size: 15px;

padding-top: 10px;

display: block;

}

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Вариант 5:

Вариант 6:

Вариант 7:

Вариант 8:

Смотрите также:

Анимированные SVG-линии

Мобильный Tab Bar с вкладками

Оформление списков ul li для информационных блоков

Добавить комментарий:

Комментарии: