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