ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

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_perbedaan_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.

contoh_desain_blockquote

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:

contoh_desain_blockquote_dengan_css_dan_iconfont

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.

contoh_desain_blockquote_dengan_background

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.

Recomended Post

Silakan tinggalkan komentar

*

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  2. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  3. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  4. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  5. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  6. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  7. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  8. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  9. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  10. Menghitung Selisih Waktu Dengan PHP – Cara Termudah