Thêm bộ lọc SVG bằng CSS

SVG đã xuất hiện từ đầu những năm 2000, nhưng vẫn còn những cách thú vị mà các nhà thiết kế đang tìm cách sử dụng nó. Trong hướng dẫn này, trọng tâm sẽ có trên các bộ lọc được áp dụng thông qua SVG - nhưng thay vì áp dụng chúng vào hình ảnh SVG, chúng tôi sẽ chỉ cho bạn cách chúng có thể được áp dụng cho bất kỳ nội dung trang thông thường nào.

Cách bộ lọc được áp dụng cho SVG thực sự thông qua CSS, bằng cách cho biết đó là ID nào mà bộ lọc có. Sử dụng cùng một ý tưởng đó, ví dụ, bộ lọc có thể được áp dụng cho văn bản thông thường. Phần tốt về điều này là bạn có thể thêm một số hình vẽ tuyệt vời vào văn bản của mình, điều này sẽ chỉ có thể xảy ra trước đó bằng cách áp dụng một số bộ lọc Photoshop và lưu dưới dạng hình ảnh. Sử dụng bộ lọc SVG, văn bản vẫn có thể truy cập và có thể chọn, vì nó vẫn chỉ là một yếu tố văn bản thông thường trên trang của bạn.

Mã ở đây sẽ tạo một bản đồ dịch chuyển đến văn bản cũng chứa bản đồ alpha để làm cho nó xuất hiện hơi nước và phù hợp với chủ đề của trang. Sau đó, một bộ lọc khác sẽ được tạo ra mà làm cho một menu xuất hiện dưới dạng các đốm nước, dính một chút với nhau nhưng blob ngoài khi chúng di chuyển xa hơn. Một lần nữa, điều này giữ với chủ đề của trang cụ thể này và hiển thị hai cách sáng tạo để áp dụng các bộ lọc SVG cho nội dung khác.

Quan tâm tìm hiểu thêm về SVG? Hãy xem bài viết của chúng tôi về Tất cả mọi thứ bạn cần biết về SVG trên web . Ngoài ra, thêm một số mối quan tâm cho các trang web của bạn với một trong những điều tuyệt vời Ví dụ hoạt hình CSS .

• Tải về các tập tin Đối với hướng dẫn này từ filesilo

01. Bắt đầu

Đầu tiên, bạn cần tải xuống các tệp dự án bằng cách sử dụng liên kết trực tiếp ở trên. Khi bạn đã làm điều đó, hãy kéo khởi đầu Thư mục dự án vào IDE mã của bạn và mở index.html. trang. Bạn sẽ thấy có một số nội dung trang đã được viết. Phần tiêu đề cần được tạo và điều này sẽ chứa tiêu đề sẽ bị ảnh hưởng bởi bộ lọc SVG. Thêm mã ở đây, ngay bên trong thân hình nhãn.

 & lt; div class = "bg" & gt;
& lt; div class = "giữa" & gt;
& lt; h2 class = "tiêu đề" & gt; dưới nước
Công viên Phiêu lưu & LT; / H2 & GT;
& lt; div class = "intro_block" & gt; 

02. Đóng tiêu đề

Bây giờ tiêu đề đã kết thúc, với tất cả các văn bản cho nó tại chỗ. Nếu bạn xem trang của mình trong trình duyệt tại thời điểm này, bạn sẽ thấy một hình ảnh nước với một số văn bản trên đó. Tiêu đề, hiện vẫn không được sắp xếp, sẽ được tạo kiểu và có bộ lọc SVG được áp dụng cho nó.

 & lt; H3 Class = "MUNDHEAD" & GT; Trải nghiệm đại dương
& lt; br & gt; như chưa từng có trước & lt; / h3 & gt;
& lt; p class = "giới thiệu" & gt; dưới nước
Công viên phiêu lưu là một kinh nghiệm
không có gì bạn từng có
đã có. Du lịch đến sâu thẳm của
đại dương và đi bộ giữa
Cuộc sống biển! & LT; / P & GT;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. Tạo bộ lọc SVG

Mã SVG có thể được thêm vào bất cứ nơi nào trên trang, nhưng vì nó sẽ không được nhìn thấy, nó có thể là một ý tưởng tốt để đặt nó ở phía dưới, trước khi đóng thẻ cơ thể. Bộ lọc SVG tạo ra tiếng ồn nhiễu loạn. Lưu ý Bộ lọc có ID - đây là thứ cho phép CSS áp dụng điều này cho một yếu tố khác trên trang.

 & lt; svg xmlns = "http://www.w3.org/2000/svg" & gt;
& lt; bộ lọc id = "dịch chuyển" & gt;
& lt; loại foeturbulence = "nhiễu loạn"
BaseFrequency = "0,004" NumocTaves =
"2" Kết quả = "Turbulence" / & GT;
& lt; / bộ lọc & gt;
& lt; / svg & gt; 

