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 tôi 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 từng tự từng filter này.

Black n White (grayscale)

Cách dùng:

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ả:

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:

img{
-webkit-filter:hue-rotate(180deg);
}

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.

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.

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 %

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.

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

invert

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

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.

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.

img{
-webkit-filter: grayscale(0.2) hue-rotate(50deg) sepia(0.4);
}

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

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