I filtri CSS3 sono una derivazione molto interessante di SVG, che ti consente di modificare elementi e immagini HTML applicando sfocatura, luminosità e altro. In questo tutorial, daremo una rapida occhiata a come funzionano esattamente.
Come funziona?
Usando solo CSS possiamo creare degli effetti piuttosto complessi. Possono essere applicati sia alle immagini che agli elementi HTML. La proprietà utilizzata per controllare tutti questi effetti è filtro.
filtro: filtro(valore) ;
Come ci si potrebbe aspettare, questa proprietà richiede l'uso di un prefisso del browser. Ma per ora, solo -webkit-(Chrome e Safari) è l'unico motore del browser che supporta questa proprietà.
Filtro Webkit: filtro(valore) ;
-filtro-moz: filtro(valore) ;
-o-filtro: filtro(valore) ;
-ms-filtro: filtro(valore) ;
Filtrazione
Esistono numerosi filtri, quindi per avere un'idea migliore di ciascuno di essi, diamo un'occhiata a uno per uno. È possibile applicare più filtri allo stesso elemento (separati da uno spazio), ad es. luminosità e sfocatura:
filtro: sfocatura (5px ) luminosità (0,5 ) ;
Ci sono alcuni filtri che non verranno trattati di seguito, ma possono essere facilmente implementati con CSS preesistenti (trasparenza e ombre). Ecco l'immagine originale che useremo per dimostrare come funzionano i filtri:
Mostrerò la foto con il filtro applicato (prima foto) e il risultato del filtro come immagine statica (seconda foto) se stai utilizzando un browser che non supporta i filtri e non può vedere il risultato.
Sfocatura
Hai sempre voluto creare una sfocatura gaussiana per un'immagine o un testo con un solo CSS? Con i filtri puoi farlo! La sfocatura è misurata in pixel, quindi puoi fare qualcosa del genere:
filtro: sfocatura (5px );
// Specifico del browser
-filtro webkit: sfocatura(5px );
-filtro moz: sfocatura(5px );
-o-filtro: sfocatura(5px );
-ms-filtro: sfocatura(5px) ;
Luminosità
La luminosità viene misurata da zero a uno, 1 è la luminosità massima (bianco) e 0 è la luminosità iniziale.
filtro: luminosità(0,2);
// Specifico del browser
-filtro webkit: luminosità(0.2 );
-filtro moz: luminosità(0,2 );
-o-filtro: luminosità(0,2 ) ;
-ms-filtro: luminosità(0.2);
Saturazione
La saturazione è misurata in percentuale.
filtro: saturo (50%);
// Specifico del browser
-filtro webkit: saturato(50% );
-filtro moz: saturo (50% );
-o-filtro: saturato(50% ) ;
-ms-filtro: saturate(50% );
Rotazione del tono
Questo filtro ti permette di cambiare il tono ruotandolo (pensa a una ruota dei colori che poi giri). Si misura in gradi.
filtro: hue-ruota (20 gradi);
// Specifico del browser
-filtro-webkit: hue-rotate(20deg) ;
-filtro moz: tonalità-ruota(20 gradi) ;
-o-filtro: tonalità-ruota(20 gradi) ;
-ms-filtro: hue-rotate(20deg) ;
Contrasto
Il contrasto, ancora, è misurato in percentuale. 100% è l'impostazione predefinita, 0% produrrà un'immagine completamente nera. Qualsiasi cosa oltre il 100% aggiunge contrasto!
filtro: contrasto(150% );
// Specifico del browser
-filtro-webkit: contrasto(150% ) ;
-filtro moz: contrasto(150% ) ;
-o-filtro: contrasto(150% ) ;
-ms-filtro: contrasto(150% ) ;
Inversione
Misurato anche in percentuale. I valori disponibili vanno da 0% a 100%. Stranamente, al momento, webkit non supporta inversioni inferiori al 100%.
filtro: inverti(100%);
// Specifico del browser
-filtro-webkit: invert(100% ) ;
-filtro moz: inverti (100% );
-o-filtro: inverti (100% ) ;
-ms-filtro: inverti (100% ) ;
Sbiancamento
Ancora una volta, specifica la percentuale di cui desideri desaturare l'immagine. I valori disponibili vanno da 0% a 100%.
filtro: scala di grigi (100%);
// Specifico del browser
-filtro webkit: scala di grigi (100% );
-filtro moz: scala di grigi (100% );
-o-filtro: scala di grigi (100% );
-ms-filtro: scala di grigi(100% );
Seppia
Suppongo che questo sia molto utile se vuoi pubblicare qualcosa su Instagram. Anche se presumo anche che non utilizzerai CSS per questo. Ad ogni modo, queste scale di grigi e negativi, in somma, ti permetteranno di aggiungere seppia all'immagine. 100% è la seppia completata, 0% è l'immagine originale.
filtro: seppia (100% );
// Specifico del browser
-filtro webkit: seppia(100% );
-filtro moz: seppia(100% );
-o-filtro: seppia(100% ) ;
-ms-filtro: seppia(100% ) ;
Supporto del browser
| Webkit | Mozilla | Tridente | Presto | |
| Sfocatura | sperimentale | Non | Non | Non |
| Luminosità | ||||
| Saturazione | ||||
| Rotazione del tono | ||||
| Contrasto | ||||
| Inversione | Solo inversione completa |
|||
| Sbiancamento | sperimentale | |||
| Seppia |
In caso di domande, utilizzare il nostro
Il modo più semplice per desaturare un'immagine a colori è con CSS. In genere, il filtro viene applicato a una classe, poiché non è raro creare lo stesso effetto su più immagini:
100 % ) ; }
Anche l'impostazione di una classe immagine è facile:
Aggiunta di un filtro SVG
Il CSS mostrato sopra funziona su tutti i browser moderni, sia desktop che mobili, incluso il browser Microsoft Edge.
Per ottenere lo stesso effetto in Firefox prima della versione 35, dovrai utilizzare un filtro SVG, che creeremo in un file separato chiamato desaturate.svg. Questo file conterrà il seguente codice:
Se il codice SVG sopra sembra un po' intimidatorio e l'array è troppo complesso, non preoccuparti. Questo è uno dei frammenti di codice che ti consigliamo di copiare e incollare semplicemente come ricetta standard per creare un'immagine in bianco e nero.
Insieme a questo file SVG, accanto alla pagina HTML e all'immagine desiderata, il codice CSS sarà integrato con questa riga:
Img.desaturate( filter: grayscale( 100 % ) ; filtro: url (desatura .svg #scala di grigi) ; }
Aggiunta del supporto del browser Internet Explorer
Affinché l'effetto funzioni in Internet Explorer versioni da 6 a 9, applichiamo un semplice filtro proprietario Microsoft:
Img.desaturate (filtro: grigio; filtro: scala di grigi( 100 % ) ; filtro: url (desatura .svg #scala di grigi) ; }
Se devi aggiungere il supporto per i browser legacy sul motore Webkit, estendi il codice in questo modo:
Img.desaturate ( -webkit-filter: grayscale(1 ) ; -webkit-filter: grayscale( 100 % ) ; filtro: grigio filtro: scala di grigi( 100 % ) ; filtro: url (desatura .svg #scala di grigi) ; }
Questo metodo non funziona nelle versioni di Internet Explorer 10 e 11. Se vuoi creare lo stesso effetto visivo in tutti i browser, puoi utilizzare una soluzione Javascript per browser diversi o, ad esempio, lo script Greyscale.js.
Il CSS sopra ci consente di convertire visivamente un'immagine in bianco e nero nel browser al volo, senza dover salvare nuove versioni in Photoshop. Il codice CSS rende anche molto più semplice cambiare l'immagine: ad esempio, se riduciamo la percentuale nei valori della proprietà del filtro dal 100% al 50%, otterremo una miscela dell'effetto di desaturazione e del colore originale Immagine.
Un approccio leggermente più semplice per le versioni precedenti del browser Firefox consiste nell'includere il codice SVG direttamente nel codice CSS senza dover aggiungere nulla a un file e un tag separati
:Img.desaturate( -webkit-filter: grayscale( 100 % ) ; filtro: scala di grigi( 100 % ) ; filtro: grigio filtro: URL ( "dati:immagine/svg+xml;utf8, #scala di grigi") ; }
Traduzione - Scrivania
Ciao. Oggi non sorprenderai nessuno con bellissimi effetti sui siti web. Alcuni lo fanno in Flash da 10 anni, altri non hanno ancora smesso di farlo in Javascript, ma i più avanzati usano CSS3 da molto tempo. Questo è ciò che faremo oggi.
Impariamo come desaturare un'immagine CSS (Grayscale image css) e farlo magnificamente
Quindi, iniziamo in modo semplice, abbiamo bisogno di belle foto, prendiamo questo:
Dobbiamo desaturarlo (desaturare l'immagine CSS - rimuovere i colori, rendere l'immagine in bianco e nero). Per questo (e in effetti per lavorare con la grafica) in CSS3 c'è uno speciale strumento di filtro.
Qui lo applicheremo.
Soluzione: desaturare l'immagine CSS
Disegniamo prima l'immagine:
Quindi scriviamo uno stile per l'immagine:
Img ( -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale( 100%); filtro: grigio; /* IE 6-9 */ )
Ora la nostra immagine sarà in bianco e nero.
Ovviamente puoi fermarti qui, ma è molto più interessante quando l'immagine risponde anche alle azioni dell'utente.
Propongo di fare in modo che quando passi il mouse sopra l'immagine, diventi uniformemente colorata.
In effetti, non è affatto difficile farlo, e non è affatto necessario conoscere Javascript.
Anima CSS immagine desaturata
Aggiungiamo qualcosa al nostro stile precedente:
Img ( -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale( 100%); filter: grigio; /* IE 6-9 */ ) img:hover ( -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter : nessuno; filtro: nessuno; /* IE 6-9 */ )
Ciò consentirà all'immagine di diventare colorata quando ci si passa sopra con il mouse. Useremo anche una transizione CSS3 per animare il processo di dissolvenza:
Img ( -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale( 100%); filter: gray; /* IE 6-9 */ /*Aggiungi codice come questo*/ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition : all 1s; /*codice finale con transizione*/ ) img:hover ( -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter : nessuno; /* IE 6-9 */ )
Il parametro all nella transizione dice che la regola funzionerà per tutti gli stili e il secondo parametro è il tempo di animazione.
Nel primo parametro, puoi specificare una proprietà specifica (ad esempio, altezza, per animare solo l'altezza) e nel secondo, il tempo in secondi (puoi usare le frazioni decimali - 0,1 s).
Le proprietà CSS hanno raggiunto un tale livello di sviluppo da essere in grado di far fronte ad alcune importanti funzioni degli editor di immagini. Un esempio sono i filtri CSS, che possono essere utilizzati per creare bellissimi effetti per le immagini.
Se prima era difficile anche solo immaginarlo, ora quasi tutti i filtri software sono implementati nella tabella a cascata, dalla sfocatura ai modelli di colore artistici.
Tuttavia, i filtri CSS presentano un piccolo inconveniente: non tutti i browser Web supportano gli effetti visivi. Certo, è solo questione di tempo. E quando arriva l'ora "x", gli sviluppatori devono essere pronti. Nel frattempo, considera quanto è già stato implementato al momento.
Supporto browser per filtri CSS
Fondamentalmente, tutti i browser più diffusi, Firefox, Chrome, Opera, hanno una relazione "amichevole" con gli effetti filtro. Cosa non si può dire di IE, che rifiuta completamente di supportare gli effetti, anche nelle ultime versioni.
| Browser | esploratore | Cromo | Firefox | safari | musica lirica | Androide | iOS |
|---|---|---|---|---|---|---|---|
| Versione | no | 31+ | 35+ | 7+ | 18+ | 4.4+ | 6+ |
| filtro | — | (-webkit-) | + | (-webkit-) | (-webkit-) | (-webkit-) | (-webkit-) |
Funzioni e sintassi dei filtri CSS
Tutte le proprietà CSS hanno alcuni parametri che combinano l'ordine in cui vengono scritti i valori. La proprietà filter non fa eccezione, come le altre, può utilizzare una combinazione di più regole in una singola applicazione. Ad esempio, aggiungi un filtro di luminosità per l'immagine e specificane un altro attraverso lo spazio - contrasto. Tratteremo tutto in questo articolo con alcuni esempi per una migliore comprensione.
Sintassi
Filtro: nome del filtro (valore percentuale) ; filtro: url(img.svg); filtro: sfocatura(10px); filtro: luminosità(0,9); filtro: contrasto(150%); filtro: ombra esterna (5px 5px 10px nero); filtro: scala di grigi (80%); filtro: colore-ruota (60 gradi); filtro: inversione (80%); filtro: opacità (50%); filtro: saturo (50%); filtro: seppia(40%); /* Applica più filtri */ filtro: contrasto (150%) scala di grigi (80%);
Elenco dei filtri
| Filtro | Descrizione |
|---|---|
| sfocatura (px) | Filtra per sfocare l'immagine. La quantità di sfocatura è specificata in pixel. Se non viene fornito alcun numero, il valore predefinito è 0. |
| ombra esterna () | Ombra. Un'alternativa alla proprietà box-shadow con parametri simili e lo stesso ordine di ortografia. L'eccezione è il quarto valore "stretch": quasi tutti i browser non lo supportano. |
| scala di grigi (%) | Filtro desaturazione. Applica sfumature di grigio all'immagine in base alla percentuale specificata. Non è consentito un valore negativo e l'originalità dell'immagine è 0. |
| luminosità (%) | Regola la luminosità dell'immagine. Un valore del 100% mostra il punto di luminosità originale. L'adeguamento viene effettuato sia in negativo (-50%) che in positivo (150%). |
| contrasto (%) | Regola il contrasto dell'immagine. Come con il filtro precedente, un valore del 100% mostrerà il punto di origine. Le modifiche possono essere impostate negative (-20%) e positive (120%). |
| hue-ruota (gradi) | Sovrapposizione di tonalità di colore rotativa. A seconda del grado specificato (da 0 gradi a 360 gradi), il colore verrà adattato all'immagine, che è determinato dalla ruota dei colori. |
| invertire (%) | Inversione dell'immagine. Viene applicato un valore compreso tra 0 e 100% senza parametro negativo. |
| saturazione (%) | Saturazione dell'immagine. La posizione iniziale è definita al 100% e non ha valore negativo. |
| seppia (%) | Effetto seppia. L'originalità dell'immagine è definita come 0% ed è disponibile fino al 100% senza negazione. |
| opacità (%) | Trasparenza dell'immagine. Un altro filtro che ha una proprietà di opacità simile con gli stessi usi. L'impostazione è consentita da 0 a 100% senza parametro negativo. |
| URL() | Collegamento CSS a un elemento SVG con un #id specifico. |
| iniziale | Imposta il valore predefinito di una proprietà. |
| ereditare | Eredita tutti i valori delle proprietà del suo elemento padre. |
Esempi di filtri CSS
Siamo arrivati alla parte interessante dell'articolo, in cui considereremo ciascun filtro separatamente con esempi della sua applicazione. Per chiarezza, verranno utilizzate tre immagini. Il primo mostrerà il punto di partenza, l'aspetto dell'originalità. Il secondo servirà da esempio statico nell'applicazione del filtro e il terzo mostrerà l'effetto al passaggio del mouse, passando il mouse sopra l'immagine.
filtro sfocatura
Negli editor grafici, il filtro sfocatura è uno strumento indispensabile e viene spesso utilizzato nel lavoro. È in grado non solo di creare un'immagine sfocata, ma di creare l'effetto di mettere a fuoco un determinato elemento, mentre il resto dell'immagine cade sotto la sfocatura. E altro ancora.
Nella progettazione del sito (ad esempio - sfocatura) può essere utilizzato come rivestimento per una migliore leggibilità del testo che si trova nell'immagine. In realtà, la sfocatura viene eseguita in maniera gaussiana dal valore di 0 px e fino a quando non scompare completamente.
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efbl1 img( filter: blur(2px); -webkit-filter: blur(2px); ) /*per effetto hover*/ .efbl2 img(transizione: tutti gli 0.6s facilitano 0s; ) .efbl2 :hover img( filter: blur(4px); -webkit-filter: blur(4px); transizione: tutti gli 0.6s facilitano gli 0s; )
filtro ombra
La proprietà shadow ci è arrivata con la terza versione della tabella a cascata. Naturalmente, è familiare a tutti coloro che sono coinvolti nella creazione di siti Web, poiché box-shadow gioca un ruolo importante nel design. Il filtro ombra esterna può essere definito un'alternativa inferiore con parametri simili e ce ne sono solo 5, senza contare l'ombra interna.
L'ordine di scrittura è: 5px/-5px (offset orizzontale), 5px/-5px (offset verticale), 15px (raggio sfocatura ombra), 5px/-5px (stiramento ombra), nero (colore). Il filtro supporta tutta la sintassi tranne lo stretching e il valore di inserimento (ombreggiatura interna), nonché l'aggiunta di più ombre separate da virgole. Ma nonostante tutto ciò, ci sono dei vantaggi, ad esempio il filtro tiene conto degli pseudo-elementi, che ti consentono di visualizzare la forma esatta dell'ombra dell'elemento.
Interessante anche il fatto che quando la casella non ha sfondo, ma solo un tratto di bordo, quando si utilizza box-shadow, verrà visualizzata un'ombra che presumibilmente tiene conto dello sfondo, cioè solido. E nel caso di utilizzo dell'ombra discendente, l'ombra assume la forma di un tratto indipendentemente dallo sfondo.
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efdrswd1 img( filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0 , 0.4); 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); transizione: tutti gli 0.6s facilitano 0s; )
Filtro di decolorazione
Stile fotografico classico per sempre nella giusta direzione. Il filtro consente un solo valore - positivo. A seconda della percentuale specificata, la scala di grigi sostituirà uniformemente il colore dell'immagine. Inoltre, invece delle percentuali, puoi utilizzare una frazione fino a un numero intero (0,01/1).
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efgrays1 img( filter: grayscale(90%); -webkit-filter: grayscale(90%); ) /*per effetto hover*/ .efgrays2 img(transizione: tutti gli 0.6s facilitano 0s;) .efgrays2:hover img( filter: grayscale(90%); -webkit-filter: grayscale(90%); transition: all 0.6s facilita 0s; )
Filtro luminosità
Aggiungendo luce agli angoli neri "inesplorati" dell'immagine. Viene spesso utilizzato nell'elaborazione delle foto, poiché gli scatti amatoriali, di regola, vengono eseguiti in luoghi scarsamente illuminati. La luminosità del filtro è regolabile da 0% (immagine completamente nera) fino alla scomparsa quasi completa dell'immagine. Il punto originale è definito come 100% e il valore può anche essere specificato come frazione.
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efbrig1 img(filtro: luminosità(150%); -webkit-filtro: luminosità(150%); ) /*per effetto hover*/ .efbrig2 img(transizione: tutti 0.6s facilità 0s;) .efbrig2:hover img(filtro: luminosità(150%); -webkit-filter: luminosità(150%); transizione: tutti gli 0.6s facilitano 0s;)
Filtro di contrasto
Un modo semplice per rendere un'immagine più espressiva è sperimentare le impostazioni di luminosità delle parti più chiare e più scure dell'immagine. Il filtro di contrasto è qui per aiutarti. I suoi parametri, come molti altri, escludono un valore negativo (-150%) e la posizione iniziale è indicata al 100%. Oltre alle percentuali è consentita anche una frazione (1,5).
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efcontr1 img( filter: contrast(150%); -webkit-filter: contrast(150%); ) /*per effetto hover*/ .efcontr2 img(transizione: tutti gli 0.6s facilitano 0s; ) .efcontr2:hover img( filter: contrast(150%); -webkit-filter: contrast(150%); transizione: tutti gli 0.6s facilitano gli 0s; )
Filtro tonalità colore
Un'eccellente tecnica di progettazione nella progettazione dell'immagine, nello stile del design principale della risorsa. La linea di fondo consiste nel sovrapporre la sfumatura del colore selezionato all'immagine originale. I rapporti escono a seconda del grado specificato, che indica il punto colore sulla ruota dei colori.
Se il valore è positivo (150 gradi), la rotazione è in senso orario. Di conseguenza, se negativo, in senso antiorario. In due posizioni parte da 0 gradi a 360 gradi.
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efhrotai1 img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*per effetto hover*/ .efhrotai2 img(transizione: tutti 0.6s facilitano 0s ; ).
Inversione del filtro
Un effetto specifico che consente di capovolgere il colore di un'immagine. Negli editori grafici ha un certo ruolo e capita che senza la sua partecipazione non sia possibile ottenere il risultato sperato. Il parametro del filtro di inversione è indicato solo in direzione positiva dal valore da 0% a 100%.
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*for effetto hover*/ .efinve2 img(transizione: tutti 0.6s facilitano 0s; ) .efinve2:hover img( filter: invert(100%); -webkit-filter: invert(100%); transizione: tutti gli 0.6s facilitano 0s; )
Filtro di saturazione
Quando un'immagine perde il suo colore naturale per ragioni sconosciute (qualcosa come una maglietta sbiadita al sole), l'aumento della saturazione può ripristinare immediatamente l'aspetto precedente. E se questo filtro viene utilizzato in combinazione con altri filtri, il risultato sarà molto soddisfacente. L'adeguamento viene effettuato da 0 forma iniziale, a numeri grandi.
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efsatut1 img( filter: saturate(165%); -webkit-filter: saturate(165%); ) /*per effetto hover*/ .efsatut2 img(transizione: tutti gli 0.6s facilitano 0s;) .efsatut2:hover img( filter: saturate(165%); -webkit-filter: saturate(165%); transizione: tutti gli 0.6s facilitano gli 0s; )
Filtro seppia
Imitazione dell'effetto di vecchie fotografie (tinta leggermente marrone). In questo modo si ottiene uno stile di immagine retrò, particolarmente apprezzato. Il filtro seppia è regolabile da 0% (posizione iniziale) a 100%.
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efsepiaa1 img( filter: sepia(100%); -webkit-filter: sepia(100%); ) /*per effetto hover*/ .efsepiaa2 img(transizione: tutti gli 0.6s facilitano 0s; ) .efsepiaa2:hover img( filter: sepia(100%); -webkit-filter: sepia(100%); transizione: tutti gli 0.6s facilitano gli 0s; )
Filtra la trasparenza
Il filtro è simile alla proprietà di opacità della tabella a cascata della terza versione. La sintassi è la stessa, ma il valore della trasparenza è regolabile da 0% a 100% (posizione originale).
Originale
Filtro
effetto al passaggio del mouse
/*regola statica*/ .efopaty1 img( filter: opacity(50%); -webkit-filter: opacity(50%); ) /*per effetto hover*/ .efopaty2 img(transizione: tutti 0.6s facilitano 0s;) .efopaty2:hover img( filter: opacity(50%); -webkit-filter: opacity(50%); transizione: tutti gli 0.6s facilitano 0s; )
Filtro di collegamento
Viene creato un filtro personalizzato basato su elementi SVG con un ID specifico, che può essere successivamente utilizzato in CSS tramite un filtro di collegamento. Gli effetti possono essere molto diversi dai filtri standard, dalla sovrapposizione della maschera alla trasparenza banale.
Generatore di filtri CSS
Da tempo è consuetudine creare generatori di varie proprietà CSS. , e molti molti altri. Servono come uno strumento che semplifica il lavoro. E per i webmaster inesperti, possono essere di doppio vantaggio. Sono molto facili da usare: muovi i cursori e il risultato è immediatamente visibile. E alla fine, non resta che copiare il codice generato. Lo stesso vale per i generatori di filtri CSS. Eccone due come riferimento:
Conclusione
La recensione si è rivelata piuttosto ampia, ma spero che possa essere utile a qualcuno nella pratica. Inoltre, non dimenticare di combinare i filtri, uno è buono, ma due saranno migliori in alcuni casi.
Filtri CSS3 renderizzare effetti visivi simili ai filtri di Photoshop nel browser. I filtri possono essere aggiunti non solo alle immagini, ma anche a eventuali elementi non vuoti.
Il set di filtri non è limitato a quelli preinstallati nel browser. Puoi anche utilizzare i filtri SVG scaricandoli dal link insieme all'elemento svg.
I filtri sono stati originariamente creati come parte della specifica SVG. Il loro compito era applicare effetti basati sulla griglia di pixel alla grafica vettoriale. Con il supporto del browser per SVG, è diventato possibile utilizzare questi effetti direttamente nei browser.
I browser elaborano la pagina pixel per pixel applicando gli effetti specificati e visualizzano il risultato sopra l'originale. Quindi, applicando più filtri, puoi ottenere effetti diversi, come se fossero sovrapposti l'uno all'altro. Più sono i filtri, più tempo impiega il browser per eseguire il rendering della pagina.
Puoi applicare più filtri contemporaneamente. Il modo classico per applicare questi effetti è quando si passa il mouse sopra un elemento :hover.
Supporto del browser
CIOÈ: non supportare
bordo: 13.0 escluso URL()
Firefox: 35.0
Cromo: 18.0 -webkit-
safari: 9.1, 6.0 -webkit-
musica lirica: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Browser Android: 53.0, 4.4 -webkit-
Chrome per Android: 55.0, 47.0 -webkit-
| filtro | |
|---|---|
| sfocatura() | Il valore è specificato in unità di lunghezza, come px , em . Applica una sfocatura gaussiana all'immagine originale. Maggiore è il valore del raggio, maggiore è la sfocatura. Se non viene specificato alcun valore del raggio, il valore predefinito è 0 . |
| luminosità() | Il valore è specificato in % o in frazioni decimali. Modifica la luminosità dell'immagine. Maggiore è il valore, più luminosa sarà l'immagine. Il valore predefinito è 1 . |
| contrasto() | Il valore è specificato in % o in frazioni decimali. Regola il contrasto dell'immagine, ad es. differenza tra le aree più scure e quelle più chiare dell'immagine/dello sfondo. Il valore predefinito è 100%. Un valore pari a zero nasconderà l'immagine originale sotto uno sfondo grigio scuro. I valori che aumentano da 0 a 100% o da 0 a 1 apriranno gradualmente l'immagine originale alla visualizzazione originale e i valori sopra aumenteranno il contrasto tra le aree chiare e scure. |
| ombra esterna () | Il filtro agisce come le proprietà box-shadow e text-shadow. Utilizza i seguenti valori: offset x offset y sfocatura allunga il colore dell'ombra. Una caratteristica distintiva del filtro è che l'ombra viene aggiunta agli elementi e al suo contenuto, tenendo conto della loro trasparenza, ad es. se l'elemento contiene testo all'interno, il filtro aggiungerà un'ombra sia per il testo che per i bordi visibili del blocco. A differenza di altri filtri, questo filtro richiede la specifica dei parametri (il minimo è il valore di offset). |
| scala di grigi() | Estrae tutti i colori dall'immagine, rendendo l'output in bianco e nero. Il valore è specificato in % o in frazioni decimali. Maggiore è il valore, maggiore sarà l'effetto. |
| hue-ruota() | Modifica i colori dell'immagine in base all'angolo di rotazione specificato nella ruota dei colori. Il valore è espresso in gradi da 0deg a 360deg. 0deg è il valore predefinito, che significa nessun effetto. |
| invertire() | Il filtro rende l'immagine negativa. Il valore è espresso in %. 0% non applica alcun filtro, 100% converte completamente i colori. |
| opacità() | Il filtro funziona in modo simile alla proprietà opacità, aggiungendo trasparenza a un elemento. Una caratteristica distintiva è che i browser forniscono l'accelerazione hardware per il filtro, che migliora le prestazioni. Un ulteriore vantaggio è che il filtro può essere combinato con altri filtri contemporaneamente, creando effetti interessanti. Il valore viene fornito solo in % , 0% rende l'elemento completamente trasparente e 100% non ha alcun effetto. |
| saturare() | Controlla la saturazione dei colori, funzionando come un filtro di contrasto. Un valore di 0% rimuove il colore, mentre 100% non ha effetto. Valori da 0% a 100% diminuiscono la saturazione del colore, mentre valori superiori al 100% aumentano la saturazione del colore. Il valore può essere fornito come % o come numero intero, 1 equivale a 100% . |
| seppia () | Un effetto che imita l'antichità e il "retrò". Un valore di 0% non modifica l'aspetto dell'elemento, mentre 100% riproduce l'intero effetto seppia. |
| URL() | La funzione accetta la posizione di un file XML esterno con un filtro svg o un'ancora a un filtro che si trova nel documento corrente. |
| nessuno | Valore predefinito. Significa nessun effetto. |
| iniziale | Imposta questa proprietà sul valore predefinito. |
| ereditare | Eredita il valore della proprietà dall'elemento padre. |
