Il filtro CSS e le modalità di fusione sono strumenti potenti per applicare facilmente straordinari effetti visivi alla tua pagina web senza la necessità di codice complesso.

Il filtro CSS e le modalità di fusione ti consentono di applicare facilmente effetti visivi alla tua pagina web. I filtri sono un insieme di funzioni CSS predefinite utilizzate per regolare il rendering di immagini o altri elementi HTML. Mentre le modalità di fusione determinano come un elemento dovrebbe fondersi con il suo sfondo o gli elementi vicini.

Utilizzo dei filtri CSS

Si applicano i filtri CSS utilizzando il file filtro e una proprietà che specifica il tipo di effetto applicato. Ogni proprietà del filtro è una funzione CSS, that funziona in modo simile a una variabile CSS funzione. Accetta un parametro per specificare quanto il filtro dovrebbe influenzare l'elemento con stile.

Sono disponibili 10 funzioni di filtro CSS per definire lo stile del tuo elemento HTML:

  • sfocatura()
  • luminosità()
  • contrasto()
  • ombreggiatura()
  • scala di grigi()
  • ruota-tinta()
  • invertire()
  • opacità()
  • saturare()
  • seppia()
instagram viewer

Puoi utilizzare questi filtri singolarmente o in combinazione per creare stili unici e migliorare l'aspetto dei tuoi elementi HTML.

Alcuni di questi filtri funzionano molto meglio con altri se usati nel modo giusto.

Ecco alcuni esempi di combinazione di filtri CSS per ottenere diversi effetti visivi su un elemento immagine.

1. Scala di grigi e seppia

IL scala di grigi() Il filtro rimuove tutte le informazioni sul colore da un'immagine o da un elemento di testo. Il filtro assume un valore compreso tra 0 e 1, dove 0 indica il colore originale e 1 l'effetto scala di grigi completa.

IL seppia() Il filtro applica un effetto di tonalità seppia a un'immagine oa un elemento di testo. Anche il filtro assume un valore compreso tra 0 e 1.

Per esempio:

imm {
filtro: scala di grigi(14%) seppia(30%);
}

Combinazione scala di grigi() al 14% e seppia() al 30% può creare un effetto vintage o retrò sulla tua immagine.

2. Inverti e satura

IL saturare() filtro aumenta o diminuisce la saturazione di un'immagine o di un elemento di testo. Il filtro assume un valore compreso tra 0 e infinito, dove 1 rappresenta il colore originale e valori più alti aumentano la saturazione.

IL invertire() filtro invertirà i colori di un'immagine o di un elemento di testo capovolgendo la tonalità di ogni colore presente di 180 gradi sulla ruota dei colori. Ciò significa che il filtro modifica i livelli di luminosità e saturazione dell'elemento mantenendo la tonalità.

Per esempio:

imm {
filtro: invertire(30%) saturare(75%);
}

Questo codice inverte i colori dell'immagine e aumenta la saturazione del 75%.

3. Tonalità-Ruota e Contrasto

IL ruota-tinta() Il filtro ruota le tonalità di un'immagine o di un elemento di testo, il che significa che cambia il colore complessivo dell'elemento mantenendo i livelli di luminosità e saturazione. La quantità di rotazione può essere specificata in gradi, con 0 che rappresenta il colore originale e 360 ​​che rappresenta una rotazione completa per tornare al colore originale.

Combinando il ruota-tinta() E contrasto() i filtri possono creare un effetto vibrante e colorato sulle tue immagini.

Per esempio:

imm {
filtro: ruota la tonalità(10gradi) contrasto(150%);
}

La rotazione della tonalità può accettare un valore di gradi, laureato, rad, O giro. Il codice precedente ruota la tonalità dell'immagine di 10 gradi e aumenta il contrasto.

4. Luminosità e sfocatura

I filtri di luminosità e sfocatura sono molto autoesplicativi. Il primo regola la luminosità dell'immagine e il secondo controlla il livello di sfocatura applicato.

Combinando il luminosità() E sfocatura() i filtri possono creare un effetto sognante e morbido sulle tue immagini.

Per esempio:

imm {
filtro: luminosità(0.8) sfocatura(5px);
}

Il codice precedente riduce la luminosità di 0.8 (80%) e applica a 5px effetto sfocato all'immagine.

5. Ombreggiatura e Opacità

Un effetto ombra esterna è un effetto visivo in cui un elemento sembra proiettare un'ombra sulla superficie dietro di esso, dando l'illusione di profondità e dimensionalità. Le ombre esterne vengono spesso applicate a testo o immagini per creare un senso di separazione tra l'elemento e lo sfondo.

Nel frattempo, il filtro opacità controlla la trasparenza di un elemento.

Combinando il ombreggiatura() E opacità() i filtri possono creare un sottile effetto sui tuoi elementi di testo.

Per esempio:

.effetto-testo {
trasformare: tradurre(-50%, -50%);
colore: nero;
ombra: 10px 9px 9pxbeige;
opacità: 70%;
}

