Contenuto
- Costruire un filtro bagliore
- Creare un effetto sfocato
- Costruire un effetto cesellato
- Creazione della mappa di rilievo
- Creazione di un aspetto goffrato oro
- Creazione dell'ombra esterna
L'uso dei filtri CSS per migliorare i tuoi contenuti rende il tuo sito davvero sfrigolante. Ciò che è meno noto è che puoi creare incredibili primitive combinando i componenti del filtro SVG in un filtro CSS di fantasia che farà risaltare il tuo sito dalla massa. Questo tutorial ti guida attraverso la costruzione di un filtro multistadio che combina illuminazione, sfocatura e rumore per creare uno straordinario effetto 3D sul tuo contenuto di testo.
- Scarica i file sorgente per questo tutorial.
I filtri CSS sono un ottimo strumento per cambiare il modo in cui i tuoi contenuti vengono visualizzati sul tuo sito. Gli effetti predefiniti sono costituiti da semplici elementi costitutivi e sono ottimi per le sfocature, la manipolazione del colore e molti altri effetti. Ciascuno di questi elementi costitutivi è come un mattone che, se combinato insieme, costruisce una bella casa. Ancora meglio, puoi impilare questi mattoni insieme da solo e creare i tuoi effetti di filtro CSS! Come? Bene, stiamo per immergerci e costruire un paio di effetti che puoi usare come ispirazione per i tuoi progetti futuri.
Inizieremo guardando SVG. SVG è un linguaggio di grafica vettoriale integrato in tutti i moderni browser HTML5. Una delle sue caratteristiche più interessanti sono i filtri. SVG include un file filtro> elemento e un mucchio di diverse primitive di filtro. Le primitive del filtro SVG sono i mattoni nel nostro set di costruzione. Ne metteremo insieme un po 'e poi li useremo nel contenuto della nostra pagina web.
Una volta che abbiamo accumulato i nostri mattoni nell'effetto filtro che vogliamo utilizzare, possiamo semplicemente fare riferimento al markup da CSS e utilizzare i selettori CSS per applicarlo al nostro contenuto. Quindi iniziamo con un esempio abbastanza semplice, poi in seguito proveremo qualcosa di un po 'più complesso.
Costruire un filtro bagliore
In questo primo esempio, costruiremo un filtro che possiamo utilizzare per creare un bagliore. Useremo quattro diverse primitive di filtro per costruire il nostro filtro bagliore- feGaussianBlur (che crea un effetto di sfocatura), feFlood (che riempie un'area con un colore a tinta unita), feComposite (che mescola i pixel insieme) e feMerge (che fonde il contenuto filtrato con il nostro testo originale per produrre il risultato finale).
La prima cosa che vogliamo per il nostro testo luminoso è scattare un'istantanea del testo e convertirlo in bianco (poiché in seguito utilizzeremo il testo bianco per creare l'effetto bagliore). Il codice del filtro SVG per creare il testo bianco è questo:
filter id = "white"> feFlood flood-color = "white" /> feComposite in2 = operatore "SourceAlpha" = "in" result = "white" /> / filter>
Questo filtro contiene due elementi costitutivi. Il primo è il file feFlood effetto filtro che riempie di bianco l'area interessata dal filtro (i filtri utilizzano un'area dell'immagine fuori schermo rettangolare per creare ogni effetto nella catena del filtro). Il secondo è il file feComposite effetto filtro, che viene utilizzato per combinare i pixel del contenuto originale e l'output di un altro effetto filtro utilizzando una sorta di regola di combinazione.
È importante notare qui che i filtri SVG funzionano in un ordine fisso, quindi sono concatenati insieme in una sequenza. Quando applichiamo quel filtro al nostro contenuto, il file feFlood viene eseguito prima l'effetto del filtro, quindi il file feComposite effetto utilizza l'uscita da feFlood come input. In caso di feComposite, utilizza l'operatore "in". Questa è la regola di combinazione che dice "crea un'immagine dal mio input utilizzando solo i pixel che si trovano all'interno del contenuto originale". Quindi sta creando un'intersezione nella terminologia matematica. Il risultato di questo filtro è la nostra immagine rettangolare inondata di bianco mascherata da qualsiasi cosa a cui viene applicata.
In questo caso, otteniamo un risultato mascherato di testo bianco. Il modo in cui applichiamo questo filtro al nostro contenuto web consiste nell'utilizzare un selettore CSS per scegliere il contenuto che vogliamo essere influenzato. Un esempio di questo potrebbe essere qualcosa del tipo:
.white {-webkit-filter: url (#white); filtro: url (#white); }
Ciò applicherebbe il filtro a qualsiasi cosa con una classe CSS di "bianco". Ovviamente se provassimo ad applicarlo a una pagina vuota dipingeremmo di bianco su uno sfondo bianco (non molto utile), quindi aggiungiamo un po 'di colore di sfondo per vedere cosa otteniamo:
.bluebg {background-color: lightblue; } div class = "bluebg"> h1 class = "white"> WHITE GLOW FILTER / h1> / div>
Ora che abbiamo eseguito i passaggi fondamentali per creare un filtro a due fasi e applicarlo al contenuto del testo della nostra pagina web, è il momento di aggiungere altri effetti.
Creare un effetto sfocato
Per rendere il nostro testo bagliore, dobbiamo prendere il testo bianco dalla nostra catena di filtri sopra e sfocarlo. Questa diventerà la base per il bagliore attorno al testo. Per creare la versione sfocata, usiamo:
filter id = "whiteblur"> feFlood flood-color = "white" /> feComposite in2 = operatore "SourceAlpha" = "in" /> feGaussianBlur stdDeviation = "4" /> / filter>
Come puoi vedere, abbiamo utilizzato un effetto aggiuntivo: feGaussianBlur. Questo effetto prende il testo bianco che abbiamo creato con il nostro filtro precedente e lo fa sembrare sfocato usando questo markup:
.whiteblur {-webkit-filter: url (#whiteblur); filtro: url (#whiteblur); } div class = "bluebg"> h1 class = "whiteblur"> WHITE GLOW FILTER / h1> / div>
Dobbiamo migliorare il risultato sfocato per essere un po 'più luminoso. A tal fine, utilizzeremo il feComponentTransfer effetto. Questo è un effetto filtro che ci consente di giocare con i canali di colore e alfa nella nostra immagine fuori schermo in tutti i modi.
Renderemo più luminosa l'immagine sfocata modificando il canale alfa. Quindi ora la nostra catena di filtri ha il seguente aspetto:
filter id = "whitetransfer"> feFlood flood-color = "white" /> feComposite in2 = operatore "SourceAlpha" = "in" /> feGaussianBlur stdDeviation = "4" /> feComponentTransfer> feFuncA type = "linear" slope = "3 "Intercept =" 0 "/> / feComponentTransfer> / filter>
Noterai che abbiamo utilizzato il feFuncA effetto, che sta modificando il canale alfa moltiplicando il suo valore per tre (l'argomento della pendenza).
Quindi applichiamo quel filtro utilizzando il markup come mostrato di seguito:
whitetransfer {-webkit-filter: url (#whitetransfer); filtro: url (#whitetransfer); } div class = "bluebg"> h1 class = "whitetransfer"> WHITE GLOW FILTER / h1> / div>
Tutto quello che dobbiamo fare è combinare i risultati del nostro effetto filtro con il testo originale a cui l'abbiamo applicato utilizzando il feMerge effetto filtro.
La versione finale della nostra catena di filtri finisce per assomigliare a:
filter id = "whiteglow"> feFlood flood-color = "white" /> feComposite in2 = operatore "SourceAlpha" = "in" /> feGaussianBlur stdDeviation = "4" /> feComponentTransfer> feFuncA type = "linear" slope = "3 "Intercept =" 0 "/> / feComponentTransfer> feMerge> feMergeNode /> feMergeNode in =" SourceGraphic "/> / feMerge> / filter>
E poi possiamo applicarlo al nostro markup:
.whiteglow {-webkit-filter: url (#whiteglow); filtro: url (#whiteglow); } div class = "bluebg"> h1 class = "whiteglow"> WHITE GLOW FILTER / h1> / div>
Costruire un effetto cesellato
Questo secondo esempio utilizza tutta una serie di effetti filtro per creare un effetto cesellato dall'aspetto 3D dal nostro contenuto di testo. Gli effetti del filtro SVG usati qui includono rumore casuale, morfologia, illuminazione e altro ancora. Non preoccuparti, suonano scoraggianti ma sono davvero facili da usare.
Il modo in cui funziona questo filtro è combinando tre passaggi funzionali, ognuno dei quali utilizza un numero di effetti di filtro diversi. Per farlo funzionare, facciamo semplicemente quanto segue:
- Converti un'immagine in una "mappa di rilievo" (vedi la pagina accanto per ulteriori informazioni).
- Crea un aspetto in rilievo dal nostro testo originale.
- Crea un'ombra esterna che esalti il nostro aspetto 3D.
Creazione della mappa di rilievo
Le mappe a sbalzo vengono utilizzate nei giochi 3D. Pensa a loro come a una trama ruvida come un panno o una catena montuosa, dove ogni pixel rappresenta un'altezza diversa.
Per creare la mappa di rilievo, abbiamo messo insieme tutta una serie di effetti di filtro. Ecco il codice di esempio:
filter id = "bumps"> feTurbulence type = "turbulence" baseFrequency = "0.1" numOctaves = "2" result = "texture" /> feMerge result = "textureAndGraphic"> feMergeNode /> feMergeNode in = "SourceGraphic" /> / feMerge > feColorMatrix type = "luminanceToAlpha" in = "texture" result = "textureMap" /> feGaussianBlur in = "SourceAlpha" stdDeviation = "6" result = "blur" /> feDiffuseLighting in = "textureMap" surfaceScale = "2" lighting- color = "white" diffuseConstant = "1" result = "backgroundDiff"> 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 =" distanteLight "azimuth =" - 135 "Elevation =" 40 "/> / feDiffuseLighting> feComponentTransfer> feFuncR type =" gamma "ampiezza =" 1 "esponente =" 3 "offset =" 0 "/> feFuncG type =" gamma "ampiezza =" 1 "esponente =" 3 "offset =" 0 "/> feFuncB tipo =" gamma "ampiezza =" 1 "esponente =" 3 "offset =" 0 " /> / feComponentTransfer> feComposite operator = "in" in2 = "SourceAlpha" /> feConvolveMatrix order = "3" kernelMatrix = "0,0625 0,0625 0,0625 0,0625 0,5 0,0625 0,0625 0,0625 0,0625" result = "foregroundDiff" /> / filter>
Abbiamo aggiunto alcuni nuovi elementi costitutivi: feTurbulenza, feColorMatrix, feDiffuseLighting e feSpotLight. I dettagli esatti di tutti i parametri di questi filtri vanno un po 'oltre questo tutorial, ma avrai una buona idea di come modificare gli effetti.
Prova a prendere questo filtro e ad applicarlo a questo markup:
.bumps {-webkit-filter: url (#bumps); filtro: url (#bumps); } div> h1> EFFETTO SCALPATO / h1> / div>
Creazione di un aspetto goffrato oro
Per creare una bella versione color oro del nostro testo in stile con un bell'aspetto 3D, usiamo alcuni più effetti di filtro usando il feComponentTransfer effetto insieme ad altri feComposite e feBlend effetti.
Il feBlend effect applica le modalità di miscelazione del colore che vengono utilizzate in molte applicazioni desktop come Photoshop e Inkscape, che consentono di utilizzare effetti di miscelazione del colore complessi per tutti i tipi di risultati piacevoli. Nel caso del filtro oro, iniziamo cambiando il colore di riempimento del nostro testo originale in oro utilizzando la proprietà del colore CSS. Quindi applichiamo feBlend utilizzando "screen" e "multiply", che ci consentono di combinare i colori di ogni livello e moltiplicare i valori di colore dei pixel in ciascuna delle immagini di input del filtro. Il codice per generare l'aspetto dorato in rilievo è disponibile per il download qui.
Creazione dell'ombra esterna
Infine, per dare al nostro testo in stile un aspetto 3D davvero piacevole, possiamo creare un'ombra esterna usando gli effetti del filtro. Per creare l'ombra che usiamo feMorfologia (che diluisce o erode l'immagine in ingresso), feGaussianBlur (che abbiamo usato per l'esempio del bagliore), feOffset (che sposta un'immagine intermedia) e il nostro fidato feComposite per rimettere tutto insieme.
Il codice dell'effetto filtro per l'ombra esterna può essere scaricato qui. Quindi applichiamo il risultato al nostro markup:
.bumps {-webkit-filter: url (#bumps); filtro: url (#bumps); } div class = "bumps"> h1> EFFETTO SCALPATO / h1> / div>
La cosa fantastica degli effetti filtro è che sono limitati solo dalla tua immaginazione. Prova tutti gli elementi costitutivi degli effetti di filtro SVG e combinali nel modo che preferisci per creare tutti i tipi di catene di filtri che puoi utilizzare tramite CSS.
L'uso dei filtri CSS può farti distinguere dalla massa con effetti visivi sorprendenti e accattivanti per far notare il tuo sito.
Parole: Alex Danilo
Questo articolo è apparso originariamente nel numero 250 di net magazine.
