Aggiungi filtri SVG con CSS

SVG è in circolazione fin dai primi anni 2000, eppure ci sono ancora modi interessanti che i designer stanno trovando per usarlo. In questo tutorial si concentrerà la messa a fuoco sui filtri applicati attraverso SVG - ma invece di applicarli a un'immagine SVG, ti mostreremo come possono essere applicati a qualsiasi contenuto di pagina regolare.

Il modo in cui il filtro viene applicato all'SVG è in realtà attraverso CSS, dicendolo a quale ID ha il filtro. Usando quella stessa idea, il filtro può essere applicato al testo regolare, ad esempio. La parte buona di questo è che puoi aggiungere un grande aspetto grafico al tuo testo, che sarebbe stato solo precedentemente possibile applicando un numero di filtri Photoshop e salvando come immagine. Usando il filtro SVG, il testo rimane accessibile e selezionabile, poiché è ancora solo un normale elemento di testo sulla tua pagina.

Il codice qui creerà una mappa di spostamento per il testo che contiene anche una mappa alfa per farla apparire acquosa e adatta al tema della pagina. Quindi verrà creato un altro filtro che fa apparire un menu come Blob dell'acqua, che si attaccano leggermente insieme ma Blob a parte mentre si muovono più lontano. Di nuovo questo tiene con il tema di questa particolare pagina e mostra due modi creativi per applicare i filtri SVG ad altri contenuti.

Interessato ad imparare di più su svg? Dai un'occhiata al nostro articolo su Tutto ciò che devi sapere su svg sul web . In alternativa, aggiungi un po 'di interesse per i tuoi siti con uno di questi fantastici Esempi di animazione CSS. .

• Scarica i file. Per questo tutorial da filelio

01. Inizia

Innanzitutto, è necessario scaricare i file di progetto utilizzando il link direttamente sopra. Una volta fatto, trascina il inizio Cartella del progetto sul tuo codice IDE e apri il index.html. pagina. Vedrai che ci sono alcuni contenuti di pagina già scritti. La sezione intestazione deve essere creata, e questo conterrà il titolo che sarà influenzato da un filtro SVG. Aggiungi il codice qui, appena dentro il corpo etichetta.

 & lt; div class = "bg" e gt;
& lt; div class = "middle" & gt;
& lt; h2 class = "headline" e gt; sott'acqua
Avventura Park & ​​Lt; / H2 & GT;
& lt; div class = "intro_block" & gt; 

02. Chiudi l'intestazione

Ora l'intestazione è finita, con tutto il testo per questo in posizione. Se si visualizza la tua pagina nel browser al momento, vedrai un'immagine d'acqua con un po 'di testo su di esso. Il titolo, che è ancora attualmente non condizionato, sarà in stile e ha il filtro SVG applicato ad esso.

 & lt; H3 Class = "sottotaccine" e GT; sperimentare l'oceano
& lt; BR & GT; come mai prima e lt; / h3 & gt;
& lt; p class = "intro" e gt; sott'acqua
L'avventura Park è un'esperienza
Unlinke tutto ciò che hai mai
aveva. Viaggiare verso le profondità di
l'oceano e camminare tra i
Sea Life! & Lt; / P & GT;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. Creare un filtro SVG

Il codice SVG può essere aggiunto ovunque nella pagina, ma poiché non sarà visto, può essere una buona idea posizionarla in basso, prima del tag del corpo di chiusura. Il filtro SVG crea rumore di turbolenza. AVVISO Il filtro ha un ID - Questo è ciò che consente al CSS di applicarlo a un altro elemento sulla pagina.

 & lt; svg xmlns = "http://www.w3.org/2000/svg" & gt;
& lt; filtro id = "dislocamentfilter" e gt;
& lt; feturbulenza tipo = "turbolenza"
Basfrequency = "0.004" Numoctaves =
Risultato "2" = "turbolenza" / & gt;
& lt; / filter & gt;
& lt; / svg & gt; 

04. Nascondi il SVG