In questo esempio, l'ombra discendente è posizionata 10 pixel a destra e 9 pixel in basso, con un raggio di sfocatura di 9 pixel. Il colore dell'ombra è specificato come beige. Viene inoltre specificata un'opacità del 70%.

Utilizzo delle modalità di fusione CSS

Le modalità di fusione CSS controllano il modo in cui il contenuto di un elemento si fonde con lo sfondo o altri elementi, consentendo effetti di composizione creativa.

Alcuni dei casi d'uso più popolari per le modalità di fusione CSS includono:

  • Creazione di gradienti: le modalità di fusione possono essere utilizzate per creare diversi gradienti di sfondo CSS quella transizione tra i colori, offrendoti un modo semplice ed efficiente per aggiungere profondità e dimensione ai tuoi progetti.
  • Aggiunta di consistenza: puoi anche utilizzare i metodi di fusione per aggiungere texture a sfondi, immagini e altri elementi su una pagina. Questo può essere un ottimo modo per creare un look unico e aggiungere interesse visivo a elementi altrimenti semplici.
  • Regolazione dei colori: con i metodi di fusione, puoi regolare i colori degli elementi su una pagina, inclusi regolazione dei colori di sfondo. Ciò ti consentirà di creare facilmente effetti come sovrapposizioni di colori o immagini colorate.

Le due modalità di fusione più comuni sono modalità di fusione dello sfondo E modalità mix-blend. Entrambe le proprietà condividono gli stessi 15 valori: normale, moltiplicazione, schermo, sovrapposizione, scurimento, schiarimento, schermatura colore, saturazione, bruciatura colore, luminosità, differenza, luce intensa, luce soffusa, esclusione e tonalità.

Dovresti usare modalità di fusione dello sfondo quando hai più layout di sfondo, come le immagini di sfondo su un elemento, e vuoi che tutti si fondano l'uno con l'altro.

Potresti anche usare il modalità mix-blend fondere il contenuto di un dato elemento con il contenuto del suo genitore diretto. IL modalità mix-blend viene in genere utilizzato per fondere contenuto in primo piano come testo, forme o immagini.

Ecco un esempio di utilizzo modalità mix-blend per fondere testo e immagine.

codice HTML:

<divclasse="contenitore">
<imm
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compressione&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compressione&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="immagine-di-sfondo"
 />
<divclasse="contenuto">
<h1>Benvenutoh1>
<P>Ciao utente!P>
div>
div>

CSS:

.contenitore {
posizione: assoluto;
larghezza: 100%;
altezza: 100%;
}
.immagine di sfondo {
larghezza: 100%;
altezza: 100%;
adattamento all'oggetto: copertina;
}


.contenuto {
posizione: assoluto;
superiore: 50%;
Sinistra: 50%;
trasformare: tradurre(-50%, -50%);
allineamento del testo: centro;
modalità mix-blend: differenza;
}


h1 {
dimensione del font: 60px;
colore: bianco;
}
P {
dimensione del font: 40px;
colore: bianco;
}

IL differenza la modalità di fusione calcola la differenza assoluta tra i valori di colore del testo e l'immagine scura sottostante.

In questo scenario, il colore del testo interagirebbe con lo sfondo scuro, generando un effetto di contrasto elevato.

Combinazione di filtri e metodi di fusione

Puoi combinare filtri e modalità di fusione per creare effetti visivamente ancora più interessanti. Utilizzando entrambe le proprietà insieme, puoi ottenere risultati unici e creativi difficili da replicare con altre proprietà CSS.

Ecco un esempio che combina il filtro e la modalità di fusione per creare un effetto più complesso:

.mio-elemento {
filtro: luminosità(150%) ruota la tonalità(180gradi) ombra(0px 0px 10pxrgb(0, 0, 0, 0.5));
modalità mix-blend: schermo;
}

Questo codice combina i filtri; luminosità, ruota la tonalità, ombra, e un modalità mix-blend di valore schermo all'immagine. Aumenta la luminosità del 150%, mentre hue-ruota invertirà i colori dell'immagine di 180 gradi.

Inoltre, viene applicata un'ombra esterna. Infine il schermo valore per la modalità di fusione combinerà i colori dell'immagine con lo sfondo sottostante, risultando in un effetto in cui i colori più chiari vengono intensificati e i colori più scuri vengono miscelati con il sfondo.

Padroneggiare i filtri e le modalità di fusione

Hai imparato a conoscere i diversi tipi di filtri CSS e come puoi applicarli ai tuoi elementi HTML. Utilizzando varie funzioni di filtro come sfocatura, contrasto e rotazione della tonalità, è possibile modificare l'aspetto delle immagini. Hai anche visto esempi di modalità di fusione in azione e come possono essere utilizzate per creare design unici.

Se sperimenti di più con queste tecniche, puoi aggiungere un ulteriore livello di interesse visivo ai tuoi progetti.