04. Ẩn SVG

Chuyển sang page.css. Tệp ngay bây giờ và trên tất cả các mã CSS cho phần còn lại của trang sẽ là nơi CSS mới của chúng ta sẽ đi. Ở đây SVG được đặt để hoàn toàn không hiển thị trên trang. Nhóm hai thẻ được đặt để có kiểu chữ bên phải được áp dụng cho nó.

 SVG {
không trưng bày;
Không thể
h2 {
Kích thước phông chữ: 5,5VW;
Font-Family: 'Vòng đấu giá', serif;
} 

05. Thêm vào tiêu đề

Các chiều cao giữa các dòng được đặt thành 0 bởi vì sau đó, tiêu đề sẽ hoạt hình, vì vậy việc kiểm soát việc mở rộng trên trang này là quan trọng. Nó cũng được cung cấp một số phần đệm để nó nằm với lượng không gian phù hợp xung quanh nó và màu sắc được thay đổi.

 .Headline {
chiều cao dòng: 0;
Hiển thị: Khối nội tuyến;
Đệm: 70px;
Màu sắc: #ccffff; 

06. Kết thúc tiêu đề

Kết thúc lớp học tiêu đề, dòng tiếp theo áp dụng dịch chuyển Id trong svg đến văn bản. Các Dịch3D. đảm bảo rằng văn bản trở thành phần cứng tăng tốc. Thang đo được thay đổi một chút để đảm bảo rằng khi dịch chuyển được áp dụng, nó trông đúng.

 Bộ lọc: URL (#displacementfilter);
Biến đổi: Translate3D (0, 0, 0);
biến đổi: tỷ lệ (1.8) rotatey (-2deg);
} 

07. Làm cho nó thay thế

Nếu bạn kiểm tra bộ lọc ở giai đoạn này, nhiễu loạn thay thế hoàn toàn văn bản. Thật dễ dàng để sửa chữa. Quay trở lại mã bộ lọc trong trang index.html. Điều này có nhiễu loạn và đồ họa nguồn, là văn bản và áp dụng nó như một bộ lọc dịch chuyển. Hãy thử thay đổi tần số cơ bản và số lượng Octaves trong nhiễu loạn.

 & lt; FedisPlacementMap in2 = "Turbulence" in = "
SuriesGraphic "Scale =" 30 "xchannelselector =" r "
Ychannelselector = "g" kết quả = "phân phối" / & gt; 

08. Làm mềm các cạnh

Các cạnh nhìn một chút khắc nghiệt cho một hiệu ứng nước. Điều đó có thể được chữa khỏi bằng một Gaussian Blur. Thêm mã sau bản đồ dịch chuyển. Khi bạn làm mới trang, nó chắc chắn đã làm mờ văn bản nhưng dịch chuyển đã biến mất. Một lần nữa đây là những yếu tố có thể được khắc phục trên đường để tạo hiệu ứng.

 & lt; feaussianblur in = "SourceGraphic"
StdDeviation = "15" kết quả = "blr" / & gt; 

09. composite hai

Thêm dòng composite ở đây dưới Gaussian Blur trước đó. Bạn sẽ thấy rằng điều này kết hợp mờ và dịch chuyển cùng nhau, và cũng tạo ra hiệu ứng mờ theo dòng chảy cho văn bản. Nó đã đi một cách nào đó để làm mềm các cạnh, nhưng không đủ. Sẽ rất tốt nếu mờ ban đầu có thể được thêm vào này.

 & lt; fuckosite in = "blr" in2 = "" Disp "Toán tử =" trong "kết quả =" comp "/ & gt; 

10. Hợp nhất Blur

Một hoạt động hợp nhất cho phép kết quả cuối cùng của hỗn hợp được hợp nhất với hiệu ứng mờ. Điều này bây giờ có vẻ như nó phù hợp với hình nền và dường như phù hợp với các đường ánh sáng đi qua nước. Phần tốt nhất về văn bản là nó vẫn có thể lựa chọn và một phần của trang, không giống như nếu bạn tạo điều này trong Photoshop.

 & lt; femerge kết quả = "cuối cùng" & gt;
& lt; pha xu trong = "blr" / & gt;
& lt; pha xu trong = "comp" / & gt;
& lt; / femerge & gt; 

11. Tạo một hình ảnh động

Quay lại page.css. tập tin và thêm vào các khung hình chính như được hiển thị ở đây. Điều này sẽ chỉ thu nhỏ kích thước phông chữ từ chiều rộng dọc bằng 0 đến chiều rộng dọc 5.5. Khi bắt đầu, điều này sẽ được áp dụng cho tiêu đề, để văn bản có quy mô và vào vị trí trên màn hình. Khi văn bản di chuyển, dịch chuyển cũng sẽ thay đổi theo chiều dài, mang lại một gợn sóng.

 @KeyFrames Scaler {
từ {
Kích thước phông chữ: 0VW;
Không thể
đến {
Kích thước phông chữ: 5,5VW;
Không thể
} 

12. Thay đổi phong cách H2

Các H2. Phong cách đã được thêm vào trước đó trong bước 4. Thay thế mã đó bằng mã mới này, bổ sung hoạt hình CSS trong bốn giây vào tiêu đề. Hoạt hình dừng lại và giữ trên khung hình chính cuối cùng. Lưu cái này và kiểm tra nó trong trình duyệt để xem văn bản gợn vào vị trí.

 H2 {
chiều cao dòng: 0;
Kích thước phông chữ: 0VW;
Tên hoạt hình: Scaler;
Hoạt hình Thời lượng: 4S;
Chế độ hoạt hình-Fill-Mode: Chuyển tiếp;
Font-Family: 'Vòng đấu giá', serif;
} 

13. Thêm điều hướng

Bây giờ hãy tạo một hình ảnh động lấy cảm hứng từ nước phù hợp bằng cách sử dụng bộ lọc SVG khác. Thêm nội dung điều hướng sau vào đầu mã cơ thể, trước khi tiêu đề được bắt đầu trong bước đầu tiên của hướng dẫn. Điều này sẽ tạo ra những điều cơ bản của một menu Hamburger trong một vòng tròn.

& lt; nav class = "menu" & gt;
& lt; nhập loại = "hộp kiểm" href = "#" class =
"Mở menu" Tên = "Menu Mở" id = "Menu-
mở "/ & gt;
& lt; nhãn class = "menu mở-nút"
Đối với = "Menu mở" & GT;
& lt; span class = "hamburger
Hamburger-1 "& GT; & lt; / span & gt;
& lt; span class = "hamburger
Hamburger-2 "& GT; & lt; / span & gt;
& lt; span class = "hamburger
Hamburger-3 "& GT; & lt; / span & gt;
& lt; / nhãn & gt; 

14. Hoàn thành điều hướng

Bây giờ các yếu tố điều hướng còn lại có thể được thêm vào. Điều này cũng sử dụng thư viện biểu tượng mã nguồn mở Font Awesome, đã được thêm vào phần đầu để liên kết từ CDN của thư viện này. Mỗi menu phần tử tròn sẽ có một biểu tượng bên trong của nó.

 & lt; a href = "#" class = "menu-mục" & gt; & lt; i class = "fa
fa-car "& gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "menu-mục" & gt; & lt; tôi
Lớp = "FA FA-ship" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "menu-mục" & gt; & lt; tôi
Class = "FA FA-MAP" & GT; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "menu-mục" & gt; & lt; tôi
lớp = "FA FA-vali" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; / nav & gt; 

15. Thêm bộ lọc mới

Một bộ lọc khác sẽ được thêm vào cho hiệu ứng này. Trong SVG, hãy thêm mã này sau khi thẻ bộ lọc đóng của mã được thêm vào trước đó. Ở đây các hiệu ứng được xây dựng theo cách rất giống với trước đây. Điều này sẽ cho phép menu trông giống như các đốm dính của chất lỏng di chuyển ngoài.

 & lt; bộ lọc id = "bóng tối-blob" & gt;
& lt; feaussianblur in = "sourceGraphic"
kết quả = "Blur" stddeviation = "20" / & gt;
& lt; fecolormatrix in = "Blur" MODE =
"Matrix" giá trị = "1 0 0 0 0 0 1 0 0
0 0 0 0 1 0 0 0 0 0 18 -7 "
kết quả = "blob" / & gt;
& lt; feaussianblur in = "blob"
StdDeviation = "3" Kết quả = "Shadow" / & GT;
& lt; fecolormatrix trong chế độ = "bóng" =
Giá trị "Matrix" = "0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 1 -0,2 "
kết quả = "bóng" / & gt; 

16. Kết thúc bộ lọc

Phần còn lại của bộ lọc được thêm vào đây, hoàn thành hiệu ứng sẽ được đặt trên mỗi vòng tròn của các mục menu. Điều này sẽ khiến các yếu tố có hiệu ứng BLOB lỏng được thêm vào. Lưu trang này và sau đó chuyển sang tệp 'thiết kế.css'.

 & lt; feffset in = "bóng" dx = "0" dy = "2"
kết quả = "bóng" / & gt;
& lt; fuckous in2 = "bóng" trong = "blob"
kết quả = "blob" / & gt;
& lt; fuckous in2 = "blob"
trong = "Kết quả" GuriousGraphic "=" Trộn "/ & GT;
& lt; / bộ lọc & gt; 

17. Áp dụng bộ lọc

Mã CSS hiện có thể được thêm vào khác nhau thiết kế.css. , chỉ để giữ tất cả các điều hướng css với nhau ở cùng một nơi. Một số mã đã được thêm vào, nhưng ở đây bộ lọc được áp dụng cho menu, đó sẽ là một menu cố định để nó có mặt trên màn hình mọi lúc.

 .menu {
Bộ lọc: URL ("# bóng-Blob");
Vị trí: Đã sửa;
PADDING-TOP: 20px;
đệm-trái: 80px;
Chiều rộng: 650px;
Chiều cao: 150px;
Kích thước hộp: Hộp biên giới;
Kích thước phông chữ: 20px;
Text-Căn chỉnh: Trái;
} 

18. Làm cho thực đơn làm việc

Menu được đặt để bật Vô hình khi menu đang mở. Yếu tố di chuột của mỗi mục menu được tạo để có sự thay đổi khi người dùng di chuyển qua việc này. Mỗi đứa trẻ trong menu được chuyển quá trình chuyển đổi 0,4 giây khi các mục menu đang quay trở lại vị trí ban đầu của chúng.

 .menu-open {
không trưng bày;
Không thể
.menu-mục: di chuột {
Bối cảnh: # 47959F;
Màu sắc: # B2F0F8;
Không thể
.menu-mục: thứ n-con (3), .menu-mục: nth-
trẻ em (4), .menu-mục: thứ n-con (5), .menu-
Mục: Nth-con (6) {
Thời lượng chuyển tiếp: 400ms;
} 

19. Thêm một chiếc bánh hamburger

Biểu tượng Burger được nâng lên trên các yếu tố khác bằng cách thay đổi nó Z-Index. . Menu phát triển khi người dùng di chuyển qua điều này và nhấp vào menu bây giờ sẽ nhận được burger để hoạt hình từ ba dòng burger thành 'x', cho biết tùy chọn xóa menu.

 .menu-Nút mở {
Z-Index: 2;
Chức năng chuyển tiếp-Thời gian: Khối-
bezier (0.175, 0.885, 0,32, 1.275);
Thời lượng chuyển tiếp: 400ms;
Transform: Scale (1.1, 1.1) Translate3D
(0, 0, 0);
Con trỏ: Con trỏ;
Không thể
.menu-Nút mở: Hover {
Transform: Scale (1.2, 1.2) Translate3D
(0, 0, 0);
Không thể

20. Di chuyển các yếu tố

Mục menu đầu tiên thực sự là con thứ ba của menu, vì có một hộp kiểm và bánh xe hamburger trước đó. Thêm điều này cho phép phần tử menu đầu tiên di chuyển vào vị trí sau khi menu được nhấp bởi người dùng. Mỗi yếu tố menu sẽ di chuyển ra với một chút thời gian dài hơn một chút.

.menu-open: Đã kiểm tra + .menu-Nút mở {
Chức năng chuyển tiếp-Thời gian: tuyến tính;
Thời lượng chuyển tiếp: 400ms;
Transform: Quy mô (0,8, 0,8) Translate3D
(0, 0, 0);
Không thể
.menu-open: Đã kiểm tra ~ .menu-mục {
Chức năng chuyển tiếp-Thời gian: Khối-
bezier (0.165, 0,84, 0,44, 1);
Không thể
.menu-open: Đã kiểm tra ~ .menu-mục: thứ n-con (3) {
Thời lượng chuyển tiếp: 390ms;
Biến đổi: Translate3D (110px, 0, 0);
} 

21. Địa chỉ các phong trào còn lại

Các yếu tố menu còn lại được chuyển ra với tốc độ khác nhau. Điều này cho phép các yếu tố dính vào nhau trong giai đoạn đầu của hoạt hình, điều này sẽ cung cấp cho vẻ ngoài của chất lỏng blobby, sử dụng bộ lọc SVG. Lưu các tài liệu và xem kết quả đã hoàn thành trong trình duyệt của bạn.

 .menu-open: Đã kiểm tra ~ .menu-mục: thứ n-con (4) {
Thời lượng chuyển tiếp: 490ms;
Chuyển đổi: Translate3D (220px, 0, 0);
Không thể
.menu-open: Đã kiểm tra ~ .menu-mục: thứ n-con (5) {
Thời lượng chuyển tiếp: 590ms;
Biến đổi: Translate3D (330px, 0, 0);
Không thể
.menu-open: Đã kiểm tra ~ .menu-item: nth-con (6) {
Chuyển tiếp thời lượng: 690ms;
Biến đổi: Translate3D (440px, 0, 0);
} 

Bài viết này ban đầu được xuất bản trong Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . MUA VẤN ĐỀ 283 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

• Animate svg với javascript
• Hướng dẫn đầy đủ về SVG
• Hoạt hình SVG SVG với GSAP