CSS Blockquote Membuka Otomatis

Banyak cara memodifikasi tampilan "blockquote", saya rasa Anda pernah menerapkannya di blog kesayangan Anda, misalnya menambahkan tanda kutip besar. Nah kali ini kita akan belajar memanfaatkan css transisi dan css pseudo classes untuk membuat blockuote yang akan terbuka dengan sendirinya saat di hover, ketika pointer di arahkan ke area elemen blockquote tersebut. Trik ini murni hanya efek hover CSS, jadi lupakan JavaSript atau pun jQuery.

Demo, sorot saja segitiga di bawah ini.

Shahih Bukhari No.6353. Telah menceritakan kepada kami Muhammad bin Yusuf telah menceritakan kepada kami Ibnu Uyainah dari Az Zuhri dari Ubaidullah bin Abdullah bin Utbah dari Abu Hurairah dan Zaid bin Khalid Al Juhani mengatakan, Seorang laki-laki mendatangi Nabi shallallahu 'alaihi wasallam dan berujar; 'Saya bersumpah kepadamu dengan nama Allah, hendaknya engkau memutuskan diantara kami dengan kitabullah.' Lantas lawan sengketanya yang lebih faqih darinya berdiri dan berkata; 'Ia benar, putuskanlah diantara kami dengan kitabullah, dan perkenankan saya ya Rasulullah untuk bicara! ' Nabi menjawab; "Silahkan bicara". Ia meneruskan; 'anak saya menjadi pekerja orang ini, kemudian dia berzina dengan isterinya, maka aku menebusnya dengan seratus ekor kambing dan satu pelayan. Aku kemudian bertanya kepada beberapa orang ahlul ilmu dan mereka memberitahukan kepadaku bahwa anakku didera seratus kali dan diasingkan selama setahun dan wanita ini dirajam.' Lantas Nabi bersabda: "Demi Dzat yang jiwaku berada di tangan-NYA, sungguh aku akan putuskan diantara kalian berdua, seratus ekor kambing dan pelayan dikembalikan kepadamu, kemudian anakmu didera seratus kali dan diasingkan selama setahun, dan engkau hai Unais Al Aslami, temuilah si wanita dan tanyailah, jika ia mengakui maka rajamlah!" Si Wanita akhirnya mengaku dan dia merajamnya.
Kode CSS yang dimaksud adalah sebagai berikut.

blockquote.sorot-buka {
margin:15px 30px;
font:italic normal 14px/1.4 Georgia,Serif;
height:0;
padding:0 0;
background-color:#333;
border:10px solid #ccc;
border-left-color:#D7362E;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4);
overflow:auto;
-webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s;
-moz-transition:all 1s cubic-bezier(1,0,0,1) .5s;
-ms-transition:all 1s cubic-bezier(1,0,0,1) .5s;
-o-transition:all 1s cubic-bezier(1,0,0,1) .5s;
transition:all 1s cubic-bezier(1,0,0,1) .5s;
}

blockquote.sorot-buka:hover {
padding:10px 15px;
background-color:#fff;
border:1px solid #ccc;
border-left:5px solid #800000;
height:350px;
}

Cara menggunakannya di dalam posting, silahkah tambahkan class sorot-buka pada HTML blockquote Anda, seperti berikut ini.

<blockquote class="sorot-buka">
/*Letakkan teks kutipan anda di sini*/
</blockquote>

Silahkan Anda ubah CSSnya dengan gaya yang Anda inginkan, seperti border/garis, tinggi, lebar, warna latar belakang dan lainnya.

Selamat belajar.

Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template