Tambahkan filter SVG dengan CSS

SVG telah ada sejak awal 2000-an, namun masih ada cara menarik yang menurut desainer untuk menggunakannya. Dalam tutorial ini, fokus akan pada filter yang diterapkan melalui SVG - tetapi alih-alih menerapkannya pada gambar SVG, kami akan menunjukkan kepada Anda bagaimana mereka dapat diterapkan pada konten halaman reguler.

Cara filter diterapkan pada SVG sebenarnya melalui CSS, dengan memberitahukan apa yang dimiliki filter. Dengan menggunakan ide yang sama, filter dapat diterapkan pada teks biasa, misalnya. Bagian yang baik tentang ini adalah Anda dapat menambahkan beberapa tampilan grafis yang hebat ke teks Anda, yang hanya akan dimungkinkan dengan menerapkan sejumlah filter photoshop dan menyimpan sebagai gambar. Menggunakan filter SVG, teks tetap dapat diakses dan dapat dipilih, karena masih hanya elemen teks biasa pada halaman Anda.

Kode di sini akan membuat peta perpindahan ke teks yang juga berisi peta alpha untuk membuatnya tampak berair dan sesuai dengan tema halaman. Kemudian filter lain akan dibuat yang membuat menu muncul sebagai gumpalan air, yang sedikit bersama tetapi menggumpal saat mereka bergerak lebih jauh. Sekali lagi ini terus dengan tema halaman khusus ini dan menunjukkan dua cara kreatif untuk menerapkan filter SVG ke konten lain.

Tertarik belajar lebih banyak tentang SVG? Lihatlah artikel kami di semua yang perlu Anda ketahui tentang SVG di web . Atau, tambahkan minat ke situs Anda dengan salah satu dari ini keren CSS Animasi Contoh. .

• Unduh file Untuk tutorial ini dari filesilo

01. Mulai

Pertama, Anda perlu mengunduh file proyek menggunakan tautan tepat di atas. Setelah Anda selesai melakukannya, seret Mulailah folder proyek ke IDE kode Anda dan buka index.html halaman. Anda akan melihat ada beberapa konten halaman yang sudah ditulis. Bagian header perlu dibuat, dan ini akan berisi headline yang akan dipengaruhi oleh filter SVG. Tambahkan kode di sini, tepat di dalam tubuh menandai.

 & lt; div class = "bg" & gt;
& lt; kelas div = "tengah" & gt;
& lt; h2 class = "headline" & gt; bawah air
Adventure Park & ​​Lt; / H2 & GT;
& lt; div class = "intro_block" & gt; 

02. Tutup header

Sekarang header selesai, dengan semua teks untuk itu di tempatnya. Jika Anda melihat halaman Anda di browser saat ini, Anda akan melihat gambar air dengan beberapa teks di atasnya. Judul, yang saat ini masih tidak terhapus, akan ditata dan memiliki filter SVG yang diterapkan padanya.

 & lt; h3 class = "subhead" & gt; mengalami lautan
& lt; br & gt; tidak pernah sebelumnya & lt; / h3 & gt;
& lt; p class = "intro" & gt; bawah air
Adventure Park adalah pengalaman
Unlike apa pun yang pernah Anda miliki
punya. Bepergian ke kedalaman
lautan dan berjalan di antara
Kehidupan laut! & Lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. Buat filter SVG

Kode SVG dapat ditambahkan di mana saja pada halaman, tetapi karena itu tidak akan terlihat, itu bisa menjadi ide yang baik untuk menempatkannya di bagian bawah, sebelum tag tubuh penutupan. Filter SVG menciptakan kebisingan turbulensi. Perhatikan filter memiliki ID - inilah yang memungkinkan CSS untuk menerapkan ini ke elemen lain pada halaman.

 & lt; svg xmlns = "http://www.w3.org/2000/svg" & gt;
& lt; filter id = "perpindahanFilter" & gt;
& lt; feturbulence type = "turbulensi"
BaseFrequency = "0,004" numoctaves =
"2" hasil = "turbulensi" / & gt;
& lt; / filter & gt;
& lt; / svg & gt; 

