Modern Block Quote Styles

Mari kita membuat beberapa Style yang menarik dan modern untuk Blockquote. Kita akan menggunakan teknik yang berbeda untuk menciptakan tampilan yang unik.

• Demo
• Download

Hari ini kita akan membuat beberapa style blockquote menggunakan tekstur, lingkaran, dan pseudo-elemen, kita dapat menaruh beberapa style ke kutipan dan testimonial.

Note

Harap dicatat: hasil dari tutorial ini hanya akan bekerja sebagaimana dimaksud dalam browser yang mendukung CSS sifat masing-masing element.

HTML

<div class="mb-wrap mb-style-1">
	<div class="mb-thumb"></div>
	<blockquote cite="http://www.gutenberg.org/ebooks/1257">
		<p>Never fear quarrels, but seek hazardous adventures.</p>
	</blockquote>
	<div class="mb-attribution">
		<p class="mb-author">Alexandre Dumas</p>
		<cite><a href="http://www.gutenberg.org/ebooks/1257">The Three Musketeers</a></cite>
	</div>
</div>

Tag <div class="mb-thumb"> tidak akan tampil dalam semua contoh. Dalam contoh 3 kita benar-benar akan menambahkannya sebagai element child ke div dengan class mb-atribusi.

CSS

@font-face {
	font-family: 'icons';
	src: url("font/icons.eot");
	src: 
		url("font/icons.eot?#iefix") format('embedded-opentype'), 
		url("font/icons.woff") format('woff'), 
		url("font/icons.ttf") format('truetype'), 
		url("font/icons.svg#icons") format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Let's set and reset some common styles */
.mb-wrap {
	width: 300px;
	margin: 20px auto;
	padding: 20px;
	position: relative;	
}

.mb-wrap p{
	margin: 0;
	padding: 0;
}

.mb-wrap blockquote {
	margin: 0;
	padding: 0;
	position: relative;
}

.mb-wrap cite {
	font-style: normal;
}

Kita menambahkan font ikon yang akan kita gunakan dalam beberapa contoh. Kita juga menetapkan beberapa default style untuk pembungkus kutipan dan unsur-unsur dalam. Perhatikan, bahwa ada beberapa default style untuk beberapa elemen, jadi kita ingin me-resetnya.

Contoh 1

Contoh pertama akan memiliki latar belakang Skin and Thumbnail Circle untuk dekorasi.
Jadi, mari kita buat seluruh wrapper blockquote pertama. Kita akan memberikan tekstur latar belakang dan mendefinisikan lebar:

.mb-style-1 {
	background: #363738 url(../images/dark_leather.jpg) repeat top left;	
	margin-top: 100px;
	padding-top: 100px;
	width: 400px;
	color: #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	border-top: 10px solid #fff;
}

Thumbnail rounded akan ditarik dengan menggunakan nilai top negatif. Dengan perbatasan semi-transparan, kita akan menambahkan beberapa css:

.mb-style-1 .mb-thumb {
	display: block;
	width: 180px;
	height: 180px;
	border: 10px solid rgba(255,255,255,0.5);
	border-radius: 50%;
	background: url(../images/Dartagnan-musketeers.jpg) no-repeat center center;
	position: absolute;
	left: 50%;
	top: -90px;
	margin: 0 0 0 -90px;
	box-shadow: 
		inset 1px 1px 4px rgba(0,0,0,0.5),
		0 2px 3px rgba(0,0,0,0.6);
}

Untuk menambahkan tanda kutip, kita akan menggunakan font ikon included before dan pseudo-classes :before. Kita menetapkan warna gelap dengan teks shadow:

.mb-style-1 blockquote:before,
.mb-style-1 blockquote:after {
	font-family: 'icons';
	position: absolute;
	font-size: 70px;
	top: -95px;
	color: #242526;
	text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

.mb-style-1 blockquote:before{
	content: '\275d';
}

.mb-style-1 blockquote:after{
	right: 0px;
	content: '\e800';
}

Style untuk elemen teks sebagai berikut:

.mb-style-1 blockquote p {
	font-family: Cambria, Georgia, serif;
	font-style: italic;
	font-size: 25px;
	border-bottom: 1px solid rgba(0,0,0,0.5);
	box-shadow: 0 1px 0 rgba(255,255,255,0.1);
	padding: 10px 10px 20px 10px;
	text-align: center;
	margin: 0 0 20px 0;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.mb-style-1 .mb-attribution {
	text-align: right;
}

.mb-style-1 .mb-author{
	text-transform: uppercase;
	font-size: 20px;
	font-weight: bold;
	color: #1b1c1d;
	text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

.mb-style-1 cite a{
	color: #f0f0f0;
	font-style: italic;
	font-family: Cambria, Georgia, serif;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.7)
}

.mb-style-1 cite a:hover{
	text-shadow: 2px 2px 3px rgba(0,0,0,0.9)
}

Dan itu adalah salah satu contoh! Mari kita lihat yang berikutnya

Contoh 2

Contoh 2 akan memiliki gaya asimetris mewah dengan elemen bulat pada sisi kiri. Di atas kita ingin memberikan sebuah lingkaran dengan tanda kutip. Jadi mari kita menambahkan beberapa padding pada blockquote untuk mendorong ke bawah:

.mb-style-2 blockquote{
	padding-top: 150px;
}

Circular pseudo-element memiliki CSS berikut:

.mb-style-2 blockquote:after {
	font-family: 'icons';
	background: rgba(235,150,108,0.8);
	width: 130px;
	height: 130px;
	border-radius: 50%;
	content: '\275e'; 
	position: absolute;
	font-size: 70px;
	line-height: 130px;
	text-align: center;
	top: 0px;
	left: 50%;
	margin-left: -65px;
	color: rgba(255,255,255,0.5);
	text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

Kita akan memposisikan di tengah secara horisontal dengan menetapkan kiri untuk 50% dan memberikan margin kiri negatif setengah dari lebarnya.

Sekarang, mari kita tambahkan lingkaran dengan menggunakan pseud-elemen element. Kita memberikan lebar dan tinggi 500px, border-radius 50% dan hanya di kiri:

.mb-style-2 blockquote:before{
	content: '';
	width: 500px;
	height: 500px;
	border-radius: 50%;
	border-left: 5px solid rgba(235,150,108,0.1);
	position: absolute;
	top: 0px;
	left: -50px;
	z-index: -1;
}

Paragraf dari blockquote akan ditetapkan untuk inline karena kami ingin memisahkan baris:

.mb-style-2 blockquote p {
	font-family: Baskerville, Georgia, serif;
	font-size: 28px;
	font-style: italic;
	background: rgba(255,255,255,0.5);
	display: inline;
	color: rgba(235,150,108,0.8);
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
	line-height: 46px;
	box-shadow: 0 -6px 0 rgba(235,150,108,0.2);
}

Dan terakhir, mari kita membuat style untuk elemen tek:

.mb-style-2 .mb-attribution {
	text-align: right;
}

.mb-style-2 .mb-author{
	text-transform: uppercase;
	font-size: 18px;
	padding-top: 10px;
	font-weight: bold;
	color: #d48158;
	text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

.mb-style-2 cite a{
	color: #d7aa94;
	font-style: italic;
}

.mb-style-2 cite a:hover{
	color: #d48158;
}

Contoh 3

Untuk gaya ketiga, kita ingin memperbesar wrapper dan menetapkan bayangan kotak untuk blockquote tersebut:

.mb-style-3 {
	width: 500px;
}

.mb-style-3 blockquote{
	background: #fff;
	padding: 30px;
	border-radius: 5px;
	box-shadow: 
		inset 0 2px 0 rgba(188, 147, 200, 0.7), 
		-5px -4px 25px rgba(0, 0, 0, 0.3);
}

Kita akan menambahkan sebuah panah kecil menunjuk ke bawah menggunakan teknik yang ditawarkan di CSS Arrow Please!

.mb-style-3 blockquote:after, 
.mb-style-3 blockquote:before  {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.mb-style-3 blockquote:after  {
	border-top-color: #ffffff;
	border-width: 10px;
	left: 65%;
	margin-left: -10px;
}

.mb-style-3 blockquote:before {
	border-top-color: rgba(0,0,0,0.01);
	border-width: 11px;
	left: 65%;
	margin-left: -11px;
}

Paragraph ini akan memiliki style berikut ini:

.mb-style-3 blockquote p {
	font-family: 'Alegreya', serif;
	font-size: 24px;
	color: #b4b4b4;
	font-weight: 400;
	line-height: 40px;
	font-style: italic;
	text-indent: 100px;
	position: relative;
}

Sekarang, kita akan menambahkan tanda kutip ke kiri dengan pseudo-element: before:

.mb-style-3 blockquote p:before{
	content: '\201C';
	font-family: serif;
	font-style: normal;
	font-weight: 700;
	position: absolute;
	font-size: 175px;
	top: 0px;
	left: -105px;
	color: rgba(188, 147, 200, 1);
	text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
}

Bagian link dan penulis akan memiliki padding kanan lebih besar karena praktis:

.mb-style-3 .mb-attribution {
	text-align: right;
	padding: 20px 100px 20px 20px;
	position: relative;
}

Tag div pada thumbnail akan menjadi lingkaran kecil dengan gambar penulis sebagai latar belakang

.mb-style-3 .mb-thumb {
	display: block;
	width: 70px;
	height: 70px;
	border: 5px solid #fff;
	border-radius: 50%;
	background: url(../images/bronte.jpg) no-repeat center center;
	position: absolute;
	right: 10px;
	bottom: 5px;
	box-shadow: 
		inset 1px 1px 4px rgba(0,0,0,0.5),
		0 2px 3px rgba(0,0,0,0.6);
}

Dan style teks sebagai berikut:

.mb-style-3 .mb-author{
	font-family: 'Alegreya SC', serif;
	font-weight: 700;
	font-size: 18px;
	color: rgba(188, 147, 200, 1);
	text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}

.mb-style-3 cite a{
	font-family: 'Alegreya', serif;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.mb-style-3 cite a:hover{
	color: rgba(188, 147, 200, 1);
	text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}

Contoh yang lain bisa Anda lihat di Demo dan untuk CSS bisa Anda download.
Sekian tutorial mengenai  Modern Block Quote Styles semoga menambah tampilan yang bagus dan dapat memberikan inspirasi kepada Anda.