Tạo Blockquote tự động mở rộng đơn giản với CSS

Đây là dạng trích dẫn (Blockquote) tự động mở khi người đọc rê chuột vào khung chứa nội dung trích dẫn sử dụng CSS.tiện ích này giúp tiết kiệm không gian bài viết khi có trích dẫn dài.

Xem demo

DEMO

Tạo tiện ích này ta thêm đoạn code sau vào trước thẻ ]]></b:skin>

blockquote.collapsed {
margin:15px 30px;
font:italic normal 18px/1.4 Times,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:300px;
}

Khi sủ dụng ta dùng mẫu code sau

Rê chuột vào khung để xem
<blockquote class="collapsed">
Nội dung cần trích dẫn...
</blockquote>