Tilføj SVG filtre med CSS

SVG har eksisteret siden begyndelsen af ​​2000'erne, og alligevel er der stadig interessante måder, som designere finder på at bruge den. I denne vejledning vil fokuset være på de filtre, der anvendes via SVG - men i stedet for at anvende dem på et SVG-billede, viser vi dig, hvordan de kan anvendes på ethvert regelmæssigt sideindhold.

Den måde, filteret påføres på SVG'en, er faktisk gennem CSS, ved at fortælle det, hvilket id filteret har. Ved at bruge den samme idé kan filteret påføres for eksempel regelmæssig tekst. Den gode del om dette er, at du kan tilføje noget godt grafisk udseende til din tekst, hvilket kun ville have været tidligere muligt ved at anvende en række Photoshop-filtre og gemme som et billede. Ved hjælp af SVG-filteret forbliver teksten tilgængelig og kan vælges, da det stadig kun er et almindeligt tekstelement på din side.

Koden her vil oprette et forskydningskort til tekst, der også indeholder et alpha-kort for at få det til at virke vandigt og passe til temaet på siden. Derefter oprettes et andet filter, der gør en menu virke som vandblygter, som holder lidt sammen, men Blob fra hinanden, når de bevæger sig længere væk. Igen holder dette temaet for denne særlige side og viser to kreative måder at anvende SVG filtre på andet indhold.

Interesseret i at lære mere om SVG? Tag et kig på vores artikel om Alt hvad du behøver at vide om SVG på nettet . Alternativt kan du tilføje en vis interesse for dine websteder med en af ​​disse cool CSS animation eksempler .

• Download filerne Til denne vejledning fra FileSilo

01. Kom godt i gang

For det første skal du downloade projektfilerne ved hjælp af linket direkte ovenfor. Når du har gjort det, skal du trække Start Projektmappe på din kode IDE og åben index.html. side. Du vil se, at der allerede er skrevet noget sideindhold. Hovedafsnittet skal oprettes, og dette vil indeholde overskriften, der vil blive påvirket af et SVG-filter. Tilføj koden her, lige indenfor legeme tag.

 & lt; div class = "bg" & gt;
& lt; div class = "midten" & gt;
& lt; h2 klasse = "overskrift" & gt; under vandet
Eventyr park & ​​lt; / h2 & gt;
& lt; div class = "Intro_block" & gt; 

02. Luk overskriften

Nu er overskriften færdig, med hele teksten til den på plads. Hvis du ser din side i browseren i øjeblikket, vil du se et vandbillede med en tekst på den. Overskriften, som stadig er ustyret, vil blive stillet op og få SVG-filteret på det.

 & lt; h3 klasse = "underposition" & gt; opleve havet
& lt; BR & GT; som aldrig før & lt; / h3 & gt;
& lt; p klasse = "intro" & gt; under vandet
Adventure Park er en oplevelse
UNLINKE noget du nogensinde har
havde. Rejse til dybden af
havet og gå blandt
SEA LIFE! & LT; / P & GT;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. Opret et SVG-filter

SVG-koden kan tilføjes overalt på siden, men da det ikke ses, kan det være en god ide at placere den i bunden, før den lukkede krops tag. SVG-filteret skaber turbulensstøj. BEMÆRK Filteret har et id - dette er det, der gør det muligt for CSS at anvende dette til et andet element på siden.

 & lt; svg xmlns = "http://www.w3.org/000/svg" & gt;
& lt; filter id = "forskydningsfilter" & gt;
& lt; feturbulens type = "turbulens"
BASEFREQUENCY = "0.004" NUMOCTAVES =
"2" resultat = "turbulens" / & gt;
& lt; / filter & gt;
& lt; / svg & gt; 

04. Skjul SVG

