Membuat Blockquote Menarik Dengan CSS - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Blockquote Menarik Dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Blockquote Menarik Dengan CSS
link : Membuat Blockquote Menarik Dengan CSS

Membuat Blockquote Menarik Dengan CSS

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, oke sekian dulu yah, bye ^_^

Demikianlah Artikel Membuat Blockquote Menarik Dengan CSS

Sekianlah artikel Membuat Blockquote Menarik Dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Blockquote Menarik Dengan CSS dengan alamat link http://jendeladuniainternet.blogspot.com/2015/12/membuat-blockquote-menarik-dengan-css.html

Tweet