Hiệu ứng gập giấy với CSS3 16/07/2014

Hiệu ứng gập giấy với CSS3

Bài viết này iTOOL sẽ 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.

Mã HTML
Ta có đoạn mã HTML đơn giản gồm thẻ a chứa ảnh:
    
<a href="#" class="picture">
    <img src="img/1.jpg"/>
</a>

Mã CSS

Một chút mã css cho thẻ a.picture
    
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 sau:
 
Hiệu ứng gập giấy với CSS3
    
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 như ở dưới:
 
Hiệu ứng gập giấy với CSS3
    
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.
    
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;
}

Thật tuyệt vời phải không nào, với CSS3  thì bạn còn làm được nhiều thứ hơn nữa đấy. Xem demo
Facebook chat