Tạo ribbon bằng css3

Ribbon (cần lời giải thích ) ?
Ribbon theo từ điển là dải băng, ruy băng nôm na là mấy cái kiểu huân chương, phù hiệu hay có mấy món này , Ribbon rất hay có mặt trong thiết kế nước ngoài .Ngày nay, các hiệu ứng băng CSS là một xu hướng thiết kế web, giúp ích nhiều vào việc thêm chút hiệu ứng 3D vào trong thiết kế của bạn.
Vì vậy trong bài viết này chúng ta sẽ tạo ribbon mà không cần bất cứ hình ảnh nào kết hợp một chút HTML.



Tại sao chúng ta cần sử dụng CSS3 ribbon ?
Bạn có thể tạo ribbon bằng các công cụ đồ họa như PTS, illusstrator, tuy nhiên ribbon bằng css có các ưu điểm sau:
-Không có hình ảnh đồng nghĩa với việc sẽ giảm bớt HTTP request lên máy chủ của bạn (tiết kiệm bộ nhớ,băng thông)
-Tính linh hoạt : nếu như với ribbon bằng hình ảnh bạn sẽ khó chỉnh sửa chữ,màu chữ,màu nền của ribbon nếu ko có file thiết kế gốc thì ribbon bằng css có thể dễ dàng làm được điều đó (không tính các ribbon uốn lượn phức tạp nhé)
-Ứng dụng CSS3 cho các trình duyệt hiện đại .
Cấu trúc CSS3 ribbon
Trước tiên ta cần tạo khoảng trống giữa tiêu đề với các thành phần con của nó bằng padding ,và để nó tràn ra hai bên bằng margin ,sau đó thêm các tam giác bằng thuộc tính border và dùng position định vị cho phù hợp

Ví dụ : tạo một thẻ h1 với padding: 20px (top: 20px, right: 20px, bottom: 20px;left: 20px)


Để nó tràn ra hai bên ta cần dùng margin

Code:

h1
{
  margin: 0 -30px; /* top:0, right:-30px, bottom:0, left:-30px */
}

Tiếp đó ta cần tạo tam giác bằng border


Để chèn thêm tam giác vào trước và sau thẻ h1 ta sử dụng pseudo-class (mã giả :before và after),nhớ đặt thành phần mẹ h1 position : relative và thành thành con :after, :before là position: absolute.Code đầy đủ

Code:

h1{
        text-align: center;
        position: relative;
        color: #fff;
        margin: 0 -30px 30px -30px;
        padding: 10px 0;
        text-shadow: 0 1px rgba(0,0,0,.8);
        background: #5c5c5c;
        background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        box-shadow: 0 2px 0 rgba(0,0,0,.3);
    }
 
    h1:before, h1:after
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: transparent;
        bottom: -10px;
    }
 
    h1:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #222;
        left: 0;
    }
 
    h1:after
    {
        border-width: 0 0 10px 10px;
        border-left-color: #222;
        right: 0;
    }

Từ đó ta có thể tự làm thêm một số mẫu ribbbon bằng CSS3 kết hợp thêm gradient và box shadow cho đẹp hơn, nói thì lằng nhằng nhưng view code ra là thấy hết
demo online Download


Chú ý: với Cái trình duyệt như IE6,IE7 không hỗ trợ pseudo-class thì có thể thay thế bằng các thẻ html khác như span.,Hiển thị tốt nhất trên Chrome, FireFox .
Tham khảo Red-team design