Áp dụng hiệu ứng bộ lọc CSS3 cho các yếu tố đồ họa

Hiệu ứng bộ lọc là một hành động đồ họa mà khi được áp dụng cho một phần tử, chẳng hạn như tệp Đồ họa vectơ có thể mở rộng (SVG) sẽ sửa đổi kết quả cuối cùng trong đó mỗi hiệu ứng bộ lọc được xác định bởi các thành phần bộ lọc được liên kết. Bạn có thể quen thuộc hơn với phần mềm chỉnh sửa ảnh và các hiệu ứng bộ lọc khác nhau mà họ cung cấp, chẳng hạn như làm mờ, bóp méo, làm sắc nét, kéo dài, kết cấu và các hiệu ứng khác. Mỗi bộ lọc có một mục đích thiết yếu để áp dụng hiệu ứng cho một thành phần đồ họa hoặc thành phần chứa với mỗi thành phần bộ lọc có chứa một bộ nguyên thủy bộ lọc như là các phần tử con của nó. Mỗi bộ lọc nguyên thủy đại diện cho một số dạng hoạt động xử lý hình ảnh, điển hình là một hiệu ứng cơ bản duy nhất - ví dụ: làm mờ - có thể có hiệu ứng sai lệch trên một hoặc nhiều đầu vào, tạo ra kết quả đồ họa. Đây là các hiệu ứng bộ lọc ban đầu sử dụng XML để phân tích cú pháp và hiển thị các kết quả các loại.

Điều chỉnh việc sử dụng các bộ lọc SVG và tiến thêm một bước, một nhóm tác giả từ bộ ba tổ chức bao gồm Adobe Systems, Apple Inc. và Opera Software đang phân phối trên phiên bản Dự thảo làm việc của W3C Editor của W3C CSS và Nhóm làm việc SVG 'Hiệu ứng bộ lọc 1.0, là một phần của công việc hiện tại về Tiêu chuẩn W3C cho Thiết kế và Ứng dụng Web. Trong phần này, tôi sẽ xem xét các hiệu ứng bộ lọc CSS3 được xác định trước, hiển thị các ví dụ về từng hiệu ứng, bao gồm các đoạn mã HTML và CSS, cho từng hiệu ứng. Tôi cũng sẽ xem xét hỗ trợ trình duyệt cho các hiệu ứng bộ lọc CSS3. Lưu ý rằng thuộc tính này khác biệt đáng kể và không tương thích với thuộc tính "bộ lọc" cũ hơn của Microsoft.

Theo tóm tắt đặc tả, ở cốt lõi của nó, các hiệu ứng bộ lọc CSS3 là một cách để các nhà phát triển web chỉ định kiểu dáng cho các thành phần trước khi chúng được hiển thị trong tài liệu trang web. Thông thường, một phần tử được hiển thị trong CSS hoặc SVG về mặt lý thuyết có thể được mô tả như thể phần tử và phần tử con của nó được vẽ vào một bộ đệm và sau đó bộ đệm đó được kết hợp vào các phần tử cha; tuy nhiên, các hiệu ứng bộ lọc CSS được áp dụng trước giai đoạn tổng hợp. Các bộ lọc CSS được mô tả thêm theo cách cho phép chúng định kiểu nội dung như các phần tử HTML và SVG bao gồm giá trị CSS. Các hiệu ứng bộ lọc CSS3 có thể được áp dụng cho các thành phần DOM như hình ảnh, văn bản và một số thành phần HTML5 như bài viết, sang một bên, phần, khung vẽ và video.

Mơ hồ

Bộ lọc mờ cho phép bạn đặt bán kính biến dạng và độ mờ theo pixel. Đoạn mã CSS được hiển thị bên dưới:

 / * Hiệu ứng bộ lọc CSS3 Blur * / 
 .mơ hồ { 
 -webkit-filter: Blur (1px); 
 } 

Được gọi từ đoạn mã HTML:

 Hai hình ảnh để so sánh hình ảnh cạnh nhau được hiển thị trong Hình B bên dưới như được chụp từ Google Chrome Phiên bản 22.0.1229.94 m: 

Hình B

Chơi xung quanh với cài đặt pixel ở 15px tạo ra kết quả sau trên hình ảnh bên phải:

Hình C

Bạn cũng có thể sử dụng bộ lọc mờ trên các đoạn văn

đồng thời, như được trình bày bên dưới với các đoạn mã CSS và HTML sau đây và các so sánh đoạn ngắn như được hiển thị trong Hình D như được hiển thị trong Google Chrome Phiên bản 22.0.1229.94 m:

 .mơ hồ { 
 -webkit-filter: Blur (1px); 
 } 

