Cách tạo Corner Ribbons bằng CSS
Corner ribbons thường được dùng rất nhiều cho các trang bán hàng, nó giúp người dùng chú ý đến những sản phẩm hơn. Trước đây, chúng ta thường sử dụng hình ảnh để làm các ribbons, nhưng giờ đây, chúng ta đã có thể dùng CSS để tạo bất kì một Corner ribbons nào. Các bạn có thể xem hình ảnh hoặc demo bên dưới để hiểu rõ hơn về Corner ribbons.
Xem Demo |Download
HTML
Để tạo Corner Ribbons, các bạn sử dụng khung html như sau:
NEWS
CSS
Và đoạn css để tạo ra hình dáng ribbons là :
.wrapper
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
.ribbon-wrapper-green
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
.ribbon-green
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
.ribbon-green:before, .ribbon-green:after
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
.ribbon-green:before
left: 0;
.ribbon-green:after
right: 0;
Rất đơn giản phải không các bạn, mình mong là qua bài viết này, các bạn có thể sử dụng ribbons cho những trang bán hàng của mình. Và hơn nữa là các bạn sẽ có thêm một kinh nghiệm trong việc sử dụng CSS để thiết kế ra những hình dạng mà các bạn mong muốn.
Chuyên Mục: Css
Bài viết được đăng bởi webmaster
Nếu các bạn thấy bài viết hữu ích thì giúp mìnhLike cái nhé !Cùng Danh Mục
- Khâm phục với logo BP được làm từ CSS3 và HTML Ấn tượng với cách tạo hình từ thuộc tính CSS border Tạo Caption Image Cực Cool với CSS3 Tạo hiệu ứng button chuyển màu cực cool bằng CSS3 CSS3 @font-face và phương án dự phòng Từng bước tạo Responsive Form với CSS3 và HTML5 Tạo Tooltips cực kỳ Sexy với chỉ CSS Tạo Accordion với CSS3 Logo Nike đẹp ấn tượng được làm từ CSS3 Cách thay đổi màu mặc định khi bôi đen chữ bằng CSS3
(Nguồn thuthuatweb.net)
0 nhận xét:
Đăng nhận xét