Lisää SVG-suodattimet CSS: llä

SVG on ollut noin 2000-luvun alkupuolelta lähtien, mutta silti on vielä mielenkiintoisia tapoja, joilla suunnittelijat löytävät sitä. Tässä opetusohjelmassa painopiste on SVG: n kautta sovellettavissa suodattimissa - mutta niiden sijaan, että ne soveltaisivat SVG-kuvaan, näytämme sinulle, miten niitä voidaan soveltaa mihin tahansa tavalliseen sivun sisältöön.

Tapa, jolla suodatin levitetään SVG: hen, on oikeastaan ​​CSS: n kautta, kertomalla se, mikä tunnus suodatin on. Käyttämällä samaa ajatusta suodatinta voidaan soveltaa esimerkiksi säännölliseen tekstiin. Hyvä osa tästä on, että voit lisätä hienoa graafista ulkona tekstiä, joka olisi ollut aiemmin ollut mahdollista soveltamalla useita Photoshop-suodattimia ja tallentamalla kuvan. SVG-suodattimen käyttäminen teksti pysyy helposti saatavilla ja valittavissa, koska se on edelleen vain tavallinen tekstielementti sivulla.

Koodi täällä luo siirtymäkartan tekstiin, joka sisältää myös alfa-kartan, jotta se näyttää vetistä ja sopeutua sivun teemaan. Sitten luodaan toinen suodatin, joka tekee valikon näkyvän vedenpihdiksi, jotka pysyvät hieman yhdessä, mutta blob toisistaan, kun ne liikkuvat kauempana. Jälleen tämä pitää tämän nimenomaisen sivun teeman ja näyttää kaksi luovaa tapaa soveltaa SVG-suodattimia muihin sisältöön.

Oletko kiinnostunut oppimaan lisää SVG: stä? Tutustu artikkelimme Kaikki mitä sinun tarvitsee tietää SVG: stä verkossa . Vaihtoehtoisesti lisää kiinnostusta sivustoihisi yhdellä näistä viileistä CSS-animaatioesimerkkejä .

• Lataa tiedostot Tätä opetusohjelmaa Filesilosta

01. Aloita

Ensin sinun on ladattava projektitiedostot käyttämällä suoraan yllä olevaa linkkiä. Kun olet tehnyt sen, vedä alkaa Projektin kansio koodille IDE ja avaa index.html sivu. Näet, että jokin sivu sisältö on jo kirjoitettu. Otsikkoosa on luotava, ja tämä sisältää otsikon, johon SVG-suodatin vaikuttaa. Lisää koodi täältä, juuri sisällä runko tag.

 & lt; div luokka = "bg" & gt;
& lt; div luokka = "keski" & gt;
& lt; h2 class = "otsikko" & gt; vedenalainen
Seikkailupuisto & lt; / h2 & gt;
& lt; div luokka = "intro_block" & gt; 

02. Sulje otsikko

Nyt otsikko on valmis, kun se on paikallaan. Jos katsot sivusi selaimessa tällä hetkellä, näet vesikuvan, jossa on jotain tekstiä. Otsikko, joka on vielä epätäydellinen, tulee olemaan muotoiltu ja siinä on SVG-suodatin, jota sovelletaan siihen.

 & lt; h3 class = "subhead" & gt; Koe valtameri
& lt; br & gt; kuten koskaan ennen ja lt; / h3 & gt;
& lt; p class = "intro" & gt; vedenalainen
Seikkailupuisto on kokemus
Unlinue mitään, mitä sinulla on koskaan
oli. Matkustaa syvyyksiin
valtameri ja kävellä
Sea Life! & Lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. Luo SVG-suodatin

SVG-koodi voidaan lisätä missä tahansa sivulla, mutta koska sitä ei näy, se voi olla hyvä asettaa se pohjaan ennen sulkeutuvaan kehon tunnisteeseen. SVG-suodatin luo turbulenssikohinan. HUOMAUTUS Suodattimella on tunnus - tämä mahdollistaa CSS: n soveltamisen toiseen sivun elementtiin.

 & lt; svg xmlns = "http://www.w3.org/2000/SVG" & gt;
& lt; suodattimen tunnus = "syrjäytysfilter" & gt;
& lt; feturbulence tyyppi = "turbulenssi"
Basefrequency = "0,004" Numoctaves =
"2" tulos = "turbulenssi" / & gt;
& lt; / Filter & Gt;
& lt; / svg & gt; 

04. Piilota SVG

