Lägg till SVG-filter med CSS

SVG har funnits sedan början av 2000-talet, och ändå finns det fortfarande intressanta sätt som designersna finner att använda den. I den här handledningen kommer fokus på de filter som tillämpas via SVG - men istället för att applicera dem på en SVG-bild visar vi dig hur de kan tillämpas på ett vanligt innehåll.

Hur filtret appliceras på SVG är faktiskt via CSS, genom att berätta det som ID-filtret har. Med samma idé kan filtret appliceras på vanlig text, till exempel. Den goda delen om detta är att du kan lägga till några bra grafiska utseende på din text, vilket bara skulle ha varit tidigare möjligt genom att applicera ett antal Photoshop-filter och spara som en bild. Med hjälp av SVG-filtret är texten fortfarande tillgänglig och väljbar, eftersom det fortfarande är ett vanligt textelement på din sida.

Koden här kommer att skapa en förskjutningskarta till text som också innehåller en Alpha-karta för att göra det att visas vattnig och passa på temat på sidan. Då kommer ett annat filter att skapas som gör att en meny visas som vattenblåsor, som håller lite ihop men blob från varandra när de flyttar längre bort. Återigen håller detta med temat för den här sidan och visar två kreativa sätt att tillämpa SVG-filter till annat innehåll.

Intresserad av att lära dig mer om SVG? Ta en titt på vår artikel om Allt du behöver veta om SVG på webben . Alternativt, lägg till något intresse för dina webbplatser med en av dessa coola CSS-animationsexempel .

• Ladda ner filerna För den här handledningen från Filsilo

01. Kom igång

Först måste du hämta projektfilerna med länken direkt ovanför. När du har gjort det, dra Start Projektmapp på din kod IDE och öppna index.html sida. Du kommer att se att det finns några sidinnehåll som redan skrivits. Huvuddelen måste skapas, och det kommer att innehålla rubriken som påverkas av ett SVG-filter. Lägg till koden här, precis inuti kropp märka.

 & lt; div klass = "bg" & gt;
& lt; Div Class = "Middle" & GT;
& lt; h2 class = "rubrik" & gt; undervattens
Äventyrspark & ​​LT; / H2 & GT;
& lt; div class = "intro_block" & gt; 

02. Stäng rubriken

Nu är rubriken klar, med all text för den på plats. Om du tittar på din sida i webbläsaren för tillfället ser du en vattenbild med lite text på den. Rubriken, som fortfarande är ostyled, kommer att bli utformad och har SVG-filtret applicerat på det.

 & lt; h3 class = "subhead" & gt; upplev havet
& lt; BR & GT, som aldrig före & LT; / H3 & GT;
& lt; p class = "intro" & gt; undervattens
Äventyrspark är en upplevelse
unlinke vad du någonsin har
hade. Resa till djupet av
havet och gå bland
Sea Life! & LT; / P & GT;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. Skapa ett SVG-filter

SVG-koden kan läggas till var som helst på sidan, men eftersom det inte kommer att ses kan det vara en bra idé att placera den längst ner innan den stängande kroppsmärket. SVG-filtret skapar turbulensbuller. Lägg märke till att filtret har ett ID - det här gör det möjligt för CSS att tillämpa detta på ett annat element på sidan.

 & lt; svg Xmlns = "http://www.w3.org/2000/svg" & GT;
& lt; filter id = "förskjutning filter" & gt;
Feturbulens typ = "Turbulens"
Basefrequency = "0,004" Numoctaves =
"2" resultat = "turbulens" / & gt;
& lt; / filter & gt;
& LT; / SVG & GT; 

04. Dölj SVG

Flytta över till Sida.css Filen nu, och framför allt CSS-koden för resten av sidan kommer att vara där vår nya CSS kommer att gå. Här är SVG inställt att inte visas på sidan alls. Rubriken två tagg är inställd på att den högra typsnittet appliceras på den.

 SVG {
Visa: Ingen;
}
H2 {
FONT-STORLEK: 5,5VW;
Font-familj: "Kreta runt", serif;
} 

05. Lägg till rubriken

De radavstånd Är inställt på noll, för senare är rubriken animerad, så att ha kontroll över skalningen på sidan är viktig. Det ges också lite vaddering så att den sitter med rätt mängd utrymme runt det och färgen ändras.

