Hướng dẫn Tìm hiểu về Webkit Filters trong CSS3

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,694
Tìm hiểu về Webkit Filters trong CSS3

CSS3 là một trong những công cụ tuyệt vời. Cách đây không lâu thì W3C đã phát hành ra bộ Filter Effects 1.0, tác dụng của nó giống gần như một số bộ lọc cơ bản của Photoshop (contract, grayscale, hue, ….) Trong bài này tôi sẽ giới thiệu với các bạn “CSS3 Webkit Filters”.

Yêu cầu:
– Bạn cần biết đôi chút về CSS3 căn bản và cấu trúc HTML5
– Cần phải sử dụng trình duyệt chrome phiên bản mới nhất.
– Phải thay đổi các giá trị của filter để biết được nó hoạt động như thế nào.

Bộ lọc này thường được áp dụng cho hầu hết các thành phần, nhưng thường chủ yếu làm việc với hình ảnh, và có thể là video. Trong bài hướng dẫn này mình sẽ chỉ dùng hình để demo webkit filter.

Danh sách các filter
  • grayscale
  • hue-rotate
  • brightness
  • Blur
  • contrast
  • sepia
  • invert
  • saturate
Chúng ta sẽ đi thứ tự từng filter này.

Black n White (grayscale)
Cách dùng:
Mã:
img{
-webkit-filter:grayscale(0%);
}

Chú thích, giá trị % giao động từ 0% tới 100% hoặc từ 0 – 1.
Tác dụng: filter này sẽ giúp cho hình ảnh của bạn chuyển sang trắng đen.
Kết quả:

8008049419_b5b12a935a_z.jpg

hue-rotate
Filter này tuơng tự như chức năng Hue/Saturation trong photoshop (Ctr+U). Giá trị của filter này tồn tại từ 0 độ đến 360 độ.
Cách dùng:
Mã:
img{
-webkit-filter:hue-rotate(180deg);
}

8008049297_6521ddee74_z.jpg

brightness
Tác dụng của filter này là để tăng giảm độ sáng của đối tượng. Giá trị của filter này sẽ giao động từ 0% đến 100% hoặc từ 0 tới 1.

8008053472_1b6e44d331_z.jpg

Mã:
img{
-webkit-filter: brightness(15%);
}

Blur
Làm mờ ảnh trực tiếp trên trình duyệt, tương tự như chức năng làm mờ của photoshop vậy
Giá trị của filter này, bắt đầu từ 0px ko bị giới hạn. Giá trị càng lớn thì độ làm mờ sẽ càng cao.

8008052848_379e276cd5_z.jpg

Mã:
img{
-webkit-filter: blur(2px);
}

contrast
Tăng độ tương phản của bức ảnh, vùng sáng sẽ sáng hơn, vùng tối sẽ tối hơn. Tạo cho bức ảnh có độ nét rõ rệt. Đó là chức năng tính của filter contrast
Giá trị được tính bằng %

8008065732_3f0201170c_z.jpg

Mã:
img{
-webkit-filter: contrast(200%);
}

sepia
Một hiệu ứng chuyển đổi màu của hình ảnh thành màu nâu đỏ.
Giá trị thay đổi từ 0% đến 100% hoặc từ 0 tới 1.

8008052782_359f62ea96_z.jpg

Mã:
img{
-webkit-filter: sepia(100%);
}

invert
Đảo ngược màu, tương tự như chức năng invert trong PTS vậy.

8008049165_1bc9753e25_z.jpg

Mã:
img{
-webkit-filter: invert(100%);
}

saturate
Đối với filter saturate thì ở giá trị 0% thì nó giống như filter grayscale ở 100% vậy, tuy nhiên filter saturate khi giá trị càng cao thì màu sắc sẽ càng tươi hơn, đặc biệt là màu đỏ và xanh.

8008052966_cd704cd475_z.jpg

Mã:
img{
-webkit-filter:saturate(2) invert(1);
}

Filter combine
Và tất nhiên, chúng ta có thể kết hợp nhiều filter lại với nhau để có được hiệu ứng màu sắc ưng ý nhất.
Mã:
img{
-webkit-filter: grayscale(0.2) hue-rotate(50deg) sepia(0.4);
}

Mã:
img{
-webkit-filter: contrast(1.2) saturate(2);
}

Mã:
img{
-webkit-filter: hue-rotate(150deg) invert(1) saturate(2.2) sepia(0.9);
}

8008053388_7d0f1041c9_z.jpg

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


Nguồn: izwebz.com​
 

Đính kèm

  • css3filter.rar
    4.7 MB · Lượt xem: 5

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile: 0906081284

Zalo: 0988488096

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom