SVG-filters toevoegen met CSS

SVG bestaat al sinds het begin van de jaren 2000, en toch zijn er nog steeds interessante manieren waarop ontwerpers het vinden om het te gebruiken. In deze tutorial staat de focus op de filters die worden toegepast via SVG - maar in plaats van ze op een SVG-afbeelding toe te passen, laten we u zien hoe ze kunnen worden toegepast op een gewone pagina-inhoud.

De manier waarop het filter op de SVG wordt toegepast, is eigenlijk door CSS, door het te vertellen wat ID het filter heeft. Met behulp van datzelfde idee kan het filter bijvoorbeeld op reguliere tekst worden toegepast. Het goede deel hierover is dat u een aantal geweldige grafische looks kunt toevoegen aan uw tekst, die alleen eerder mogelijk zou zijn door een aantal Photoshop-filters toe te passen en als een afbeelding op te slaan. Het SVG-filter gebruiken, blijft de tekst toegankelijk en selecteerbaar, omdat het nog steeds slechts een normaal tekstelement op uw pagina is.

De code hier zal een verplaatsingskaart maken naar tekst die ook een alfakaart bevat om het waterig te laten verschijnen en het thema van de pagina in te passen. Dan wordt er een ander filter gemaakt dat een menu verschijnt als watervlekken, die iets aan elkaar plakken, maar aan elkaar blazen terwijl ze verder weggaan. Nogmaals, dit houdt bij het thema van deze pagina en toont twee creatieve manieren om SVG-filters toe te passen op andere inhoud.

Geïnteresseerd in het leren van meer over SVG? Bekijk ons ​​artikel over Alles wat u moet weten over SVG op internet ​U kunt ook interesse toevoegen aan uw sites met een van deze cool CSS-animatievoorbeelden ​

• Download de bestanden Voor deze tutorial van Filesilo

01. Ga aan de slag

Ten eerste moet u de projectbestanden downloaden met behulp van de link direct hierboven. Als je dat hebt gedaan, sleept je de begin Projectmap op uw code IDE en open de index.html bladzijde. U zult zien dat er al enkele pagina-inhoud is die al is geschreven. De hoofdsectie moet worden gemaakt en dit bevat de kop die wordt beïnvloed door een SVG-filter. Voeg hier de code toe, net in de lichaam label.

 & lt; div class = "BG" & GT;
& LT; DIV-klasse = "Midden" & GT;
& lt; H2 Class = "Headline" & GT; onderwater
Adventure Park & ​​LT; / H2 & GT;
& LT; DIV-klasse = "Intro_block" & GT; 

02. Sluit de koptekst

Nu is de koptekst afgewerkt, met alle tekst hiervoor. Als u op dit moment uw pagina in de browser bekijkt, ziet u een waterafbeelding met wat tekst erop. De kop, die nog steeds niet wordt geëstyleerd, wordt ingeschakeld en laat het SVG-filter erop worden toegepast.

 & LT; H3 Class = "Subhead" & GT; ervaar de oceaan
& lt; br & gt; als nooit tevoren & lt; / h3 & gt;
& lt; p class = "intro" & gt; onderwater
Adventure Park is een ervaring
ontlof alles wat je ooit hebt
had. Reizen naar de diepten van
de oceaan en lopen tussen de
SEA LIFE! & LT; / P & GT;
& LT; / DIV & GT;
& LT; / DIV & GT;
& LT; / DIV & GT; 

03. Maak een SVG-filter aan

De SVG-code kan overal op de pagina worden toegevoegd, maar zoals het niet zal worden gezien, kan het een goed idee zijn om het onderaan te plaatsen, vóór het afsluitende lichaamstag. Het SVG-filter creëert turbulentieruis. Let op het filter heeft een ID - dit is wat de CSS hiermee in staat stelt dit toe te passen op een ander element op de pagina.

 & lt; svg xmlns = "http://www.w3.org/2000/svg" & GT;
& LT; Filter ID = "DisplacementFilter" & GT;
& LT; Faturbulence Type = "Turbulentie"
basefrequentie = "0.004" Numoctaves =
"2" resultaat = "turbulentie" / en GT;
& LT; / FILTER & GT;
& LT; / SVG & GT; 

04. Verberg de SVG

