Bộ lọc CSS nâng cao. Cách làm mờ nền bằng css

main.de-nhấn mạnh (
bộ lọc: mờ (5px);
}

Như hình ảnh dưới đây xác nhận, đây đã là một bước tiến lớn. Tuy nhiên, hiện tại hiệu ứng làm mờ được áp dụng ngay lập tức, trông không được tự nhiên cho lắm và làm giảm trải nghiệm của người dùng trên trang. Vì các bộ lọc CSS hỗ trợ hoạt ảnh nên chúng ta có thể làm cho độ mờ của trang xuất hiện mượt mà và dần dần:
chủ yếu(
chuyển đổi: bộ lọc .6s;
}
main.de-nhấn mạnh (
bộ lọc: mờ (5px);
}

Việc kết hợp hai hiệu ứng giảm nhấn mạnh (làm tối và làm mờ) thường rất hữu ích.
Một cách để làm điều này là sử dụng bộ lọc độ sáng() và/hoặc độ tương phản():

main.de-nhấn mạnh (
bộ lọc: độ tương phản mờ (3px) (.8)
độ sáng (.8);
}

Bạn có thể thấy kết quả trong hình. Làm mờ bằng cách Bộ lọc CSS có nghĩa là nếu chúng không được hỗ trợ thì sẽ không có giải pháp dự phòng nào được áp dụng. Có lẽ việc làm tối sẽ được thực hiện tốt hơn bằng cách sử dụng một số phương pháp khác cũng có thể phục vụ giải pháp dự phòng(ví dụ: sử dụng thuộc tính box-shadow như chúng ta đã làm trong bí mật trước đó). Điều này cũng sẽ loại bỏ "hiệu ứng tỏa sáng" có thể nhìn thấy xung quanh các cạnh trong bản vẽ.

Xin chào các bạn, hôm nay tôi có một bài học LỚN dành cho các bạn, dài 27 phút. Nhưng trong đó chúng ta sẽ xem xét một thuộc tính rất, rất, rất thú vị cho phép bạn đặt nhiều hiệu ứng đặc biệt khác nhau cho hình ảnh mà không cần đi sâu vào Chương trình Photoshop và các biên tập viên khác.

Lọc là một thuộc tính trong CSS3 có thể sửa đổi hình ảnh của bạn. Áp dụng độ mờ, tăng độ tương phản và độ sáng, thêm bóng, thay đổi màu sắc và nhiều hơn thế nữa.

Tổng cộng, Filter có 10 giá trị cho phép bạn thực hiện “tất cả mọi thứ thú vị” với các thành phần trang web. Bây giờ tôi đề xuất phân tích tất cả 10 ý nghĩa này trong thực tế trong video hướng dẫn bên dưới.

Bộ lọc video CSS 3 – Bộ lọc hình ảnh:

Một ví dụ về trang chúng tôi tạo trong hướng dẫn này:

Bạn có thể tải xuống tệp mẫu bằng cách sử dụng .

Chú ý! Thuộc tính bộ lọc hiện đang được thử nghiệm và chỉ được hỗ trợ Trình duyệt Firefoxđầy đủ. MỘT trình duyệt Chrome và các thuộc tính khác dựa trên công cụ Webkit, thuộc tính này chỉ hoạt động khi thêm tiền tố. Tôi hiển thị các tiền tố ở cuối bài học, vì vậy tôi khuyên bạn nên xem qua nó trước. Firefox mới nhất các phiên bản.

Nếu bạn lười xem video thì có thể xem nhé hướng dẫn chi tiết bên dưới với tất cả các quy tắc lọc.

10 hiệu ứng bộ lọc trong CSS3

Xin lưu ý rằng tất cả các hiệu ứng trong các hình ảnh bên dưới chỉ được triển khai bằng CSS3, vì vậy chúng sẽ không hiển thị trong các trình duyệt cũ hơn!!!

1. Bộ lọc mờ

