Home » » Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

Dalam hari ini taukahbahwa.blogspot.com akan menyampaikan artikel tentang Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi. Semoga dengan berita Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

CSS Blockquote Auto Expand
Seseorang bertanya tentang bagaimana cara membuat quote tertutup yang bisa membuka saat pointer berada di atasnya. Caranya sangat sederhana, yaitu dengan menggunakan CSS Pseudo Classes dan CSS Transisi:
Salin kode di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:
blockquote.collapsed {
margin:15px 30px;
font:italic normal 14px/1.4 Georgia,Serif;
height:0;
padding:0 0;
background-color:#FFE046;
border:10px solid #FDD404;
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.collapsed:hover {
padding:10px 15px;
background-color:#47AD47;
border:5px solid #156715;
height:350px;
}
Aktivasi bisa dilakukan dengan cara menambahkan kelas collapsed pada elemen <blockquote> yang Anda inginkan:
<blockquote class="collapsed">
Konten di sini...
</blockquote>

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

Sobat baru saja membaca artikel yang berkategori Informasi dengan judul Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi. Jika sobat rasa artikel ini menarik silakan di share dengan meninggalkan URL http://taukahbahwa.blogspot.com/2014/02/membuat-auto-expand-blockquote.html. Terima kasih atas kunjungannya!

0 komentar:

Posting Komentar