Passare al Page.css. File ora, e soprattutto il codice CSS per il resto della pagina sarà dove il nostro nuovo CSS andrà. Qui l'SVG è impostato per non visualizzato sulla pagina. L'intestazione Due tag è impostato per avere il tipo di carattere destro applicato ad esso.

 svg {
display: nessuno;
}
H2 {
Font-Dimensione: 5,5 VW;
Fammon-family: 'Creta Round', serif;
} 

05. Aggiungi al titolo

Il altezza della linea È impostato su zero perché in seguito il titolo sarà animato, quindi avere il controllo sul suo ridimensionamento sulla pagina è importante. Ha anche dato un po 'di imbottitura in modo che si sieda con la giusta quantità di spazio intorno ad esso e il colore è cambiato.

 .Headline {
Altezza della linea: 0;
display: blocco in linea;
Imbottitura: 70px;
Colore: #CCFFFF; 

06. Termina il titolo

Nel finire la classe del titolo, la riga successiva applica il DisplacementFilter. ID nell'SVG al testo. Il Traduci3d. Assicura che il testo diventa hardware accelerato. La scala viene cambiata leggermente per assicurarsi che quando si applica il dislocamento.

 Filtro: URL (#DisplacementFilter);
Trasforma: translate3d (0, 0, 0);
Trasforma: Scaley (1.8) Rotey (-2DEG);
} 

07. fallo spostarlo

Se si verifica il filtro in questa fase la turbolenza sostituisce completamente il testo. È facile da sistemare. Torna al codice del filtro nella pagina INDEX.HTML. Questo prende la turbolenza e il grafico sorgente, che è il testo e lo applica come filtro di spostamento. Prova a cambiare la frequenza di base e il numero di ottave nella turbolenza.

 & lt; fedisplacementmap in2 = "turbolenza" in = "
SourceGraphic "Scale =" 30 "XChannelselector =" r "
YChannelselector = "G" Risultato = "Disp" / & GT; 

08. Ammorbidire i bordi

I bordi sembrano un po 'duri per un effetto acquoso. Che può essere curato con una sfocatura gaussiana. Aggiungi il codice dopo la mappa di spostamento. Quando si aggiorna la pagina, ha sicuramente sfocato il testo ma lo spostamento è sparito. Di nuovo questi sono elementi che possono essere fissati sulla strada per creare l'effetto.

 & lt; fegaussianbur in = "sourcegraphic"
stddeviation = "15" Risultato = "BLR" / & GT; 

09. Composite i due

Aggiungere la linea composita qui sotto la precedente sfocatura gaussiana. Vedrai che questo combina la sfocatura e lo spostamento insieme, e crea anche un effetto traslucido acquoso al testo. È andato in qualche modo per ammorbidire i bordi, ma non abbastanza. Sarebbe bello se la sfocatura originale potrebbe essere aggiunta in questo.

 & lt; fecomposite in = "Blr" IN2 = "Disp" Operator = "in" Risultato = "Comp" / & GT; 

10. Unisci la sfocatura

Un'operazione di unione consente al risultato finale del composito di essere fuso con l'effetto sfocatura. Questo sembra ora si adatta all'immagine di sfondo e sembra adattarsi alle linee di luce che arrivano attraverso l'acqua. La parte migliore del testo è che è ancora selezionabile e parte della pagina, a differenza di se lo hai creato in Photoshop.

 & lt; femerge Risultato = "Final" & GT;
& lt; femergenode in = "Blr" / & gt;
& lt; femergenode in = "comp" / & gt;
& lt; / feamerge & gt; 

11. Creare un'animazione

Torna al Page.css. file e aggiungi i fotogrammi chiave come mostrato qui. Ciò significa solo la dimensione del carattere da una larghezza verticale zero a una larghezza verticale di 5,5. All'inizio ciò verrà applicato al titolo, in modo che il testo ridimensiona e in posizione sullo schermo. Mentre il testo si muove, lo spostamento cambierà anche sulla lunghezza, dando un'increspatura acquosa.

 @KeyFramas Scaler {
a partire dal {
Font-Dimensione: 0VW;
}
per {
Font-Dimensione: 5,5 VW;
}
} 

12. Cambia lo stile H2

Il H2. Lo stile è stato precedentemente aggiunto al punto 4. Sostituire quel codice con questo nuovo codice, che aggiunge l'animazione CSS su quattro secondi alla rubrica. L'animazione si ferma e si tiene sull'ultimo fotogramma chiave. Salva questo e testarlo nel browser per vedere il testo increspato in posizione.

 H2 {
Altezza della linea: 0;
Font-Dimensione: 0VW;
Nome dell'animazione: scaler;
Durata dell'animazione: 4s;
Animazione-Modalità di riempimento: avanti;
Fammon-family: 'Creta Round', serif;
} 

13. Aggiungi la navigazione

Ora creiamo un'animazione di ispirazione Blob idonea adatta utilizzando un altro filtro SVG. Aggiungere il seguente contenuto di navigazione nella parte superiore del codice del corpo, prima dell'intestazione iniziata nel primo passo del tutorial. Questo creerà le basi di un menu di hamburger in un cerchio.

 & lt; nav class = "menu" e GT;
& lt; Input Type = "Checkbox" HREF = "#" Class =
"Menu-Apri" NAME NAME = "MENU-Apri" ID = "MENU-
Aperto "/ & GT;
& lt; etichetta class = "menu-tasto aperto"
per = "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; / etichetta e GT; 

14. Finisci la navigazione

Ora è possibile aggiungere gli elementi di navigazione rimanenti. Questo utilizza anche il font fantastico Biblioteca icona open source, che è stata aggiunta alla sezione della testa da collegare dal CDN di questa libreria. Ogni elemento circolare del menu avrà un'icona dentro di esso.

 & lt; a href = "#" class = "menu-elemento" e GT; & lt; i class = "fa
Fa-car "& gt; & lt; / i & gt; & lt; / A & GT;
& lt; a href = "#" class = "menu-elemento" & gt; & lt; i
class = "fa fa-nave" & gt; & lt; / i & gt; & lt; / A & GT;
& lt; a href = "#" class = "menu-elemento" e gt; & lt; i
class = "fa fa-map" & gt; & lt; / i & gt; & lt; / A & GT;
& lt; a href = "#" class = "menu-elemento" & gt; & lt; i
class = "fa fa-vahitecase" & gt; & lt; / i & gt; & lt; / A & GT;
& lt; / nav & gt; 

15. Aggiungi il nuovo filtro

Un altro filtro verrà aggiunto per questo effetto. Nel SVG, aggiungi questo codice dopo il tag del filtro di chiusura del codice aggiunto in precedenza. Qui gli effetti sono costruiti in un modo molto simile per in precedenza. Ciò consentirà al menu di assomigliare ai blob appiccicosi di liquido in movimento.

 & lt; filtro id = "ombreggiato-blob" e GT;
& lt; fegaussianbur in = "sourcegraphic"
Risultato = "sfocatura" stddeviation = "20" / & gt;
& lt; fecolermatrix in = "sfocatura" modalità =
Valori "Matrix" = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 0 18 -7 "
Risultato = "BLOB" / & GT;
& lt; fEGAUSSISIANBUR IN = "BLOB"
stddeviation = "3" risultato = "ombra" / & gt;
& lt; fecolermatrix in = "ombretta" modalità =
Valori "Matrix" = "0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 1 -0.2 "
Risultato = "Shadow" / & GT; 

16. Finisci il filtro

Qui viene aggiunto il resto del filtro, che completa l'effetto che verrà posizionato su ciascun cerchio delle voci del menu. Ciò farà aggiungere gli elementi di avere l'effetto Blob liquido aggiunto. Salva questa pagina e quindi passare al file 'Design.css'.

 & lt; Feoffset in = "Shadow" DX = "0" dy = "2"
Risultato = "Shadow" / & GT;
& lt; fecomposite in2 = "shadow" in = "blob"
Risultato = "BLOB" / & GT;
& lt; fecomposite in2 = "blob"
In = Risultato "SourceGraphic" = "Mix" / & GT;
& lt; / filter & gt; 

17. Applicare il filtro

Il codice CSS può ora essere aggiunto al diverso design.css. , solo per mantenere insieme tutto il CSS di navigazione nello stesso posto. Qualche codice è stato aggiunto, ma qui il filtro viene applicato al menu, che sarà un menu fisso in modo che sia presente sullo schermo in ogni momento.

 .menu {
Filtro: URL ("# ombreggiato-blob");
Posizione: fissa;
imbottitura: 20px;
Imbottitura-sinistra: 80px;
Larghezza: 650px;
Altezza: 150 px;
ridimensionamento della scatola: Border-Box;
Dimensione del carattere: 20px;
Allineare il testo: a sinistra;
} 

18. Fai il lavoro del menu

Il menu è impostato per attivare invisibile quando il menu è aperto. L'elemento mouse di ciascuna delle voci del menu viene creata in modo che vi sia una modifica quando l'utente aleggia su questo. Ogni figlio del menu viene fornita una transizione di 0,4 secondi quando le voci di menu stanno tornando alla loro posizione originale.

 .Menu-Open {
display: nessuno;
}
.Menu-Articolo: Hover {
Sfondo: # 47959F;
Colore: # B2F0F8;
}
.menu-elemento: nth-child (3), .menu-elemento: nth-
Bambino (4), .Menu-Articolo: Nth-Child (5), .Menu-
Articolo: Nth-Child (6) {
Transition-Durata: 400ms;
} 

19. Aggiungi un hamburger

L'icona Burger è elevata sopra gli altri elementi cambiando z-index. . Il menu cresce quando l'utente supera questo e facendo clic sul menu ora riceverà l'hamburger per animare da tre linee di un hamburger a una "X", indicando l'opzione per rimuovere il menu.

 .Menu-Open-Pulsante {
z-index: 2;
Transition-Timing-Function: Cubic-
Bezier (0,175, 0,885, 0,32, 1.275);
Transition-Durata: 400ms;
Trasforma: scala (1.1, 1.1) Translate3D
(0, 0, 0);
Cursore: puntatore;
}
.MENU-PULSANTE APERTO: Hover {
Trasforma: scala (1.2, 1.2) Translate3D
(0, 0, 0);
}

20. Sposta gli elementi

La prima voce di menu è in realtà il terzo figlio del menu, in quanto c'è una casella di controllo e l'hamburger prima di esso. L'aggiunta di ciò abilita il primo elemento di menu di spostarsi nella posizione una volta che il menu viene cliccato dall'utente. Ogni elemento di menu si trasferirà con un tempo leggermente più lungo.

 .Menu-Open: controllato + .MEnu-Pulsante aperto {
Transition-Timing-Function: lineare;
Transition-Durata: 400ms;
Trasforma: scala (0,8, 0.8) Translate3D
(0, 0, 0);
}
.Menu-Open: controllato ~ .Menu-Item {
Transition-Timing-Function: Cubic-
Bezier (0,165, 0,84, 0,44, 1);
}
.Menu-Open: controllato ~ .Menu-Articolo: NTH-Child (3) {
Transition-Durata: 390ms;
Trasforma: Translate3d (110 px, 0, 0);
} 

21. Indirizzare il movimento rimanente

Gli elementi del menu rimanenti vengono spostati con velocità diverse. Ciò consente agli elementi di attaccare insieme nelle prime fasi dell'animazione, che darà al look liquido Blobby, utilizzando il filtro SVG. Salva i documenti e vedere i risultati finiti nel tuo browser.

 .Menu-Open: controllato ~ .Menu-Articolo: Nth-Child (4) {
Transition-Durata: 490ms;
Trasforma: Translate3d (220 px, 0, 0);
}
.Menu-Open: controllato ~ .Menu-Articolo: NTH-Child (5) {
Transizione-Durata: 590MS;
Trasforma: Translate3d (330px, 0, 0);
}
.Menu-Open: controllato ~ .Menu-Articolo: NTH-Child (6) {
Transition-Durata: 690ms;
Trasforma: Translate3d (440 px, 0, 0);
} 

Questo articolo è stato originariamente pubblicato su Creative Web Design Magazine Web designer . Comprare il problema 283 qui o Iscriviti al web designer qui .

Articoli Correlati:

• Animare svg con javascript
• La guida completa a svg
• SuperCome SVG Animazioni con GSAP