Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

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 14px Georgia,Serif;
  height:0px;
  padding:0px 0px;
  background-color:#FFE046;
  border:10px solid #FDD404;
  border-left-color:#D7362E;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
}

blockquote.collapsed:hover {
  padding:10px 15px;
  background-color:#47AD47;
  border:5px solid #156715;
  height:350px;
}

Proses aktivasi bisa dilakukan dengan cara menambahkan class="collapsed" pada elemen <blockquote> yang Anda inginkan:

<blockquote class="collapsed">
    Konten di sini...
</blockquote>

Share on :

Bagikan

share

| | 0 komentar