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

06/05/2020

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:

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:

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:

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