Menjadikan Blockquote Terlihat Menarik Pada Website Dengan CSS

Baca Juga

Membuat Blockquote Menarik Dengan CSS - Membuat blockquote dalam html standar browser tampil dengan tanda kutip besar sebelum objek. Boring banget menurut Juragan apa lagi di IE (walaupun dibeberapa browser lumayan udah bagus juga sih). Dengan alasan ini Juragan pengen share cara bikin blockquote supaya keliatan kece badai, buat apa ?, blockquote biasanya digunakan untuk menyorot suatu text supaya meyerupai text kutipan, biasanya kutipan dari buku, maupun kutipan dari tokoh atau organisasi tertentu.

Membuat blockquote sebenarnya hanya membutuhkan beberapa propety CSS saja sudah jadi ntuh blockquote yang bagus. kode CSS-nya begini.

blockquote{
  font-size: 1.3em;
  width: 640px;
  margin: 20px auto;
  font-family: Open Sans;
  color: #444444;
  padding: 1.2em 30px 1.2em 65px;
  border-left: 8px solid #78C0A8 ;
  line-height: 1.6;
  position: relative;
  background: #EDEDED;
}
blockquote::before{
  font-family: Arial;
  content: open-quote;
  color: #78C0A8;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top:-10px;
}
blockquote::after{
  content: '';
}
blockquote span{
  display: block;
  color: #444555;
  font-style: italic;
  margin-top: 10px;
}

jika sudah, maka harus dipanggil dari kode HTML, contoh penggunaanya seperti ini :

<blockquote>
Belajar membuat atau meng-custom blockquote kece dengan css bersama juragan coding .com
<span>Juragan Coding</span>
</blockquote>

Contoh Blockquote dengan CSS

nah, kode diatas sangat mudah untuk dikustomisasi sesuai style yang kamu inginkan