RPL4rt

Inspirasi Yg Tinggi Membuatku Menjadi Hidup..

Iklan Murah
Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi.docx

Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

Membuat Auto Expand Blockquote Sederhana dengan 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;
}
Cara menggunakannya tinggal cukup menambahkan code di bawah :
<blockquote class="collapsed">
    Konten di sini...
</blockquote>

selesai :D
untuk Demo bisa Klik DISINI
Anda baru saja membaca artikel yang berkategori Blogger / CSS / Web dengan judul Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi. Anda bisa bookmark halaman ini dengan URL http://rpl4rt.blogspot.com/2013/02/membuat-auto-expand-blockquote.html. Terima kasih!
Ditulis oleh: Ferdhika Yudira - Jumat, 22 Februari 2013

Belum ada komentar untuk "Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi"

Posting Komentar

Harap berkomentar sesuai dengan isi posting & komentar spam tidak akan ditampilkan.

Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus

Copyright © 2017 RPL4rt Powered by Blogger