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;
}