Ga naar de PAGINA.CSS Bestand nu, en boven alle CSS-code voor de rest van de pagina is waar onze nieuwe CSS gaan. Hier wordt de SVG ingesteld om helemaal niet op de pagina weer te geven. Het tag van de kop twee is ingesteld om het juiste lettertype op te hebben.

 SVG {
Geen weergeven;
​
H2 {
FONT-SIZE: 5.5VW;
Font-familie: 'Crete Round', Serif;
} 

05. Toevoegen aan de koplijn

De lijnhoogte is ingesteld op nul omdat later de kop wordt geanimeerd, dus het hebben van controle over de schaal op de pagina is belangrijk. Het krijgt ook wat vulling, zodat het met de juiste hoeveelheid ruimte eromheen zit en de kleur is veranderd.

. Geestlijn {
Lijnhoogte: 0;
Display: Inline-Block;
Vulling: 70px;
Kleur: #CCFFFF; 

06. Maak de kop af

Bij het afmaken van de kop van de kop van de volgende regel is de volgende regel de verplaatsingsfilter ID in de SVG aan de tekst. De Vertaal3d zorgt ervoor dat de tekst hardware wordt versneld. De schaal wordt enigszins veranderd om ervoor te zorgen dat wanneer de verplaatsing wordt toegepast, het recht ziet.

 Filter: URL (#DisplacementFilter);
Transformeren: Translate3D (0, 0, 0);
Transformeren: Schaal (1.8) Rotatie (-2DEG);
} 

07. Maak het verplaatsen

Als u het filter in dit stadium test, vervangt de turbulentie volledig de tekst. Dat is gemakkelijk te repareren. Ga terug naar de filtercode in de pagina van de index.html. Dit neemt de turbulentie en de grafische bron, die de tekst is en past het als een verplaatsingsfilter toe. Probeer de basisfrequentie en het aantal octaven in de turbulentie te veranderen.

 & lt; fedisplacementmap in2 = "turbulentie" in = "
SourcoGraphic "Scale =" 30 "Xchannelselector =" R "
YCHANNELSELECTOR = "G" Resultaat = "DISP" / GT; 

08. verzachten de randen

De randen zien er een beetje hard uit voor een waterig effect. Dat kan worden genezen met een Gauss-wazig. Voeg de code toe na de verplaatsingskaart. Wanneer u de pagina vernieuwt, is het absoluut de tekst wazig, maar de verplaatsing is verdwenen. Nogmaals, dit zijn elementen die kunnen worden opgelost op de manier om het effect te creëren.

 & lt; fegaussiblur in = "Sourcegraphic"
StdDeviation = "15" Resultaat = "BLR" / & GT; 

09. Composiet de twee

Voeg hier de composietlijn toe onder de vorige Gaussische vervaging. Je zult zien dat dit de vervaging en de verplaatsing samen combineert en ook een waterig doorschijnend effect op de tekst creëert. Het is een manier gegaan om de randen te verzachten, maar niet genoeg. Het zou goed zijn als de oorspronkelijke blur hierin zou kunnen worden toegevoegd.

 & LT; FECOMPOSITE IN = "BLR" IN2 = "DISP" Operator = "in" resultaat = "COMP" / GT; 

10. Voeg de wazig samen

Een samenvoeging kan het eindresultaat van de composiet die wordt samengevoegd met het vervagingseffect. Dit lijkt nu erop dat het past bij de achtergrondafbeelding en lijkt te passen bij de lijnen van het licht dat door het water komt. Het beste deel van de tekst is dat het nog steeds selecteerbaar en deel uitmaakt van de pagina, in tegenstelling tot als u dit in Photoshop hebt gemaakt.

 & lt; beurge result = "final" & GT;
& LT; FEMERGENODE IN = "BLR" / & GT;
& LT; FEMERGENODE IN = "COMP" / GT;
& lt; / beurge & gt; 

11. Maak een animatie

Ga terug naar de PAGINA.CSS Bestand en voeg de sleutelframes toe zoals hier wordt weergegeven. Dit zal gewoon de lettergrootte van een zero verticale breedte opschalen naar een 5,5 verticale breedte. Aan het begin wordt dit op de kop aangebracht, zodat de tekst omhoog en op zijn plaats op het scherm schaalt. Naarmate de tekst beweegt, verandert de verplaatsing ook over de lengte, waardoor een waterige rimpeling wordt gegeven.

 @KeyFrames Scaler {
van {
FONT-SIZE: 0VW;
​
naar {
FONT-SIZE: 5.5VW;
​
} 

12. Verander de H2-stijl

De H2 Stijl is eerder toegevoegd in stap 4. Vervang die code door deze nieuwe code, die de CSS-animatie meer dan vier seconden aan de kop toevoegen. De animatie stopt en houdt vast op het laatste keyframe. Sla dit op en test deze in de browser om de tekst op zijn plaats te zien.

 H2 {
Lijnhoogte: 0;
FONT-SIZE: 0VW;
Animatienaam: Scaler;
Animatie-duur: 4s;
Animatie-vulmodus: vooruit;
Font-familie: 'Crete Round', Serif;
} 

13. Voeg navigatie toe

Laten we nu een geschikte waterblob-geïnspireerde animatie maken met een ander SVG-filter. Voeg de volgende navigatie-inhoud toe aan de bovenkant van het lichaamscode, voordat de kop die is gestart in de eerste stap van de tutorial. Dit maakt de basisprincipes van een Hamburger-menu in een cirkel.

& LT; NAV-klasse = "Menu" & GT;
& lt; invoer type = "selectievakje" href = "#" klasse =
"MENU-OPEN" NAME = "MENU-OPEN" ID = "MENU-
open "/ & GT;
& lt; label klasse = "menu-open-knop"
voor = "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. Voltooi de navigatie

Nu kunnen de resterende navigatie-elementen worden toegevoegd. Dit maakt ook gebruik van de Font Awesome Open Source Icon Library, die is toegevoegd aan het hoofdgedeelte om te koppelen van de CDN van deze bibliotheek. Elk menu-circulaire element heeft een pictogram erin.

 & lt; een href = "#" class = "menu-item" & GT; & lt; i class = "fa
FA-auto "& GT; & LT; / I & GT; & LT; / A & GT;
& lt; een href = "#" class = "menu-item" & GT; & lt; i
Klasse = "Fa-schip" & GT; & LT; / I & GT; & LT; / A & GT;
& lt; een href = "#" class = "menu-item" & GT; & lt; i
Klasse = "FA FA-MAP" & GT; & LT; / I & GT; & LT; / A & GT;
& lt; een href = "#" class = "menu-item" & GT; & lt; i
Klasse = "Fa-koffer" & GT; & LT; / I & GT; & LT; / A & GT;
& LT; / NAV & GT; 

15. Voeg het nieuwe filter toe

Een ander filter wordt voor dit effect toegevoegd. Voeg in de SVG deze code toe nadat het tag van de slotfilter van de eerder toegevoegd code is toegevoegd. Hier worden de effecten op een zeer vergelijkbare manier opgebouwd. Hierdoor kan het menu eruitzien als kleverige vloeistofvloeistoffen die uit elkaar gaan.

 & LT; Filter ID = "Shadowed-Blob" & GT;
& lt; fegaussiblur in = "SourceGraphic"
Resultaat = "Blur" StdDeviation = "20" / GT;
& LT; Fecolormatrix in = "Blur" -modus =
"Matrix" -waarden = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7 "
Resultaat = "Blob" / & GT;
& lt; fegaussiblur in = "Blob"
StdDeviation = "3" Resultaat = "Shadow" / & GT;
& lt; fecolormatrix in = "Shadow" -modus =
"Matrix" -waarden = "0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 -0.2 "
Resultaat = "Shadow" / GT; 

16. Maak het filter af

De rest van het filter wordt hier toegevoegd, die het effect voltooit dat op elke cirkel van de menu-items wordt geplaatst. Dit zorgt ervoor dat de elementen het vloeibare Blob-effect toegevoegd hebben. Sla deze pagina op en schakel vervolgens over naar het bestand 'Design.css'.

 & lt; feoffset in = "schaduw" DX = "0" dy = "2"
Resultaat = "Shadow" / & GT;
& lt; fecomposite in2 = "schaduw" in = "Blob"
Resultaat = "Blob" / & GT;
& LT; FECOMPOSITE IN2 = "BLOB"
In = "Sourgrovic" resultaat = "Mix" / GT;
& LT; / FILTER & GT; 

17. Pas het filter toe

De CSS-code kan nu aan de verschillende worden toegevoegd ontwerp.css , gewoon om alle navigatie CSS samen op dezelfde plaats te houden. Er is een code toegevoegd, maar hier wordt het filter toegepast op het menu, dat een vast menu is, zodat deze te allen tijde op het scherm aanwezig is.

 .menu {
Filter: URL ("# Shadowed-Blob");
Positie: vastgesteld;
PADING-TOP: 20PX;
Vulling-links: 80px;
Breedte: 650px;
Hoogte: 150px;
Box-sizing: rand-box;
FONT-SIZE: 20PX;
Tekst-uitlijnen: links;
} 

18. Maak het menuwerk

Het menu is ingesteld om onzichtbaar te worden wanneer het menu open is. Het HOVER-element van elk van de menu-items wordt gemaakt, zodat er een wijziging is wanneer de gebruiker hier overheen zweeft. Elk kind van het menu krijgt een overgang van 0,4 seconden wanneer de menu-items terugkeren naar hun oorspronkelijke positie.

 .menu-open {
Geen weergeven;
​
.menu-item: zweven {
Achtergrond: # 47959f;
Kleur: # B2F0F8;
​
.menu-item: nth-kind (3), .menu-item: nth-
kind (4), .menu-item: nth-kind (5), .menu-
Item: nth-kind (6) {
Overgangsduur: 400ms;
} 

19. Voeg een hamburger toe

Het hamburgerpictogram is verhoogd boven de andere elementen door het te veranderen Z-index ​Het menu groeit wanneer de gebruiker hier overheen zweeft en op het menu klikt, krijgt u nu de hamburger om te animeren van drie regels van een hamburger naar een 'x', wat de optie aangeeft om het menu te verwijderen.

 .Menu-open-knop {
Z-index: 2;
Transitie-timing-functie: kubieke-
bezier (0,175, 0,885, 0,32, 1.275);
Overgangsduur: 400ms;
Transformeren: schaal (1.1, 1.1) Translate3D
(0, 0, 0);
Cursor: wijzer;
​
.menu-open-knop: zweven {
Transformeren: schaal (1.2, 1.2) Translate3D
(0, 0, 0);
​

20. Verplaats de elementen

Het eerste menu-item is eigenlijk het derde kind van het menu, want er is een selectievakje en de hamburger ervoor. Door dit toe te voegen, kan het eerste menu-element in positie verplaatsen zodra het menu door de gebruiker wordt geklikt. Elk menu-element gaat met een iets langere tijd uit.

.menu-open: gecontroleerd + .menu-open-knop {
Transitie-timing-functie: lineair;
Overgangsduur: 400ms;
Transformeren: Schaal (0.8, 0.8) Translate3D
(0, 0, 0);
​
.menu-open: gecontroleerd ~ .menu-item {
Transitie-timing-functie: kubieke-
bezier (0,165, 0,84, 0,44, 1);
​
.menu-open: gecontroleerd ~ .Menu-item: nth-kind (3) {
Overgangsduur: 390ms;
Transformeren: Translate3D (110px, 0, 0);
} 

21. Adres de resterende beweging

De resterende menu-elementen worden met verschillende snelheden verhuisd. Dit stelt de elementen in staat om in de vroege stadia van de animatie bij elkaar te houden, die de Blobby Liquid-look geven, met behulp van het SVG-filter. Sla de documenten op en bekijk de afgewerkte resultaten in uw browser.

 .menu-open: gecontroleerd ~ .Menu-item: nth-kind (4) {
Overgangsduur: 490ms;
Transformeren: Translate3D (220px, 0, 0);
​
.menu-open: gecontroleerd ~ .Menu-item: nth-kind (5) {
Overgangsduur: 590ms;
Transformeren: Translate3D (330px, 0, 0);
​
.menu-open: gecontroleerd ~ .menu-item: nth-kind (6) {
Overgangsduur: 690ms;
Transformeren: Translate3D (440px, 0, 0);
} 

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Webdesigner ​ Koop hier nummer 283 of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

• Animate SVG met JavaScript
• De volledige gids voor SVG
• Supercharge SVG-animaties met GSAP