. Headline {
linjehöjd: 0;
Visa: Inline-block;
Padding: 70px;
Färg: #ccffff; 

06. Avsluta rubriken

Vid avslutning av rubrikklassen tillämpar nästa rad förskjutningsfilter ID i SVG till texten. De Translate3d säkerställer att texten blir hårdvara accelererad. Skalan ändras något för att säkerställa att när förskjutningen appliceras ser det rätt ut.

 Filter: URL (#Displacementfilter);
Transform: Translate3d (0, 0, 0);
Transform: Scaleyy (1.8) roterande (-2deg);
} 

07. Gör det förskjuta

Om du testar filtret i detta skede ersätter turbulensen helt texten. Det är lätt att fixa. Gå tillbaka till filterkoden i sidan index.html. Detta tar turbulensen och källgrafiken, som är texten och tillämpar den som ett förskjutningsfilter. Försök ändra basfrekvensen och antalet oktav i turbulensen.

 & lt; fedisplacementMap in2 = "turbulens" in = "
Källgrafisk "skala =" 30 "xchannelselector =" r "
ychannelselector = "g" resultat = "disp" / & gt; 

08. Mjuka kanterna

Kanterna ser lite hårda för en vattnig effekt. Som kan botas med en gaussisk suddighet. Lägg till koden efter förskjutningskartan. När du uppdaterar sidan har den definitivt suddigt texten men förskjutningen är borta. Återigen är dessa element som kan lösas på vägen för att skapa effekten.

 & lt; fegaussianblur in = "Sourcegraphic"
STDDEVIATION = "15" resultat = "BLR" / & GT; 

09. Komposit de två

Lägg till kompositlinjen här under den tidigare Gaussiska suddan. Du kommer att se att det här kombinerar suddan och förskjutningen tillsammans, och skapar också en vattnig genomskinlig effekt på texten. Det har gått något sätt att mjukna kanterna, men inte tillräckligt. Det skulle vara bra om den ursprungliga suddan kunde läggas till i detta.

 & lt; fecomposite in = "BLR" IN2 = "DISP" Operator = "I" Resultat = "Comp" / & GT; 

10. Sammanfoga suddigheten

En sammanslagningsoperation möjliggör att det slutliga resultatet av den sammansatta kompositen slås samman med suddig effekt. Detta ser nu ut som det passar med bakgrundsbilden och verkar passa med ljuslinjerna som kommer genom vattnet. Den bästa delen om texten är att det fortfarande är valbart och en del av sidan, till skillnad från om du skapade det här i Photoshop.

 & lt; Femerge Resultat = "Final" & GT;
Fordonder i = "BRR" / & GT;
& lt; femergenode i = "comp" / & gt;
& lt; / femerge & gt; 

11. Skapa en animering

Gå tillbaka till Sida.css Fil och lägg till i nyckelbilder som visas här. Detta kommer bara att skala upp teckensnittstorleken från en noll vertikal bredd till en 5,5 vertikal bredd. I början kommer det att appliceras på rubriken, så att texten vågar upp och på plats på skärmen. När texten rör sig kommer förskjutningen också att förändras över längden, vilket ger en vattnig krusning.

 @keyframes scaler {
från {
FONT-STORLEK: 0VW;
}
till {
FONT-STORLEK: 5,5VW;
}
} 

12. Ändra H2-stilen

De h2 Stil har tidigare lagts till i steg 4. Byt ut den koden med den här nya koden, vilket lägger till CSS-animationen över fyra sekunder till rubriken. Animationen stannar och håller på den sista keyframe. Spara det här och testa det i webbläsaren för att se texten Rippling på plats.

 H2 {
linjehöjd: 0;
FONT-STORLEK: 0VW;
Animation-Namn: Skalare;
Animation-varaktighet: 4s;
Animation-Fill-Mode: Framåt;
Font-familj: "Kreta runt", serif;
} 

13. Lägg till navigering

Låt oss nu skapa en lämplig vattenblob-inspirerad animering med ett annat SVG-filter. Lägg till följande navigeringsinnehåll längst upp i kroppskoden, innan rubriken som startades i det första steget i handledningen. Detta kommer att skapa grunderna i en hamburgare-meny i en cirkel.

& lt; navklass = "Meny" & GT;
& lt; Input Type = "Checkbox" href = "#" class =
"Meny-Open" -namn = "Meny-Open" ID = "MENU-
öppna "/ & gt;
& lt; etikett klass = "Meny-Open-Button"
för = "Meny-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; / Etikett & GT; 

14. Avsluta navigeringen

Nu kan de återstående navigeringselementen läggas till. Detta använder också det font fantastiska Open Source-ikonbiblioteket, som har lagts till i huvuddelen för att länka från CDN i det här biblioteket. Varje menycirkelelement kommer att ha en ikon inuti den.

 & lt; en href = "#" klass = "meny-objekt" & gt; & lt; i klass = "fa
FA-bil "& GT; / LT; ​​/ I & GT; & LT; / A & GT;
& lt; en href = "#" klass = "meny-objekt" & gt; & lt; jag
klass = "FA FA-Ship" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; en href = "#" klass = "meny-objekt" & gt; & lt; jag
klass = "FA FA-karta" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; en href = "#" klass = "meny-objekt" & gt; & lt; jag
klass = "FA Fa-resväska" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; / nav & gt; 

15. Lägg till det nya filtret

Ett annat filter kommer att läggas till för denna effekt. I SVG, lägg till den här koden efter den stängda filtermärket för den som läggs till tidigare. Här är effekterna uppbyggda på ett mycket liknande sätt som tidigare. Detta tillåter att menyn ser ut som klibbiga flitor av vätska som rör sig ifrån varandra.

 & lt; Filter ID = "Shadowed-Blob" & GT;
& lt; fegaussianblur in = "Sourcegraphic"
Resultat = "Blur" stddeviation = "20" / & gt;
& lt; fecolormatrix in = "blur" mode =
"Matrix" värden = "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 = "shadow" mode =
"Matrix" värden = "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. Avsluta filtret

Resten av filtret läggs till här, vilket kompletterar effekten som kommer att placeras på varje cirkel av menyalternativen. Detta kommer att få elementen att få den tillsatta vätskeflobben. Spara den här sidan och växla sedan över till filen 'design.css'.

 & lt; feoffset in = "shadow" dx = "0" dy = "2"
Resultat = "Shadow" / & GT;
& lt; fecomposite in2 = "shadow" in = "blob"
Resultat = "Blob" / & GT;
& lt; fecomposite in2 = "blob"
i = "SourceGraphic" Resultat = "MIX" / & GT;
& lt; / filter & gt; 

17. Applicera filtret

CSS-koden kan nu läggas till de olika design.css , bara för att hålla hela navigeringen CSS tillsammans på samma plats. Vissa koder har lagts till, men här appliceras filtret på menyn, vilket kommer att vara en fast meny så att den är närvarande på skärmen hela tiden.

 .Menu {
Filter: URL ("# Shadowed-Blob");
Position: Fast;
Padding-top: 20px;
Padding-vänster: 80px;
Bredd: 650px;
Höjd: 150px;
Box-dimensionering: Border-box;
Font-storlek: 20px;
Text-Justera: Vänster;
} 

18. Gör menyarbetet

Menyn är inställd på att bli osynlig när menyn är öppen. Hoppelementet i var och en av menyalternativen skapas så att det finns en förändring när användaren svänger över det här. Varje barn i menyn ges en 0,4 sekunders övergång när menyalternativen återgår till sin ursprungliga position.

 .MENU-OPEN {
Visa: Ingen;
}
.MENU-Artikel: Hover {
Bakgrund: # 47959F;
Färg: # b2f0f8;
}
.MENU-Artikel: nth-barn (3), .MENU-artikel: nth-
Barn (4), .Menu-artikel: nth-barn (5), .emen-
Artikelnummer: nth-barn (6) {
Övergångsvaraktighet: 400ms;
} 

19. Lägg till en hamburgare

Burgerikonen är förhöjd ovanför de andra elementen genom att ändra sin z-index . Menyn växer när användaren svänger över det här, och klickar på menyn kommer nu att få burgeren att animera från tre rader av en burgare till en "x", vilket indikerar alternativet för att ta bort menyn.

 .Menu-Open-Button {
Z-Index: 2;
Övergångstidsfunktion: Cubic-
Bezier (0,175, 0,885, 0,32, 1,275);
Övergångsvaraktighet: 400ms;
Transform: Skala (1.1, 1.1) Translate3D
(0, 0, 0);
markör: pekare;
}
.Menu-Open-Button: Hover {
Transform: Skala (1.2, 1.2) Translate3D
(0, 0, 0);
}

20. Flytta elementen

Det första menyalternativet är faktiskt det tredje barnet i menyn, eftersom det finns en kryssruta och hamburgaren före den. Att lägga till detta gör det möjligt för det första menyelementet att flytta till läge när menyn klickas av användaren. Varje menyelement kommer att röra sig med en något längre tid.

.MENU-OPEN: Kontrollerad + .Menu-Open-Button {
Övergångstidsfunktion: Linjär;
Övergångsvaraktighet: 400ms;
Transform: Skala (0,8, 0,8) Translat3D
(0, 0, 0);
}
.MENU-OPEN: Kontrollerad ~ .MENU-PUNKT {
Övergångstidsfunktion: Cubic-
Bezier (0,165, 0,84, 0,44, 1);
}
.MENU-OPEN: Kontrollerad ~ .MENU-artikel: nth-barn (3) {
Övergångsvaraktighet: 390ms;
Transform: Translate3d (110px, 0, 0);
} 

21. Adressera den återstående rörelsen

De återstående menyelementen flyttas ut med olika hastigheter. Detta gör det möjligt för elementen att hålla ihop i de tidiga stadierna av animationen, vilket ger bloung-vätskan, med SVG-filtret. Spara dokumenten och se de färdiga resultaten i din webbläsare.

 .MENU-OPEN: Kontrollerad ~ .MENU-artikel: nth-barn (4) {
Övergångsvaraktighet: 490ms;
Transform: Translate3d (220px, 0, 0);
}
.MENU-OPEN: Kontrollerad ~ .Menu-artikel: nth-barn (5) {
Övergångsvaraktighet: 590ms;
Transform: Translate3d (330px, 0, 0);
}
.MENU-OPEN: Kontrollerad ~ .MENU-artikel: nth-barn (6) {
Övergångsvaraktighet: 690ms;
Transform: Translate3d (440px, 0, 0);
} 

Den här artikeln publicerades ursprungligen i kreativ webbdesignmagasin Webbdesigner . Köp utgåva 283 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

• Animera svg med javascript
• Den fullständiga guiden till SVG
• Super CHARGE SVG Animationer med GSAP