Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Tạo ribbon bằng css3

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi thanh_rossi, 9/11/12.

Lượt xem: 4,552

  1. thanh_rossi Thành viên cấp 2

    Ribbon (cần lời giải thích :D) ?
    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.[​IMG]



    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)

    9E4Fv.png
    Để 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 */
    }
    sDido.png
    Tiếp đó ta cần tạo tam giác bằng border
    v3LJl.png

    Để 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

    ...
    HSP, TONE.Rs, Phạm Hữu Dư1 người khác thích bài viết này.
  2. Hổ Báo VietDesigner

    Hổ Báo VietDesigner Huyền Thoại VietDesigner

    - Ồ Zế ! Chào bác thanh_rossi ! :D
    - Cái này quá hay luôn ! Ủng hộ bác Nhiệt tình ! Like ! :like:
    thanh_rossi thích bài viết này
  3. thanh_rossi

    thanh_rossi Thành viên cấp 2

    Cái ribbon vẽ bằng Illustrator chắc đẹp hơn
    Hổ Báo VietDesigner thích bài viết này
  4. TONE.Rs

    TONE.Rs Thành viên cấp 3

    Vào test cái web lân !

Ủng hộ diễn đàn