[ Bài viết mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]
  • Page 1 of 1
  • 1
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » Hiệu ứng gập giấy với CSS3 (Hiệu ứng gập giấy với CSS3)
Hiệu ứng gập giấy với CSS3
chugatrongchoaiDate: Chủ Nhật, 2013/08/04, 8:05 PM | Message # 1
Tân Binh đạt Huy chương
Nhóm: Sáng lập viên
Bài viết: 220
Huy chương: 9
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;
}


Chữ ký: http://windowsworld.ucoz.com/
http://shareinfo.ucoz.org/
https://www.facebook.com/hdoantrannam
 
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » Hiệu ứng gập giấy với CSS3 (Hiệu ứng gập giấy với CSS3)
  • Page 1 of 1
  • 1
Search:

Chat ()