Flyt over til side.css. Fil nu, og frem for alt CSS-koden for resten af ​​siden vil være, hvor vores nye CSS vil gå. Her er SVG'en indstillet til slet ikke på siden. Overskriften to tag er indstillet til at have det rigtige skrifttype, der anvendes på det.

 SVG {
Display: Ingen;
}
h2 {
Font-størrelse: 5,5VW;
Font-familie: 'Kreta runde', serif;
} 

05. Tilføj til overskriften

Det linjehøjde er indstillet til nul, fordi overskriften senere bliver animeret, så det er vigtigt at have kontrol over sin skalering på siden. Det har også givet noget polstring, så det sidder med den rigtige mængde plads omkring det, og farven er ændret.

. Headline {
line-højde: 0;
Display: Inline-Block;
Padding: 70px;
Farve: #ccffff; 

06. Afslut overskriften

Ved afslutning af overskriftsklassen gælder den næste linje den forskydningsfilter Id i SVG til teksten. Det Oversæt3D. sikrer, at teksten bliver hardware accelereret. Skalaen ændres lidt for at sikre, at når forskydningen påføres, ser det rigtigt ud.

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

07. Gør det forskyde

Hvis du tester filteret på dette stadium, erstatter turbulens helt teksten. Det er nemt at rette. Gå tilbage til filterkoden i Index.html-siden. Dette tager turbulensen og kildegrafik, som er teksten, og anvender den som et forskydningsfilter. Prøv at ændre basisfrekvensen og antallet af oktaver i turbulensen.

 & lt; FedisplacementMap in2 = "Turbulens" in = "
SourceGraphic "Scale =" 30 "XChannelSelector =" r "
YchannelselEler = "g" resultat = "DISP" / & GT; 

08. Blødgør kanterne

Kanterne ser lidt hårde ud for en vandig effekt. Der kan helbredes med en gaussisk blur. Tilføj koden efter forskydningskortet. Når du opdaterer siden, har den helt sikkert sløret teksten, men forskydningen er væk. Igen er disse elementer, der kan fastgøres på vej til at skabe effekten.

 & lt; fegaussianblur in = "sourcgraphic"
stddeviation = "15" Resultat = "BLR" / & GT; 

09. Komposit de to

Tilføj kompositlinjen her under den tidligere Gaussiske Blur. Du vil se, at dette kombinerer sløret og forskydningen sammen, og skaber også en vandig gennemskinnelig virkning til teksten. Det har gået en eller anden måde at blødgøre kanterne, men ikke nok. Det ville være godt, hvis den oprindelige sløring kunne tilføjes i dette.

 & lt; fecomposite in = "BLR" IN2 = "DISP" Operator = "i" resultat = "comp" / gt; 

10. Fjern bluret

En fusionsoperation gør det muligt for det endelige resultat af kompositmaterialet, der skal fusioneres med sløret effekt. Dette ser nu ud som om det passer sammen med baggrundsbilledet og synes at passe sammen med lysstyrken, der kommer gennem vandet. Den bedste del om teksten er, at den stadig kan vælges, og en del af siden, i modsætning til, hvis du har oprettet dette i Photoshop.

 & lt; facerge result = "endelig" & gt;
& lt; femergenode in = "blr" / & gt;
& lt; femergenode in = "comp" / & gt;
& lt; / Femerge & GT; 

11. Opret en animation

Gå tilbage til side.css. fil og tilføj i keyframes som vist her. Dette vil bare omfordele skriftstørrelsen fra en nul lodret bredde til en 5,5 lodret bredde. I starten vil dette blive anvendt på overskriften, så teksten skalaer op og på plads på skærmen. Da teksten bevæger sig, vil forskydningen også ændre sig over længden, hvilket giver en vandig rippel.

 @Keyframes scaler {
fra {
Font-størrelse: 0VW;
}
til {
Font-størrelse: 5,5VW;
}
} 

12. Skift H2-stilen

Det H2. Style blev tidligere tilføjet i trin 4. Udskift den kode med denne nye kode, som tilføjer CSS-animationen over fire sekunder til overskriften. Animationen stopper og holder på den sidste keyframe. Gem dette og test det i browseren for at se teksten rippling på plads.

 H2 {
line-højde: 0;
Font-størrelse: 0VW;
Animationsnavn: Scaler;
Animation-Varighed: 4S;
Animation-Fill-Mode: fremad;
Font-familie: 'Kreta runde', serif;
} 

13. Tilføj navigation

Lad os nu skabe en passende vandblob-inspireret animation ved hjælp af et andet SVG-filter. Tilføj følgende navigationsindhold øverst i kroppens kode, før overskriften, der blev startet i det første trin i vejledningen. Dette vil skabe det grundlæggende i en hamburger-menu i en cirkel.

& lt; nav klasse = "menu" & gt;
& lt; input type = "afkrydsningsfelt" href = "#" class =
"MENU-OPEN" NAME = "MENU-OPEN" ID = "MENU-
åben "/ & gt;
& lt; etiket klasse = "Menu-Open-Button"
for = "menu-åben" & gt;
& lt; span klasse = "hamburger
hamburger-1 "& gt; & lt; / span & gt;
& lt; span klasse = "hamburger
hamburger-2 "& gt; & lt; / span & gt;
& lt; span klasse = "hamburger
hamburger-3 "& gt; & lt; / span & gt;
& lt; / label & gt; 

14. Afslut navigationen

Nu kan de resterende navigationselementer tilføjes. Dette bruger også Font Awesome Open Source Icon Library, som er blevet tilføjet til hovedafsnittet for at linke fra CDN'en af ​​dette bibliotek. Hvert menu cirkulært element vil have et ikon inde i det.

 & lt; en href = "#" klasse = "menupunkt" & gt; & lt; i klasse = "fa
FA-CAR "& GT; / LT; ​​/ I & GT; / / A & GT;
& lt; a href = "#" klasse = "menu-element" & gt; & lt; jeg
klasse = "FA FA-SHIP" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; a href = "#" klasse = "menu-element" & gt; & lt; jeg
klasse = "FA FA-MAP" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; a href = "#" klasse = "menu-element" & gt; & lt; jeg
klasse = "FA FA-kuffert" & GT; & lt; / I & GT; & lt; / a & gt;
& lt; / NAV & GT; 

15. Tilføj det nye filter

Et andet filter vil blive tilføjet til denne effekt. I SVG tilføjer denne kode efter lukningsfiltermærket for den tidligere tilføjet kode. Her er virkningerne opbygget på en meget lignende måde som tidligere. Dette vil muliggøre menuen at ligne klæbrige klumper af væske, der bevæger sig fra hinanden.

 & lt; Filter ID = "Shadowed-Blob" & GT;
& lt; fegaussianblur in = "sourcegraphic"
Resultat = "sløring" stddeviation = "20" / & gt;
& lt; fecoLormatrix in = "blur" tilstand =
"Matrix" værdier = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7 "
Resultat = "Blob" / & GT;
& lt; fegaussianblur in = "blob"
stddeviation = "3" resultat = "shadow" / & gt;
& lt; fecoLormatrix in = "skygge" tilstand =
"Matrix" værdier = "0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 1 -0.2 "
Resultat = "Shadow" / & GT; 

16. Afslut filteret

Resten af ​​filteret tilføjes her, hvilket fuldender den effekt, der vil blive placeret på hver cirkel af menupunkterne. Dette vil få elementerne til at få den flydende blob-effekt tilsat. Gem denne side og skift derefter til 'Design.css' -filen.

 & lt; feoffset in = "shadow" dx = "0" DY = "2"
Resultat = "skygge" / & gt;
& lt; fecomposite in2 = "shadow" in = "blob"
Resultat = "Blob" / & GT;
& lt; fecomposite in2 = "blob"
in = "sourcgraphic" resultat = "mix" / & gt;
& lt; / filter & gt; 

17. Anvend filteret

CSS-koden kan nu tilføjes til de forskellige design.css. , bare for at holde alle navigation CSS sammen på samme sted. Nogle kode er blevet tilføjet, men her påføres filteret på menuen, som vil være en fast menu, så den er til stede på skærmen til enhver tid.

 .Menu {
Filter: URL ("# Shadowed-Blob");
Position: Fast;
Padding-Top: 20px;
PADDING-VENSTRE: 80PX;
Bredde: 650px;
Højde: 150px;
Boksestørrelse: Border-boks;
Font-størrelse: 20px;
Tekst-Align: Venstre;
} 

18. Gør menuen arbejde

Menuen er indstillet til at blive usynlig, når menuen er åben. Hover-elementet i hver af menupunkterne er oprettet, så der er en ændring, når brugeren svæver over dette. Hvert barn i menuen gives en 0,4 sekunders overgang, når menupunkterne vender tilbage til deres oprindelige position.

 .Menu-åben {
Display: Ingen;
}
.Menu-vare: Hover {
Baggrund: # 47959F;
Farve: # b2f0f8;
}
.menu-vare: nth-barn (3), .menu-vare: nth-
barn (4), .menu-vare: nth-barn (5), .menu-
Vare: nth-barn (6) {
Overgangsvarighed: 400ms;
} 

19. Tilføj en hamburger

Burgerikonet er forhøjet over de andre elementer ved at ændre dets z-index. . Menuen vokser, når brugeren svæver over dette, og klik på menuen vil nu få burger til at animere fra tre linjer af en burger til en 'x', hvilket angiver muligheden for at fjerne menuen.

 .Menu-OPEN-knappen {
Z-indeks: 2;
Overgangstimeringsfunktion: Cubic-
Bezier (0,175, 0,885, 0,32, 1,275);
Overgangsvarighed: 400ms;
Transform: Skala (1.1, 1.1) Oversæt 3D
(0, 0, 0);
markør: pointer;
}
.Menu-OPEN-knappen: Hover {
Transform: Skala (1.2, 1.2) translate3d
(0, 0, 0);
}

20. Flyt elementerne

Det første menupunkt er faktisk det tredje barn i menuen, da der er en afkrydsningsfelt og hamburgeren før den. Tilføjelse Dette gør det muligt for det første menupelement at flytte i position, når menuen er klikket af brugeren. Hvert menupelement vil flytte ud med en lidt længere tid.

.menu-åben: tjekket + .menu-åben-knap {
Overgangstimeringsfunktion: Lineær;
Overgangsvarighed: 400ms;
Transform: Skala (0,8, 0,8) translate3d
(0, 0, 0);
}
.Menu-åben: Kontrolleret ~ .menu-element {
Overgangstimeringsfunktion: Cubic-
Bezier (0,165, 0,84, 0,44, 1);
}
.Menu-åben: Kontrolleret ~ .menu-vare: nth-barn (3) {
Overgangsvarighed: 390ms;
Transform: Translate3D (110px, 0, 0);
} 

21. Adresse den resterende bevægelse

De resterende menupelementer flyttes ud med forskellige hastigheder. Dette gør det muligt for elementerne at holde sammen i de tidlige stadier af animationen, hvilket vil give det blobby væske udseende ved hjælp af SVG-filteret. Gem dokumenterne og se de færdige resultater i din browser.

 .Menu-åben: Kontrolleret ~ .menu-vare: nth-barn (4) {
Overgangsvarighed: 490ms;
Transform: Translate3D (220px, 0, 0);
}
.menu-åben: Kontrolleret ~ .menu-vare: nth-barn (5) {
Overgangsvarighed: 590ms;
Transform: Translate3D (330px, 0, 0);
}
.menu-åben: Kontrolleret ~ .menu-vare: nth-barn (6) {
Overgangsvarighed: 690ms;
Transform: Translate3D (440px, 0, 0);
} 

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Webdesigner . Køb problem 283 her eller Abonner på Web Designer her .

Relaterede artikler:

• Animere SVG med JavaScript
• Den komplette vejledning til SVG
• SuperCharge SVG animationer med GSAP