apkm-search

Hướng dẫn sử dụng CSS3 Blending Mode

Bài viết này hi vọng sẽ giúp ích được cho những ai đang tìm hiểu về CSS3,

    Nếu bạn đã từng dùng qua những trình chỉnh sửa hình ảnh như Photoshop hay Pixelmator thì chắc hẳn bạn sẽ nghe đến tính năng Blending Modes. Blending Mode là tập hợp các chế độ giúp pha trộn đối tượng này với các đối tượng khác, để tạo ra sự tương phản. Nếu bạn làm thành thục kỹ năng dùng Blending Mode thì có thể làm ra một bức hình như sau :

    blend-mode-example

    Blending Mode là một tính năng chỉ có thể tìm trong những trình chỉnh sửa hình ảnh Bây giờ thì bạn có thể thực hiện với CSS 3. Bây giờ chúng ta sẽ bắt đầu tìm hiểu xem blend màu bằng CSS 3.

    Chuẩn bị

    Để có thể nhìn thấy được hiệu ứng này trên Chrome thì bạn cần thực hiện vài bước dưới đây:

    Truy cập vào chrome://flags và bật tính năng Web Platform Features lên.

    web-platform-feature-enabled

    Background and Mix Blend Mode

    Hai thuộc tính mới được giới thiệu trong CSS3 mà chúng ta sẽ tìm hiểu trong bài viết này là mix-blend-modebackground-blend-mode.

    Mix-blend-mode : Định nghĩa cách mà đối tượng sẽ pha trộn với những đối tượng phía dưới như thế nào.

    Background-blend-mode : Đường dẩn màu nền , hình nền, và  background gradients.

    Giống như Photoshop, Blending Modes trong CSS cũng có những thuộc tính như normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

    Chế độ Blending Modes trong Photoshop
    Chế độ Blending Modes trong Photoshop

    Sử dụng CSS3 Blend Mode

    Ở bài viết này mình sẽ dùng logo của Google để demo tính năng này, vì nó có nhiều màu sắc. Mình sẽ trộn màu lại với nhau để cho các bạn dễ thấy được sự khác nhau.

    Đầu tiên chúng ta tạo ra một đoạn HTML chứa các ký tự của từ Google như sau:

    Chúng ta sẽ dùng selector

      của CSS để tránh phải đặt tên từng class cho từng chữ cái. Chúng ta sẽ thêm màu vào cho từng chữ cái với giống như logo của Google bằng CSS như sau:

     

    Ở đây các bạn chú ý đến dòng letter-spacing: -25px; nó có tác dụng điều chỉnh khoảng cách giữa hai ký tự trong một từ.Sau khi thêm css vào chúng ta sẽ được một logo như hình bên dưới:

    lam-google-logo-bang-css

    Bây giờ chúng ta sẽ áp blend mode vào:

    Bạn sẽ thấy màu sắc giữa những phần giao nhau của các ý tự đã thay đổi. Vàng với xanh dương thành màu xanh lá cây.

    google-logo-blended

    Xem lại tất cả mã nguồn của bài viết:

    Bài viết trên là một ví dụ đơn giản cho việc sử dụng CSS3 Blending Mode trong thiết kế Website. Hi vọng qua bài viết này sẽ giúp được các bạn trong quá trình học CSS cũng như tìm hiểu về CSS3.Mình cũng xin giới thiệu với các bạn link rất hữu ích về Blending Mode CSS3 với ví dụ trực quan và so sánh giữa việc dùng CSS3 và hình ảnh để làm hình nền mà bạn nên tham khảo.

    Ví dụ và so sánh Blanding Mode CSS3 :http://bennettfeely.com/gradients/

    Tài liệu về Blend Mode CSS3 : http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode

    Chúc các bạn thành công !

     

    BÌNH LUẬN BÀI VIẾT

    Leave a Reply

    Be the First to Comment!

    Notify of
    avatar
    wpDiscuz