04. Sembunyikan SVG

Pindah ke halaman.css. File sekarang, dan di atas semua kode CSS untuk sisa halaman akan berada di tempat CSS baru kami akan pergi. Di sini SVG diatur untuk tidak ditampilkan pada halaman sama sekali. Tajuk dua tag diatur agar tipe huruf yang tepat diterapkan padanya.

 svg {
Tampilan: Tidak ada;
}
h2 {
Ukuran font: 5.5VW;
Font-Family: 'Crete Round', Serif;
} 

05. Tambahkan ke judul

Itu tinggi garis diatur ke nol karena nanti headline akan dianimasikan, sehingga memiliki kontrol atas penskalaannya pada halaman itu penting. Ini juga diberikan beberapa padding sehingga ia duduk dengan jumlah ruang yang tepat di sekitarnya dan warnanya berubah.

 .Headline {
Tinggi garis: 0;
Tampilan: blok inline;
Padding: 70px;
Warna: #ccffff; 

06. Selesaikan judul

Dalam menyelesaikan kelas judul, baris berikutnya berlaku perpindahanfilter. ID di SVG ke teks. Itu Translate3D. memastikan bahwa teks menjadi perangkat keras dipercepat. Skala diubah sedikit untuk memastikan bahwa ketika perpindahan diterapkan, terlihat benar.

 Filter: URL (#displacementfilter);
Transformasi: Translate3D (0, 0, 0);
Transformasi: Scaley (1.8) Rotatey (-2deg);
} 

07. Buat itu menggantikan

Jika Anda menguji filter pada tahap ini turbulensi sepenuhnya menggantikan teks. Mudah diperbaiki. Kembali ke kode filter di halaman index.html. Ini mengambil turbulensi dan grafis sumber, yang merupakan teks, dan menerapkannya sebagai filter perpindahan. Coba ubah frekuensi dasar dan jumlah oktaf dalam turbulensi.

 & lt; fedisplacementmap in2 = "turbulensi" di = "
SumberGraphic "Scale =" 30 "XChannelselector =" R "
Ychannelselector = "g" Hasil = "Disp" / & gt; 

08. Lembutkan ujung-ujungnya

Tepi terlihat sedikit keras untuk efek berair. Yang dapat disembuhkan dengan Blur Gaussian. Tambahkan kode setelah peta perpindahan. Ketika Anda menyegarkan halaman, itu pasti mengaburkan teks tetapi perpindahannya hilang. Sekali lagi ini adalah elemen yang dapat ditetapkan dalam cara menciptakan efek.

 & lt; fegaussiablur di = "SUMBERGRAPHIC"
stddeviation = "15" hasil = "BLR" / & gt; 

09. Komposit keduanya

Tambahkan garis komposit di sini di bawah Blur Gaussian sebelumnya. Anda akan melihat bahwa ini menggabungkan blur dan perpindahan bersama-sama, dan juga menciptakan efek tembus air yang berair pada teks. Itu telah pergi beberapa cara untuk melembutkan tepi, tetapi tidak cukup. Akan lebih baik jika blur asli dapat ditambahkan ke dalamnya.

 & lt; fecomposite in = "blr" in2 = "Disp" operator = "dalam" hasil = "comp" / & gt; 

10. Gabungkan Blur

Operasi gabungan memungkinkan hasil akhir komposit yang akan digabungkan dengan efek blur. Ini sekarang terlihat cocok dengan gambar latar belakang dan tampaknya pas dengan garis cahaya yang datang melalui air. Bagian terbaik tentang teks ini masih dapat dipilih dan bagian dari halaman, tidak seperti jika Anda membuat ini di Photoshop.

 & lt; femerge result = "final" & gt;
& lt; femergenode di = "blr" / & gt;
& lt; femergenode di = "comp" / & gt;
& lt; / femerge & gt; 

11. Buat animasi

Kembali ke halaman.css. File dan tambahkan keyframe seperti yang ditunjukkan di sini. Ini hanya akan meningkatkan ukuran font dari lebar vertikal nol ke lebar vertikal 5.5. Pada awal ini akan diterapkan pada tajuk utama, sehingga teks timbangan dan ke tempat di layar. Saat teks bergerak, perpindahan juga akan berubah dari panjang, memberikan riak berair.

 @keyframes scaler {
dari {
Ukuran font: 0VW;
}
untuk {
Ukuran font: 5.5VW;
}
} 

12. Ubah gaya H2

Itu H2. Gaya sebelumnya ditambahkan pada langkah 4. Ganti kode itu dengan kode baru ini, yang menambahkan animasi CSS selama empat detik ke pos. Animasi berhenti dan tahan pada keyframe terakhir. Simpan ini dan uji di browser untuk melihat teks berdesir di tempatnya.

 H2 {
Tinggi garis: 0;
Ukuran font: 0VW;
Animasi-nama: scaler;
Animasi-Durasi: 4S;
animasi-isian-mode: maju;
Font-Family: 'Crete Round', Serif;
} 

13. Tambahkan navigasi

Sekarang mari kita buat animasi yang diilhami air yang cocok menggunakan filter SVG lain. Tambahkan konten navigasi berikut ke bagian paling atas kode tubuh, sebelum pos yang dimulai pada langkah pertama tutorial. Ini akan membuat dasar-dasar menu hamburger dalam lingkaran.

& lt; nav class = "menu" & gt;
& lt; input type = "centang kotak" href = "#" kelas =
"Menu-Open" nama = "menu-terbuka" id = "menu-
buka "/ & gt;
& lt; label class = "tombol-terbuka-tombol"
untuk = "Menu-Open" & 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; / label & gt; 

14. Selesaikan navigasi

Sekarang elemen navigasi yang tersisa dapat ditambahkan. Ini juga menggunakan Font Open Source Icon Library, yang telah ditambahkan ke bagian kepala untuk menautkan dari CDN perpustakaan ini. Setiap elemen melingkar menu akan memiliki ikon di dalamnya.

 & lt; a href = "#" class = "item-item" & gt; & lt; i class = "fa
fa-car "& gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "item menu" & gt; & lt; i
Kelas = "FA-Kapal" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "item menu" & gt; & lt; i
Kelas = "Fa-Map" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "item menu" & gt; & lt; i
Kelas = "fa-koper" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; / nav & gt; 

15. Tambahkan filter baru

Filter lain akan ditambahkan untuk efek ini. Di SVG, tambahkan kode ini setelah tag filter penutup kode ditambahkan sebelumnya. Di sini efeknya dibangun dengan cara yang sangat mirip dengan sebelumnya. Ini akan memungkinkan untuk menu terlihat seperti gumpalan lengket cairan bergerak terpisah.

 & lt; filter id = "Shadowed-Blob" & gt;
& lt; feggaussiblur di = "SUMBERGRAPHIC"
Hasil = "Blur" stddeviation = "20" / & gt;
& lt; fecolormatrix in = "blur" mode =
"Matrix" Nilai = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7 "
Hasil = "Gumpalan" / & gt;
& lt; feggaussiblur di = "gumpalan"
stddeviation = "3" Hasil = "Bayangan" / & gt;
& lt; fecolormatrix in = "shadow" mode =
"Matrix" Nilai = "0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 -0.2 "
Hasil = "Bayangan" / & gt; 

16. Selesaikan filter

Sisa filter ditambahkan di sini, yang melengkapi efek yang akan ditempatkan pada setiap lingkaran item menu. Ini akan menyebabkan elemen memiliki efek gumpalan cair ditambahkan. Simpan halaman ini dan kemudian beralih ke file 'Design.css'.

 & lt; feoffset di = "shadow" dx = "0" dy = "2"
Hasil = "Bayangan" / & gt;
& lt; fecomposit in2 = "shadow" in = "blob"
Hasil = "Gumpalan" / & gt;
& lt; fecomposit in2 = "gumpalan"
di = "SUMBERGRAPHIC" Hasil = "MIX" / & GT;
& lt; / filter & gt; 

17. Terapkan filter

Kode CSS sekarang dapat ditambahkan ke yang berbeda desain.css.css , hanya untuk menjaga semua navigasi CSS bersama di tempat yang sama. Beberapa kode telah ditambahkan, tetapi di sini filter diterapkan pada menu, yang akan menjadi menu tetap sehingga ada di layar setiap saat.

 .menu {
Filter: URL ("# Shadowed-Blob");
Posisi: Tetap;
Padding-TOP: 20px;
Padding-Left: 80px;
Lebar: 650px;
Tinggi: 150px;
Ukuran kotak: border-box;
Ukuran font: 20px;
Teks-align: kiri;
} 

18. Buat menu berfungsi

Menu diatur untuk berubah tidak terlihat ketika menu terbuka. Elemen hover dari masing-masing item menu dibuat sehingga ada perubahan ketika pengguna melayang di atas ini. Setiap anak menu diberikan transisi 0,4 detik ketika item menu kembali ke posisi semula.

 .menu-buka {
Tampilan: Tidak ada;
}
.menu-item: hover {
Latar Belakang: # 47959F;
Warna: # B2F0F8;
}
.menu-item: Nth-child (3), .menu-item: nth-
anak (4), .menu-item: Nth-child (5), .menu-
Item: Nth-child (6) {
Durasi transisi: 400 ms;
} 

19. Tambahkan hamburger

Ikon burger meningkat di atas elemen lain dengan mengubahnya z-index. . Menu tumbuh ketika pengguna melayang di atas ini, dan mengklik menu sekarang akan membuat burger menghidupkan dari tiga baris burger ke 'X', menunjukkan opsi untuk menghapus menu.

 .menu-open-button {
Z-index: 2;
Fungsi transisi-waktu: kubik-
Bezier (0,175, 0,885, 0,32, 1.275);
Durasi transisi: 400 ms;
Transformasi: Skala (1.1, 1.1) Translate3D
(0, 0, 0);
kursor: pointer;
}
tombol .menu-open-tombol: hover {
Transformasi: Skala (1.2, 1.2) Translate3D
(0, 0, 0);
}

20. Pindahkan elemen

Item menu pertama sebenarnya adalah anak ketiga dari menu, karena ada kotak centang dan hamburger sebelum itu. Menambahkan ini memungkinkan elemen menu pertama untuk pindah ke posisi setelah menu diklik oleh pengguna. Setiap elemen menu akan pindah dengan waktu yang sedikit lebih lama.

.menu-Open: checked + .menu-open-button {
Fungsi transisi-waktu: linier;
Durasi transisi: 400 ms;
Transformasi: skala (0,8, 0.8) Translate3D
(0, 0, 0);
}
.menu-Open: checked ~ .menu-item {
Fungsi transisi-waktu: kubik-
Bezier (0,165, 0,84, 0,44, 1);
}
.menu-Open: checked ~ .menu-item: Nth-child (3) {
Durasi transisi: 390ms;
Transformasi: Translate3D (110px, 0, 0);
} 

21. Mengatasi gerakan yang tersisa

Elemen menu yang tersisa dipindahkan dengan kecepatan yang berbeda. Ini memungkinkan elemen untuk menempel bersama pada tahap awal animasi, yang akan memberikan tampilan cairan blow, menggunakan filter SVG. Simpan dokumen dan lihat hasil jadi di browser Anda.

 .menu-Open: checked ~ .menu-item: Nth-child (4) {
Durasi transisi: 490ms;
Transformasi: Translate3D (220px, 0, 0);
}
.menu-Open: checked ~ .menu-item: Nth-child (5) {
Durasi transisi: 590ms;
Transformasi: Translate3D (330px, 0, 0);
}
.menu-Open: checked ~ .menu-item: nth-child (6) {
Durasi transisi: 690ms;
Transformasi: Translate3D (440px, 0, 0);
} 

Artikel ini awalnya diterbitkan di Majalah Desain Web Kreatif Desainer web . Beli masalah 283 di sini atau berlangganan desainer web di sini .

Artikel terkait:

• Animate SVG dengan JavaScript
• Panduan Lengkap untuk SVG
• Animasi SVG SuperCharge dengan GSAP