Tạo Blockquote tự động mở rộng đơn giản với CSS
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 saumargin: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;
}
Rê chuột vào khung để xem
<blockquote class="collapsed">
Nội dung cần trích dẫn...
</blockquote>
<blockquote class="collapsed">
Nội dung cần trích dẫn...
</blockquote>
Đăng nhận xét