Siirtyä Sivu.CSS Tiedosto nyt ja ennen kaikkea CSS-koodi muualla sivulle, jossa uudet CSS: n menevät. Tässä SVG on asetettu näyttämään sivulle lainkaan. Otsakkeessa kaksi tunnistetta on asetettu, että siihen sovelletaan oikea kirjasin.

 SVG {
Näyttö: Ei mitään;
}
H2 {
Fontti-koko: 5.5vw;
Font-perhe: "Kreeta pyöreä", serif;
} 

05. Lisää otsikkoon

The viivankorkeus on nolla, koska myöhemmin otsikko on animoitu, joten hallita sen skaalausta sivulla on tärkeä. Se on myös annettu pehmuste, jotta se istuu oikealla tilalla, ja väri muuttuu.

 .headline {
Line-korkeus: 0;
Näyttö: Inline-lohko;
Pehmuste: 70px;
Väri: #ccffff; 

06. Viimeistele otsikko

Viimeistele otsikkoluokan viimeistely seuraava rivi soveltaa irrotusfilter ID SVG: ssä tekstiin. The Käännä3D Varmistaa, että teksti muuttuu laitteistoksi. Skaalausta vaihdetaan hieman sen varmistamiseksi, että kun siirtyminen levitetään, näyttää oikealta.

 Suodatin: URL (#displacementfilter);
Muuntaminen: Käännä3d (0, 0, 0);
Muunnos: Scaley (1,8) Rotaty (-2deg);
} 

07. Tee se syrjäyttää

Jos testat suodattimen tässä vaiheessa, turbulenssi korvaa tekstin kokonaan. Se on helppo korjata. Palaa Fineks.html-sivun suodatinkoodiin. Tämä vie turbulenssin ja lähdegrafiikan, joka on teksti, ja se soveltaa sitä siirtymäsuodattimena. Yritä vaihtaa perustaajuus ja oktaavien lukumäärä turbulenssissa.

 & lt; fedisplacementMap in2 = "turbulenssi" in = "
SourceGraphic "Scale =" 30 "XChannelSELECTOR =" R "
YChannelSELECTOR = "G" tulos = "DISP" / & GT; 

08. Pehmentää reunat

Reunat näyttävät hieman ankaria vetistä vaikutusta. Se voidaan kovettaa Gaussin hämärtää. Lisää koodi siirtymäkartan jälkeen. Kun päivität sivun, se on varmasti hämärtynyt teksti, mutta siirtymä on poissa. Jälleen nämä ovat elementtejä, jotka voidaan kiinnittää tapaan luoda vaikutus.

 & lt; fegaussianblur in = "SourceGraphic"
STDDEVIATION = "15" tulos = "BLR" / & gt; 

09. Komposiitti kaksi

Lisää komposiitti linja jäljempänä edellisen Gaussin hämärtymisen alapuolella. Näet, että tämä yhdistää hämärtymisen ja siirtymisen yhteen ja luo myös vetisen läpikuultava vaikutus tekstiin. Se on mennyt jonkin verran reunojen pehmentämiseen, mutta ei tarpeeksi. Olisi hyvä, jos alkuperäinen hämärtyminen voitaisiin lisätä tähän.

 & lt; fecomposiitti = "BLR" in2 = "DISP" -operaattori = "Tulos =" Comp "/ & GT; 

10. Yhdistä hämärtyminen

Yhdistelmäoperaatio mahdollistaa komposiitin lopullisen tuloksen sulautumisen hämärtymisen kanssa. Tämä näyttää nyt, että se sopii taustakuvaan ja näyttää sopivan veden läpi tulevien valon linjoihin. Paras osa tekstistä on se, että se on edelleen valittavissa ja osa sivua, toisin kuin jos olet luonut tämän Photoshopissa.

 & lt; femmerge tulos = "lopullinen" & gt;
& lt; femerwenode in = "BLR" / & gt;
& lt; femerwenode in = "comp" / & gt;
& lt; / femmerge & gt; 

11. Luo animaatio

Palaa takaisin Sivu.CSS Tiedosto ja lisää avainkehykset tässä esitetyllä tavalla. Tämä vain skaalaa fonttikokoa nolla pystysuorasta leveydestä 5,5 pystysuuntaiseen leveyteen. Alussa tätä levitetään otsikkoon, jotta teksti vaahtoaa ylös ja paikalleen näytöllä. Kun teksti liikkuu, siirtymä muuttuu myös pituuden yli, mikä antaa vetistä aaltoilua.

 @Keyframes Scaler {
{
Fontti-koko: 0vw;
}
{
Fontti-koko: 5.5vw;
}
} 

12. Muuta H2-tyyliä

The h2 Tyyliä on aiemmin lisätty vaiheessa 4. Vaihda tämä uusi koodi, joka lisää CSS-animaation neljä sekuntia otsikkoon. Animaatio pysähtyy ja pitää viimeisen avainkehys. Tallenna tämä ja testaa se selaimessa nähdäksesi tekstin rippling paikalleen.

 H2 {
Line-korkeus: 0;
Fontti-koko: 0vw;
Animaatio-nimi: Scaler;
Animaatio-kesto: 4S;
Animaatio-täyttötila: eteenpäin;
Font-perhe: "Kreeta pyöreä", serif;
} 

13. Lisää navigointi

Luodaan nyt sopiva vesi-blob-inspired animaatio käyttäen toista SVG-suodatinta. Lisää seuraava navigointipitoisuus runkokoodin päälle, ennen kuin otsikko, joka käynnistettiin opetusohjelman ensimmäisessä vaiheessa. Tämä luo hampurilaisvalikon perusteet ympyrässä.

& lt; navl class = "valikko" & gt;
& lt; syöttötyyppi = "valintaruutu" href = "#" luokka =
"MENU-OPEN" NAME = "MENU-OPEN" ID = "MENU-
Avaa "/ & gt;
& lt; etikettiluokka = "MENU-OPEN-painike"
FOR = "MENU-OPEN" & GT;
& lt; span class = "hampurilainen
Hamburger-1 "& gt; & lt; / span & gt;
& lt; span class = "hampurilainen
hampurilainen-2 "& gt; & lt; / span & gt;
& lt; span class = "hampurilainen
Hamburger-3 "& gt; & lt; / span & gt;
& lt; / etiketti & gt; 

14. Viimeistele navigointi

Nyt jäljellä olevat navigointielementit voidaan lisätä. Tämä käyttää myös Font Awesome Open Source -kuvaketta, joka on lisätty pääosastoon tämän kirjaston CDN: stä. Jokaisessa valikon pyöreällä elementillä on kuvake sen sisällä.

 & lt; a href = "#" class = "valikkokohta" & gt; & lt; i class = "fa
FA-CAR "& GT; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "valikkokohta" & gt; & lt; i
Luokka = "FA FA-Ship" & GT; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "valikkokohta" & gt; & lt; i
Luokka = "Fa fa-kartta" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#" class = "valikkokohta" & gt; & lt; i
Luokka = "Fa fa-matkalaukku" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; / nav & gt; 

15. Lisää uusi suodatin

Toinen suodatin lisätään tähän vaikutukseen. Lisää SVG: ssä koodi aiemmin lisättävän koodin sulkemisen jälkeen. Täällä vaikutukset perustuvat hyvin samanlaisella tavalla aiemmin. Tämä mahdollistaa valikon näyttää tahmeat blobs neste liikkuvat toisistaan.

 & lt; suodattimen tunnus = "Shadowed-blob" & gt;
& lt; fegaussianblur in = "SourceGraphic"
tulos = "hämärtää" STDDEVIATION = "20" / & gt;
& lt; fecolormatrix in = "hämärtää" tila =
"Matrix" -arvot = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7 "
tulos = "blob" / & gt;
& lt; fegaussianblur in = "blob"
STDDEVIATION = "3" tulos = "varjo" / & gt;
& lt; fecolormatrix in = "Shadow" -tila =
"Matrix" -arvot = "0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 -0.2 "
tulos = "varjo" / & gt; 

16. Viimeistele suodatin

Jäljellä oleva suodatin lisätään tässä, joka täydentää vaikutuksen, joka sijoitetaan valikkokohteiden jokaiseen ympyrään. Tämä aiheuttaa elementtejä, jotta nestemäinen blob vaikutus lisätään. Tallenna tämä sivu ja siirry sitten "Design.css" -tiedostoon.

 & lt; feuffset in = "shadow" dx = "0" dy = "2"
tulos = "varjo" / & gt;
& lt; fecomposite in2 = "varjo" in = "Blob"
tulos = "blob" / & gt;
& lt; fecomposite in2 = "Blob"
in = "SourceGraphic" -tulos = "Mix" / & gt;
& lt; / suodatin & gt; 

17. Käytä suodatinta

CSS-koodi voidaan nyt lisätä eri Design.css , vain pitää kaikki navigointi CSS yhdessä samassa paikassa. Jotkin koodit on lisätty, mutta tässä suodatin levitetään valikkoon, joka on kiinteä valikko, jotta se on aina läsnä näytöllä aina.

 .MENU {
Suodatin: URL ("Shadowed-Blob");
Paikka: kiinteä;
PADDING-TOP: 20PX;
Padding-vasen: 80px;
Leveys: 650px;
Korkeus: 150px;
Box-Mitoitus: Border-Box;
Fontti-koko: 20px;
Teksti-kohdistus: Vasen;
} 

18. Tee valikkotyö

Valikko on käytössä näkymätön, kun valikko on auki. Kunkin valikkokohtien levityselementti luodaan siten, että käyttäjällä on muutos, kun käyttäjä leijuu tämän päälle. Jokaisen valikon lapselle annetaan 0,4 sekunnin siirtyminen, kun valikkokohdat palautuvat alkuperäiseen asentoonsa.

 .MENU-OPEN {
Näyttö: Ei mitään;
}
.MENU-ITEM: Hover {
Taustaa: # 47959f;
Väri: # B2F0F8;
}
.MENU-ITEM: nth-child (3), .MENU-tuote: nth-
Lapsi (4), .MENU-tuote: nth-lapsi (5), .Menu-
Tuote: nth-child (6) {
Siirtyminen kesto: 400ms;
} 

19. Lisää hampurilainen

Burger-kuvake korotetaan muiden elementtien yläpuolella muuttamalla sen z-indeksi . Valikko kasvaa, kun käyttäjä liikkuu tämän päälle ja napsauttamalla valikkoa nyt saavat hampurilaisen animoivat kolmesta hampurilaisesta "X": iin, mikä osoittaa valikon poistaaksesi valikon.

 .MENU-Open-Button {
Z-indeksi: 2;
Siirtyminen-ajoitus-toiminto: kuutio-
bezier (0,175, 0,885, 0,32, 1,275);
Siirtyminen kesto: 400ms;
Muunna: mittakaava (1.1, 1.1) Käännä3d
(0, 0, 0);
kohdistin: osoitin;
}
.MENU-Open-Button: Hover {
Muunna: mittakaava (1.2, 1.2) Kääntäjä3D
(0, 0, 0);
}

20. Siirrä elementit

Ensimmäinen valikkokohta on itse asiassa valikon kolmas lapsi, koska se on valintaruutu ja hampurilainen ennen sitä. Tämän lisääminen mahdollistaa ensimmäisen valikkoelementin siirtyäksesi asentoon, kun käyttäjä napsautetaan valikkoon. Jokainen valikkoelementti siirtyy hieman pidempään.

.MENU-Open: tarkistettu + .MENU-Open-Button {
Siirtymäaika: lineaarinen;
Siirtyminen kesto: 400ms;
Muunna: asteikko (0,8, 0.8) Kääntäjä3d
(0, 0, 0);
}
.MENU-OPEN: tarkistettu ~ .Menu-tuote {
Siirtyminen-ajoitus-toiminto: kuutio-
bezier (0,165, 0,84, 0,44, 1);
}
.MENU-Open: tarkistettu ~ .Menu-tuote: nth-child (3) {
Siirtyminen kesto: 390ms;
Muunna: Käännä3d (110px, 0, 0);
} 

21. Osoita jäljellä oleva liike

Jäljellä olevat valikkoelementit siirretään ulos eri nopeuksilla. Tämä mahdollistaa elementit kiinni animaation alkuvaiheessa, mikä antaa Blobby-nestemäisen näyttämisen SVG-suodattimen avulla. Tallenna asiakirjat ja katso selaimesi valmiit tulokset.

 .MENU-Open: tarkistettu ~ .Menu-tuote: nth-child (4) {
Siirtyminen kesto: 490 mm;
Muuntaminen: Käännä3d (220px, 0, 0);
}
.MENU-Open: tarkistettu ~ .Menu-tuote: nth-child (5) {
Siirtyminen kesto: 590 mm;
Muuntaminen: Käännä3d (330px, 0, 0);
}
.MENU-Open: tarkistettu ~ .Menu-tuote: nth-child (6) {
Siirtymäaika: 690 mm;
Muuntaminen: Käännä3d (440px, 0, 0);
} 

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine Nettisivujen suunnittelija . Osta numero 283 Täällä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

• Animate SVG JavaScript
• Täydellinen opas SVG: lle
• SuperCare SVG-animaatiot GSAP: llä