css keren untuk blockquote tag

Apa itu blockquote tag ?

HTML <blockquote> tag digunakan untuk menunjukkan kutipan panjang (yaitu kutipan yang berlangsung beberapa baris). Ini harus mengandung unsur-unsur blok-tingkat hanya di dalamnya, dan tidak hanya teks biasa.

Nah, dalam tutorial kali ini saya akan membagikan bagaimana cara menjadikan <blockquote> tersebut menjadi keren dengan CSS. Berikut salah satu CSS terbaik untuk memodifikasi tampilan <blockquote> :


blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;

  

  /*Font*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;

  /*Borders - (Optional)*/
  border-left: 15px solid #c76c0c;
  border-right: 2px solid #c76c0c;

  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/

  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;

  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}
blockquote::after{
  /*Reset to make sure*/
  content: "";
}
blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}
blockquote a:hover{
 color: #666;
}
blockquote em{
  font-style: italic;
}

View DEMO.

Ada pun CSS kode lainnya untuk memodifikasi <blockquote> tag, namun lebih rumit. Ini dia Project Codepen.io.

Namun bila anda ingin CSS yang simple untuk <blockquote> ini anda bisa menggunakan CSS ini :

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

DEMO Hasil CSS simple tersebut.

Nah demikian lah "CSS keren untuk <blockquote> tag". Sekian dari saya "Dimas Lanjaka" semoga membantu

Subscribe to receive free email updates:

0 Response to "css keren untuk blockquote tag"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.