Bài viết này tôi hướng dẫn các bạn một chút mẹo nhỏ với thuộc tính css-border kết hợp với css3-transition để tạo hiệu ứng gập ảnh.
Demo
Download
Mã HTMLTa có đoạn mã HTML đơn giản gồm thẻ a chứa ảnh:
Code
<a href="#" class="picture">
<img src="img/1.jpg"/>
</a>
Mã CSS
Một chút mã css cho thẻ a.picture
Code
a.picture{
display:block;
font-size:0;
position:relative;
}
Bây giờ ta sử dụng pseduo-class của thẻ a cùng với thuộc tính css-border tạo ra hình
Code
a.picture:before{
content:"";
position:absolute;
width:0;
height:0;
bottom:0;
right:0;
border-width:30px;
border-style:solid;
border-color:#fff;
}
Thay đổi border-color và thêm hiệu ứng box-shadow ta sẽ được hình gấp khúc
Code
a.picture:before{
/*--code trước--*/
border-left-color:transparent;
border-top-color:transparent;
border-right-color:#9bcbd7;
border-bottom-color:#9bcbd7;
box-shadow:-3px -3px 3px rgba(0,0,0,0.1);
}
Chú ý màu của border-right và border-bottom ta để trùng với màu nền của background.
Tiếp theo ta sẽ ẩn nếp gấp này đi với width:0 và sẽ thay đổi width:30px khi hover vào thẻ a, cùng với đó thêm thuộc tính transition luôn cho thẻ a.
Code
a.picture:before{
/*--code trước--*/
border-width:0px;
-moz-transition:border-width 0.2s ease;
-webkit-transition:border-width 0.2s ease;
-o-transition:border-width 0.2s ease;
-ms-transition:border-width 0.2s ease;
transition:border-width 0.2s ease;
}
a.picture:hover:before{
border-width:30px;
}
