Mendesain Blockquote Menarik Dengan CSS

Saat menulis artikel, terkadang kita perlu untuk mengutip teks dari sumber lain atau kata-kata sendiri yang sekiranya penting, untuk mengakomodasi hal tersebut, HTML menyediakan element bernama blockquote <blockquote>, yang digunkan untuk utipan panjang, dan quote <q> untuk kutipan pendek. Biasanya awal kutipan diberi tanda kutip buka (open quote) dan pada bagian akhir diberi tanda kutip tutup (close-quote).

Open-quote dan Close-quote secara default ditampilkan browser dengan bentuk yang berbeda-beda, tergantung jenis browsernya, sehingga terjadi inkonsistensi, untuk mengatasi hal tersebut, open dan close quote diganti dengan gambar atau icon font, saat ini penggunaan icon font lebih populer dibanding gambar karena lebih fleksibel karena dapat diberi style layaknya font pada umumnya. berikut ini menunjukkan perbedaan tampilan default quote:

Contoh Pembuatan Blockquote Dengan CSS

Terdapat banyak sekali contoh pembuatan blockquote, dari contoh tersebut dapat dikelompokkan menjadi tiga jenis yaitu blockquote dengan karakter quote bawaan browser, dengan icon font, dan dengan gambar, kali ini kita akan membuat ketiganya  menggunakan pseudo element ::before dan ::after sebagai container quote nya.  Jika sobat belum familiar dengan kedua element tersebut, sobat dapat membacanya di artikel:  Pseudo Element ::before dan ::after Disertai Contoh.

Contoh 1: Membuat blockquote dengan karakter bawaan browser

HTML:

<blockquote>
	Blockquote are HTML element...
</blockquote>

CSS:

blockquote {
	max-width: 500px;
	margin: 0;
	width: 100%;
	padding: 40px 70px;
	background: #3E7DB3;
    color: #FFFFFF;	
	position: relative;
}
blockquote::before,
blockquote::after {
	font-size: 350%;
	font-family: arial;
	display:block;
	position: absolute;
}
blockquote::before {
	content: open-quote;
	left: 30px;
    line-height: 40px;
}
blockquote::after {
	content: close-quote;
	right: 30px;
    line-height: 30px;
}

Hasil:

Terdapat beberapa cara membuat blockquote dengan CSS, diantaranya menggunakan karakter bawaan browser, dengan icon font, dan gambar. Dari ketiga cara tersebut penggunaan icon font adalah solusi terbaik karena memiliki banyak kelebihan diantaranya terdapat berbagai variasi bentuk font, dan yang terpenting adalah bentuk quote akan sama persis di semua browser.

Contoh 2: Mendesain blockquote dengan CSS icon font

Seperti disampaikan sebelumnya, salah satu solusi terbaik untuk mengatasi perbedaan tampilan karakter quote adalah menggantinya dengan icon, dalam hal ini icon font, diantara kelebihannya adalah fleksibilitas dalam bentuk, warna dan ukuran, sehingga akan cocok dengan  tema website kita. Untuk iconnya, saya menggunakan icomoon, sobat dapat menggunakan icon font favorit sobat seperti font awesome.

Pada contoh diatas, icon blockquote yang berwarna merah dibuat menggunakan icon font.

HTML:

<blockquote class="bubble-blockquote">
	Terdapat beberapa cara...
	<div class="bubble-source">JagoWebDev.com</div>
</blockquote>

CSS:

.bubble-blockquote {
	background: #FFD6D6;
	border: 1px solid #FFAEAE;
    border-radius: 10px;
    color: #131313;
	max-width: 500px;
    width: 100%;
    padding: 40px 30px 30px;
    margin: 0;
    position: relative;
    text-align: justify;
	box-shadow: 5px -5px 8px -1px rgba(199, 199, 199, 0.6);
}

.bubble-blockquote:before {
	font-family: 'icomoon';
    content: "e900";
    color: #FF4242;
    left: 20px;
    line-height: 40px;
    top: -20px;
    text-shadow: 7px 5px 10px rgba(0, 0, 0, 0.26);
}
.bubble-blockquote:after {
	content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #FF6C6C;
    bottom: -20px;
	
}
.bubble-source {
	position: absolute;
	bottom: -50px;
	right: 0;
	text-align: right;
	color: #868686;
	font-style: italic;
    font-size: 95%;
	margin-top: 15px;
}

Contoh lain desain blockquote dengan icon font:

HTML:

<blockquote class="styled-blockquote">
	Terdapat beberapa cara...
	<div class="quote-source">JagoWebDev.com</div>
</blockquote>

CSS:

.styled-blockquote {
	max-width: 500px;
    margin: 0;
    width: 100%;
    padding: 40px 60px 30px 70px;
    background: #FFE66B;
    border-left: 12px solid #EF911C;
    color: #252525;
    position: relative;
    text-align: justify;
}
.styled-blockquote:before {
	font-size: 220%;
	font-family: arial;
	display:block;
	position: absolute;
}
.styled-blockquote:before {
	font-family: 'icomoon';
    content: "e900";
	color: #B1A25B;
    left: 20px;
    line-height: 40px;
    top: 35px;
}
.styled-blockquote:after {
	content: "";
}
.quote-source {
	text-align: right;
	color: #868686;
	font-style: italic;
    font-size: 95%;
	margin-top: 15px;
}

Contoh 3: Membuat blockquote dengan  background gambar

Diantara solusi mengatasi perbedaan tampilan karakter quote adalah menggunakan background gambar, namun dibanding icon font, penggunaan gambar memiliki banyak kekurangan, diantaranya ukuran, bentuk dan warnanya yang sudah fixed, tidak dapat diubah.

HTML:

<blockquote class="img-blockquote">
	Terdapat beberapa cara membuat blockquote dengan CSS...
	<div>JagoWebDev.com</div>
</blockquote>

CSS:

.img-blockquote {
	max-width: 500px;
    margin: 0;
    width: 100%;
    padding: 40px 90px;
    background: #FFFFFF;
    color: #191919;
    position: relative;
    text-align: justify;
}
.img-blockquote::before,
.img-blockquote::after {
	display:block;
	position: absolute;
    top: 50%;
	margin-top: -40px;
}
.img-blockquote::before {
    content: url(bg_open_quote.png);
	left: 20px;
}
.img-blockquote::after {
	content: url(bg_close_quote.png);
    right: 20px;
}
.img-blockquote div {
	text-align: right;
	color: #868686;
	font-style: italic;
    font-size: 95%;
	margin-top: 15px;
}

Contoh Lain

Terdapat banyak contoh desain blockquote di internet, salah satunya yang menarik adalah Modern Block Quote Style

Demikian pembahasan mengenai cara mendesain blockquote dengan css, semoga bermanfaat.