Nếu chúng ta nói chuyện bằng ngôn ngữ đơn giản, thì đây là hiện tượng làm mờ hình ảnh thông thường. Bộ lọc là lựa chọn tuyệt vời nếu bạn cần làm mềm các cạnh. Làm mờ tạo ra vẻ ngoài của nền không được lấy nét.

Hãy thử áp dụng bộ lọc của chúng tôi cho con cáo bằng cách viết đoạn mã sau:

Ở bên trái, để rõ ràng, tôi đặt một bức ảnh thông thường, nhưng bên phải là một hình ảnh tương tự, chỉ được sửa đổi bằng CSS3.

Bộ lọc có giá trị độ mờ được chỉ định bằng pixel. Hơn nữa, giá trị này càng cao thì hình ảnh càng mờ.

Lọc độ sáng

Bộ lọc này tương tự như việc thay đổi độ sáng của màn hình TV. Trong trường hợp này, màu được điều chỉnh giữa màu đen và màu gốc khi các tham số được thêm vào.

Và đây là con ngựa thử nghiệm của chúng tôi:

Bạn có thể điều chỉnh từ 0% trở lên. Ở mức 0%, hình ảnh sẽ có màu đen, ở mức 100%, nó sẽ là nguyên bản và ở mức 200%, nó sẽ sáng gấp đôi. Cái này rất hiệu ứng tốt, đặc biệt đối với hình ảnh tối.

Bộ lọc độ sáng có thể được chỉ định theo 3 cách:

1. số nguyên
2. số phân số
3. quan tâm

Hơn nữa, về nguyên tắc không có hạn chế. Trong ví dụ, chúng tôi đặt giá trị thành 2 và tăng độ sáng của hình ảnh lên 2 lần hoặc 200%.

3. Bộ lọc tương phản

Bộ lọc này sẽ cho phép bạn tăng độ tương phản của hình ảnh bằng cách điều chỉnh sự khác biệt giữa tông màu sáng và tối của hình ảnh. Ở đây, các giá trị cũng được xác định theo ba cách: số nguyên, phân số và tỷ lệ phần trăm. Vì vậy, 100% là giá trị mặc định. 0% - hình ảnh màu đen. Và bất cứ điều gì nhiều hơn 100% sẽ tạo thêm sự tương phản cho bạn.

Lần này chúng ta sẽ chế nhạo con mèo. Hãy thêm độ tương phản +50% vào nó:

Đây là kết quả:

Như bạn có thể thấy, bây giờ chúng ta thậm chí không cần phải sử dụng Photoshop để tạo độ tương phản và làm mờ. Ở đây, ngay trong CSS, chúng tôi lấy và thay đổi hình ảnh theo mong muốn của chúng tôi.

4. Lọc bão hòa – saturate

Cái này rất hiệu ứng mát mẻ, điều này sẽ làm cho hình ảnh của bạn rực rỡ và bão hòa hơn. Chúng tôi chỉ ra các giá trị theo ba tùy chọn: số nguyên và số phân số, cũng như tỷ lệ phần trăm. Hãy chỉ định giá trị - 200%. Hãy tăng độ bão hòa của hình ảnh lên 2 lần.

Biển đã trở nên dễ chịu hơn rõ rệt:

Hãy nhìn xem hình ảnh trở nên hấp dẫn như thế nào. Tôi nghĩ đó là một hiệu ứng rất tuyệt vời! Chúng ta nên đi??

5. Lọc độ trong suốt - độ mờ

Đặt độ trong suốt. Một số hạn chế nhất định được áp dụng đối với các giá trị của bộ lọc này:

• tỷ lệ phần trăm: từ 0% đến 100

Hãy thử giảm độ trong suốt của hình ảnh sau xuống 50%.

Hãy xem chuyện gì đã xảy ra:

6. Đảo ngược bộ lọc - đảo ngược

Nó cho phép bạn "lật" màu sắc. Ngoài ra còn có những hạn chế về giá trị của bộ lọc này:

