Cách tạo Corner Ribbons bằng CSS


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.


how-to-add-a-corner-ribbon-using-css


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.


Tags: Corner Ribbons css3

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 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 Ấ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 Caption Image Cực Cool với CSS3 Tạo hiệu ứng button chuyển màu cực cool bằng 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 CSS3 @font-face và phương án dự phòng Từng bước tạo Responsive Form với CSS3 và HTML5 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 Tooltips cực kỳ Sexy với chỉ CSS Tạo Accordion với CSS3 Tạo Accordion với CSS3 Logo Nike đẹp ấn tượng được làm từ 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 Cách thay đổi màu mặc định khi bôi đen chữ bằng CSS3



    (Nguồn thuthuatweb.net)



Share on Google Plus
    Blogger Comment
    Facebook Comment

0 nhận xét:

Đăng nhận xét