Inhalt
- Bauen e Liichtebengelchen
- Erstellt e verschwommenen Effekt
- Bauen e geiselten Effekt
- Erstellt d'Knuppekaart
- Erstellt e gold geprägte Look
- Schafe vum Drop Shadow
Benotzt CSS Filteren fir Ären Inhalt ze verbesseren mécht Äre Site wierklech. Wat manner bekannt ass ass datt Dir erstaunlech Primitiv baut andeems Dir SVG Filterkomponente kombinéiert an e flotte CSS-Filter deen Äre Site aus der Masse erausstécht. Dës Tutorial féiert Iech duerch de Bau vun engem Multi-Stage-Filter kombinéiert Beleidegung, Onschärft a Kaméidi fir en iwwerraschenden 3D Effekt op Ären Textinhalt ze kreéieren.
- Luet d'Quelldateien fir dësen Tutorial erof.
CSS Filtere sinn e super Tool fir de Wee ze änneren wéi Ären Inhalt op Ärer Säit ugewisen gëtt. Déi pre-canned Effekter sinn aus einfachen Bausteng opgebaut a si super fir onschaarf, Faarfmanipulatioun ënner villen aneren Effekter. Jidd vun dësen Bausteng ass wéi en Zille, deen, wa se zesumme kombinéieren, e schéint Haus bauen. Och besser, Dir kënnt dës Zille selwer zesumme stacken an Är eegen CSS Filter Effekter maachen! Wéi? Gutt, mir sinn amgaang ze tauchen an e puer Effekter ze bauen déi Dir als Inspiratioun fir Är zukünfteg Projete benotze kënnt.
Mir fänke mam SVG un. SVG ass eng Vektorgrafik Sprooch déi an all modern HTML5 Browser gebaut ass. Ee vun de schéinsten Features ass Filteren. SVG enthält eng filteren> Element an eng Rëtsch vu verschiddene Filterprimitiven. D'SVG Filter Primitiver sinn d'Zillen an eisem Baukonsett. Mir stackelen eng Rëtsch vun hinnen zesummen an benotzen se dann op eiser Websäit Säit.
Wann mir eis Zillen an de Filtereffekt opgestallt hunn, dee mir benotze wëllen, kënne mir einfach d'Markup vun CSS bezéien an CSS Selekter benotze fir se op eisen Inhalt anzewenden. Also fänke mir mat engem zimlech einfachen Beispill un, duerno wäerte mir eppes e bësse méi komplex probéieren.
Bauen e Liichtebengelchen
An dësem éischte Beispill wäerte mir e Filter konstruéieren deen mir benotze fir e Glanz ze kreéieren. Mir benotze véier verschidde Filterprimitiven fir eise Liichtebengel ze bauen- feGaussianBlur (wat e verschwommenen Effekt erstellt), feFlood (wat e Gebitt mat zolidd Faarf fëllt), feComposite (déi Pixel matenee vermëschen) an feMerge (deen de gefilterten Inhalt mat eisem Originaltext fusionéiert fir dat lescht Resultat ze produzéieren).
Déi éischt Saach, déi mir fir eise glühenden Text wëlle sinn, ass e Snapshot vum Text ze maachen an a wäiss ze konvertéieren (well spéider benotze mir de wäissen Text fir de Liichteffekt ze kreéieren). De SVG Filtercode fir de wäissen Text ze kreéieren ass dëst:
Filter id = "wäiss"> feFlood Flut-Faarf = "wäiss" /> feComposite in2 = "SourceAlpha" Bedreiwer = "an" Resultat = "wäiss" /> / filter>
Dëse Filter enthält zwee Bausteng. Déi éischt ass den feFlood Filtereffekt deen de Beräich beaflosst dee vum Filter betrëfft mat Wäiss (Filtere benotzen e rechteckegt Off-Screen Bildgebitt fir all Effekt an der Filterkette ze kreéieren). Déi zweet ass den feComposite Filtereffekt, deen benotzt gëtt fir Pixel aus dem Original Inhalt ze kombinéieren an den Output vun engem aneren Filtereffekt mat enger Zort Kombinatiounsregel.
Et ass wichteg hei ze bemierken datt d'SVG Filteren an enger fixer Uerdnung funktionnéieren, sou datt se an enger Sequenz zesummeketten. Wa mir dee Filter op eisen Inhalt uwenden, ass den feFlood Filter Effekt leeft als éischt, dann den feComposite Effekt benotzt d'Ausgab vun feFlood wéi säin Input. Am Fall vun feComposite, et benotzt den 'in' Bedreiwer. Dat ass d'Kombinatiounsregel déi seet "e Bild vu mengem Input erstellen mat nëmme Pixel déi am Original Inhalt sinn". Also et mécht eng Kräizung an der Mathematik. D'Resultat vun dësem Filter ass eist wäiss iwwerschwemmt rechteckegt Bild maskéiert vun alles wat et ugewannt huet.
An dësem Fall kréie mir e maskéiert Resultat vu wäissen Text. De Wee wéi mir dëse Filter op eise Webinhalt uwenden, ass en CSS Selector ze benotze fir Inhalt ze wielen dat mir betraff wëlle sinn. E Beispill vun dësem kéint eppes sinn wéi:
.wäiss {-webkit-Filter: url (#wäiss); Filter: URL (#wäiss); }
Dëst géif de Filter op alles mat enger CSS Klass vu 'wäiss' uwenden. Natierlech wa mir probéiert hunn dat op eng eidel Säit anzesetzen wäerte mir wäiss op engem wäissen Hannergrond molen (net ganz nëtzlech), also loosst eis eng Hannergrondfaarf derbäi fir ze kucken wat mir kréien:
.bluebg {Hannergrond-Faarf: Liichtblo; } div class = ”bluebg”> h1 class = ”white”> WHITE GLOW FILTER / h1> / div>
Elo datt mir d'Fundament Schrëtt gemaach hunn fir en zweestufege Filter ze bauen an en op eise Websäit Textinhalt anzewenden, ass et Zäit e puer Effekter derbäizefügen.
Erstellt e verschwommenen Effekt
Fir eisen Text Liichteffekt ze maachen, musse mir de wäisse Text aus eiser Filterkette uewen ergräifen a verwëschen. Dat wäert d'Basis fir de Glanz ronderëm den Text ginn. Fir déi verschwommen Versioun ze kreéiere benotze mir:
filter id = ”whiteblur”> feFlood flood-color = ”white” /> feComposite in2 = ”SourceAlpha” operator = ”in” /> feGaussianBlur stdDeviation = ”4” /> / filter>
Wéi Dir kënnt gesinn, hu mir en zousätzlechen Effekt benotzt - feGaussianBlur. Deen Effekt hëlt de wäisse Text dee mir mat eisem fréiere Filter erstallt hunn a mécht et fuzzy mat dësem Markup:
.whiteblur {-webkit-filter: url (#whiteblur); filter: url (#whiteblur); } div class = ”bluebg”> h1 class = ”whiteblur”> WHITE GLOW FILTER / h1> / div>
Mir musse verschwommen Resultat verbesseren fir e bësse méi hell ze sinn. Fir dat ze maachen, benotze mir de feComponentTransfer Effekt. Dat ass e Filtereffekt deen eis léisst mat de Faarwen an Alpha Kanäl an eisem Offscreen Bild op all méiglech Weeër spillen.
Mir ginn de verschwonnene Bild méi hell andeems den Alpha Kanal geännert gëtt. Also elo gesäit eis Filterkette aus:
filter id = "whitetransfer"> feFlood flood-color = "white" /> feComposite in2 = "SourceAlpha" operator = "in" /> feGaussianBlur stdDeviation = "4" /> feComponentTransfer> feFuncA type = "linear" Hang = "3 ”Offänken =” 0 ”/> / feComponentTransfer> / filter>
Dir mierkt datt mir de benotzt hunn feFuncA Effekt, deen den Alpha Kanal ännert andeems hie säi Wäert mat dräi multiplizéiert (den Hang Argument).
Mir féieren dann dee Filter mat der Markéierung wéi hei ënnendrënner:
Whitetransfer {-webkit-filter: url (# whitetransfer); Filter: url (#Whitetransfer); } div class = ”bluebg”> h1 class = ”whitetransfer”> WHITE GLOW FILTER / h1> / div>
Alles wat mir brauchen ze maachen ass d'Resultater vun eisem Filtereffekt mat dem Originaltext ze kombinéieren, op deen mir et mat der Benotzung vum feMerge Filter Effekt.
Déi lescht Versioun vun eiser Filterkette gesäit aus wéi:
filter id = "whiteglow"> feFlood flood-color = "white" /> feComposite in2 = "SourceAlpha" operator = "in" /> feGaussianBlur stdDeviation = "4" /> feComponentTransfer> feFuncA type = "linear" Hang = "3 ”Intercept =” 0 ”/> / feComponentTransfer> feMerge> feMergeNode /> feMergeNode in =” SourceGraphic ”/> / feMerge> / filter>
An da kënne mir et op eis Markup uwenden:
.whiteglow {-webkit-filter: url (#whiteglow); filter: url (#whiteglow); } div class = ”bluebg”> h1 class = ”whiteglow”> WHITE GLOW FILTER / h1> / div>
Bauen e geiselten Effekt
Dëst zweet Beispill benotzt eng ganz Rëtsch vu Filtereffekter fir en 3D ausgesichte Meiseleffekt aus eisem Textinhalt ze kreéieren. D'SVG Filter Effekter déi hei benotzt ginn enthalen zoufälleg Kaméidi, Morphologie, Beliichtung a méi. Maacht Iech keng Suergen, si klénge beängschtegend awer si wierklech einfach ze benotzen.
De Wee wéi dëse Filter funktionnéiert ass duerch Kombinatioun vun dräi funktionnelle Schrëtt, déi all eng Rei verschidde Filtereffekter benotzt. Fir datt et funktionnéiert maache mir einfach folgend:
- Konvertéiert e Bild an eng 'Bump Map' (kuckt d'Säit vis-à-vis fir méi Informatioun).
- Erstellt en geprägte Look aus eisem Originaltext.
- Erstellt en Drop Shadow deen eisen 3D Look verbessert.
Erstellt d'Knuppekaart
Bump Kaarte ginn an 3D Spiller benotzt. Betruecht se als eng rau Textur wéi Stoff oder e Biergzuch, wou all Pixel eng aner Héicht duerstellt.
Fir d'Bump Kaart ze kreéieren, hu mir e ganze Koup Filtereffekter zesummegesat. Hei de Beispillcode:
filter id = "bumps"> feTurbulence type = "turbulence" baseFrequency = "0.1" numOctaves = "2" result = "texture" /> feMerge result = "textureAndGraphic"> feMergeNode /> feMergeNode in = "SourceGraphic" /> / feMerge > feColorMatrix Typ = "luminanceToAlpha" in = "texture" result = "textureMap" /> feGaussianBlur in = "SourceAlpha" stdDeviation = "6" result = "blur" /> feDiffuseLighting in = "textureMap" surfaceScale = "2" lighting- Faarf = "wäiss" diffusConstant = "1" Resultat = "HannergrondDiff"> feSpotLight id = "SpotLight" x = "50" y = "50" z = "150" pointsAtX = "150" pointsAtY = "150" pointsAtZ = " 0 "specularExponent =" 8 "/> / feDiffuseLighting> feDiffuseLighting in =" blur "surfaceScale =" 6 "lightingcolor =" white "diffuseConstant =" 1.2 "result =" foregroundDiffAll "> feDistantLight id =" distantLight "azimuth =" - 135 ”Elevation =” 40 ”/> / feDiffuseLighting> feComponentTransfer> feFuncR type =” gamma ”amplitude =” 1 ”exponent =” 3 ”offset =” 0 ”/> feFuncG type =” gamma ”amplitude =” 1 ”exponent =” 3 "Offset =" 0 "/> feFuncB Typ =" Gamma "Amplitude =" 1 "Exponent =" 3 "Offset =" 0 " /> / feComponentTransfer> feComposite Bedreiwer = "an" in2 = "SourceAlpha" /> feConvolveMatrix Uerdnung = "3" kernelMatrix = "0,0625 0,0625 0,0625 0,0625 0,5 0,0625 0,0625 0,0625 0,0625" Resultat = "VirdergrondDiff" /> / Filter>
Mir hunn e puer nei Bausteng bäigesat: feTurbulenz, feColorMatrix, feDiffuseLighting an feSpotLight. Déi genau Detailer vun all de Parameteren zu dëse Filtere sinn e bësse méi wäit wéi dësen Tutorial, awer Dir hutt eng gutt Iddi wéi Dir Effekter upasst.
Probéiert dëse Filter ze huelen an en op dës Markéierung anzesetzen:
.Bumps {-webkit-filter: url (#bumps); Filter: URL (#Bumps); } div> h1> CHISELLED EFFECT / h1> / div>
Erstellt e gold geprägte Look
Fir eng flott goldfaarweg Versioun vun eisem styléierten Text mat engem flotte 3D Look ze maachen, benotze mir e puer méi Filtereffekter mat der Benotzung vun der feComponentTransfer Effekt zesumme mat e puer méi feComposite an feBlend Effekter.
Den feBlend Effekt gëlt Faarfmixmodi déi a ville Desktopapplikatioune wéi Photoshop an Inkscape benotzt ginn, déi et erlaben komplex Faarfmëschungseffekter fir all méiglech flott Resultater ze benotzen. Am Fall vum Goldfilter fänke mir mat der Verännerung vun der Füllfaarf vun eisem Originaltext Gold mat der CSS Faarfbesëtz z'änneren. Da gëlle mir feBlend mat 'Bildschirm' a 'multiplizéieren', wat eis d'Faarwen aus all Schicht kombinéiere léisst a faarweg Wäerter vun de Pixel a jidderengen vun den Filterinputbiller multiplizéieren. De Code fir de Gold geprägte Look ze generéieren ass verfügbar fir hei erofzelueden.
Schafe vum Drop Shadow
Schlussendlech fir eisen styleschen Text e wierklech flotten 3D Look ze ginn, kënne mir en Drop Shadow mat Filtereffekter erstellen. Fir de Schatten ze kreéieren dee mir benotzen feMorphologie (wat den Inputbild verdënnt oder erodéiert), feGaussianBlur (wat mir fir d'Glanzbeispiel benotzt hunn), feOffset (wat en Zwëschenbild verréckelt) an eis vertrauenswierdeg feComposite fir dat Ganzt erëm zesummenzebréngen.
De Filter Effekt Code fir den Drop Shadow kann hei erofgeluede ginn. Da benotze mir d'Resultat op eis Markup:
.Bumps {-webkit-filter: url (#bumps); Filter: URL (#Bumps); } div class = "bumps"> h1> CHISELLED EFFECT / h1> / div>
Wat super ass iwwer Filtereffekter ass datt se nëmme vun Ärer Fantasi limitéiert sinn. Probéiert all SVG Filter Effekt Bausteng a kombinéiert se op irgendeng Manéier wéi Dir gär all méiglech Filterketten erstallt déi Dir duerch CSS benotze kënnt.
Mat CSS Filtere kënnt Dir Iech mat der iwwerraschender, opfälleger visueller Effekt aus der Masse erausstierzen fir Är Site opmierksam ze maachen.
Wierder: Alex Danilo
Dësen Artikel erschéngt ursprénglech an der Net Magazin Ausgab 250.