• số nguyên và số phân số: từ 0 đến 1
• tỷ lệ phần trăm: từ 0% đến 100

Trong trường hợp của chúng tôi, chúng tôi sẽ thiết lập gia trị lơn nhât - 100 %:

Và chỉ với một cử động nhẹ của bàn tay, một chiếc xe thể thao xinh đẹp sẽ biến thành...

Bộ lọc này đã giúp chúng tôi tạo ra hiệu ứng tiêu cực cho chính hình ảnh.

7. Bộ lọc màu nâu đỏ

Nó sẽ cho phép bạn thay đổi màu sắc bằng cách thêm tông màu nâu đỏ. Nghĩa là, bạn sẽ nhận được một sự bắt chước bức ảnh cũ. Các hạn chế về giá trị bộ lọc cũng giống như hai phần trước.

• số nguyên và số phân số: từ 0 đến 1
• tỷ lệ phần trăm: từ 0% đến 100

Tốt? Chúng ta thử nhé?

Mẹ kiếp-tibidoh! Chỉ cần một cái vẫy tay nhẹ, chúng ta sẽ khiến bức ảnh này già đi vài thập kỷ. Có vẻ như tôi đang phát điên với những ví dụ này.

Trong trường hợp của chúng tôi, chúng tôi đã chỉ định giá trị phân số - 0,5. Nhưng bạn có thể thử nghiệm theo ý muốn!

8. Bộ lọc thang độ xám

Bộ lọc này cho phép chúng ta biến màu sắc thành các sắc thái xám. Ngoài ra còn có những hạn chế về giá trị bộ lọc:

• số nguyên và số phân số: từ 0 đến 1
• tỷ lệ phần trăm: từ 0% đến 100

Do đó, ở mức 100%, toàn bộ hình ảnh sẽ có thang độ xám và ở mức 0%, nó sẽ không thay đổi. 0 bằng 0% và 1,0 bằng 100%.

Hãy đặt giá trị thành 0,7 (hoặc 70%):

Bộ lọc CSS3 chơi trên trình duyệt hiệu ứng hình ảnh, tương tự như bộ lọc Photoshop. Bộ lọc có thể được thêm không chỉ vào hình ảnh mà còn cho bất kỳ phần tử không trống nào.

Bộ bộ lọc không bị giới hạn ở những bộ lọc được cài đặt sẵn trong trình duyệt. Bạn cũng có thể sử dụng bộ lọc SVG bằng cách tải chúng xuống từ liên kết cùng với phần tử svg.

Các bộ lọc ban đầu được tạo như một phần của đặc tả SVG. Nhiệm vụ của họ là áp dụng các hiệu ứng dựa trên lưới pixel cho đồ họa vector. Với sự hỗ trợ SVG trong trình duyệt, giờ đây bạn có thể sử dụng các hiệu ứng này trực tiếp trong trình duyệt.

Trình duyệt xử lý pixel trang theo pixel, áp dụng các hiệu ứng được chỉ định và vẽ kết quả lên trên bản gốc. Do đó, bằng cách sử dụng nhiều bộ lọc, bạn có thể đạt được các hiệu ứng khác nhau; chúng dường như chồng chéo lên nhau. Càng nhiều bộ lọc, trình duyệt càng mất nhiều thời gian để hiển thị trang.

Bạn có thể áp dụng nhiều bộ lọc cùng một lúc. Cách cổ điểnáp dụng các hiệu ứng như vậy - khi di chuột qua một phần tử: di chuột.

Hỗ trợ trình duyệt

I E: không hỗ trợ
Bờ rìa: 13.0 ngoại trừ url()
Firefox: 35.0
Trình duyệt Chrome: 18.0 -webkit-
Cuộc đi săn: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
Safari của iOS: 9.3, 6.1 -webkit-
Trình duyệt Android: 53.0, 4.4 -webkit-
Trình duyệt Chrome dành cho Android: 55.0, 47.0 -webkit-