Một đoạn bình thường

Một đoạn có hiệu ứng làm mờ được đặt thành 1px.

Hình dung

độ sáng

Bộ lọc độ sáng cho phép bạn đặt độ rọi và cường độ theo tỷ lệ phần trăm. Ví dụ được trình bày bên dưới với các đoạn mã CSS sau đây và các so sánh hình ảnh cạnh nhau như được hiển thị trong Hình EF như được hiển thị trong Google Chrome Phiên bản 22.0.1229.94 m.

Đặt độ sáng thành hai mươi phần trăm:

 / * Hiệu ứng bộ lọc độ sáng * / 
 .độ sáng { 
 -webkit-filter: độ sáng (20%); 
 } 

Hình E

Đặt độ sáng thành âm hai mươi phần trăm sẽ làm tối phần tử như bên dưới:

 / * Hiệu ứng bộ lọc độ sáng * / 
 .độ sáng { 
 -webkit-filter: độ sáng (-20%); 
 } 

Hình F

Tương phản

Bộ lọc độ tương phản cho phép bạn đặt chênh lệch độ chói và / hoặc màu theo tỷ lệ phần trăm. Ví dụ được trình bày bên dưới với các đoạn mã CSS sau đây và các so sánh hình ảnh cạnh nhau như được hiển thị trong Hình GH như được hiển thị trong Google Chrome Phiên bản 22.0.1229.94 m.

Độ tương phản được đặt thành sáu mươi phần trăm:

/ * Hiệu ứng bộ lọc tương phản * /

 .tương phản { 
 -webkit-filter: độ tương phản (60%); 
 } 

Hình G

Độ tương phản được đặt thành ba mươi phần trăm:

 / * Hiệu ứng bộ lọc tương phản * / 
 .tương phản { 
 -webkit-filter: độ tương phản (30%); 
 } 

Hình H

Thả bóng

Hiệu ứng bộ lọc bóng đổ là một sự khác biệt nhỏ so với hiệu ứng thuộc tính bóng hộp trong đó hiệu ứng bộ lọc bóng đổ có lợi thế là thừa nhận đường viền và độ trong suốt của một phần tử. Bộ lọc bóng đổ có một cú pháp tương tự như thuộc tính bóng hộp với ngoại lệ là chèn bóng đổ và các giá trị độ dài trải rộng chưa được hỗ trợ.

Cú pháp cho hiệu ứng bộ lọc bóng thả CSS3 được viết dưới dạng:

bóng đổ: Xpx Ypx Bpx #abc

Xpx = bù ngang trục x

Ypx = bù dọc trục y

Bpx = hiệu ứng làm mờ

#abc = màu

Các ví dụ sau đây cho thấy các hiệu ứng bộ lọc bóng đổ cho hình ảnh rắn như ví dụ bờ biển được sử dụng trước đây, cũng như hình ảnh png của một bông hoa với nền trong suốt. Ví dụ được trình bày bên dưới với đoạn mã CSS sau đây và các so sánh hình ảnh cạnh nhau như được hiển thị trong Hình IJ như được hiển thị trong Google Chrome Phiên bản 22.0.1229.94 m.

Thả bóng được đặt thành như sau:

 / * Hiệu ứng bộ lọc bóng đổ * / 
 .showshadow { 
 -webkit-filter: drop-Shadow (5px 5px 5px rgba (0, 0, 0, 0.5)); 
 } 

Hình ảnh ven biển với sự so sánh song song:

Hình I

Bông hoa với nền trong suốt được lưu dưới dạng hình ảnh png với so sánh cạnh nhau:

Hình J

Lưu ý bóng thả theo độ trong suốt của hình ảnh hoa.

Bài thứ hai trong loạt bài này về các hiệu ứng bộ lọc CSS3 sẽ xem xét thang độ xám, xoay màu, đảo ngược, độ mờ, bão hòa, nâu đỏ và các hiệu ứng kết hợp, bao gồm trình diễn các kết xuất đen và trắng của các yếu tố. Tôi cũng sẽ xem xét hỗ trợ trình duyệt hiện tại cho các hiệu ứng bộ lọc CSS3, cũng như cung cấp bản tải xuống của các tệp HTML và CSS được sử dụng cho các bản trình diễn.

Bạn có thể nghĩ về bất kỳ triển khai dựa trên web nào ngoài các yếu tố mẫu mà tôi đã trình bày hôm nay có thể sử dụng hợp lý các thành phần bộ lọc CSS3 không?

© Copyright 2020 | mobilegn.com