Come aggiungere filtri e riflessioni alle immagini in CSS?

L'aspetto di un sito Web è altamente cruciale se intendi attirare sempre più pubblico sul tuo sito Web. Pertanto, per migliorare l'aspetto generale di un sito Web aggiuntivo di effetti grafici alle immagini o alle immagini riflettenti è notevolmente raccomandato. CSS fornisce varie proprietà che ti consentono di svolgere facilmente questi compiti. Abbiamo discusso in dettaglio queste proprietà in questo articolo. In questo post, abbiamo discusso quanto segue.

1. Filtri dell'immagine in CSS
2. Riflessioni dell'immagine in CSS

Filtri dell'immagine in CSS

Allo scopo di aggiungere vari effetti speciali a un'immagine come opacità, sfocatura, saturazione, ecc., Viene utilizzata la proprietà del filtro CSS.

Sintassi

filtro: valore;

I diversi metodi associati alla proprietà del filtro sono spiegati di seguito.

Valore	Descrizione
nessuno	Questo valore non aggiunge alcun effetto ed è un valore predefinito.
sfocatura	Aggiunge sfocatura all'immagine e rende il valore nei pixel.
luminosità	Viene utilizzato per aumentare o ridurre la luminosità di un'immagine e mostrare valori in percentuale.
contrasto	Questo valore sintonizza il contrasto di un'immagine e i valori sono definiti in percentuale.
scala di grigi	Trasforma un'immagine in un'immagine in scala di grigi e presenta anche valori in percentuale.
ROTATO HUE	Questo valore viene utilizzato per ruotare un'immagine e rende i valori in gradi.
invertire	Inverte i campioni che esistono nell'immagine e nei valori sono definiti in percentuale.
opacità	Questo valore regola la trasparenza di un'immagine e prende valori da 0 a 1.
saturare	Satura un'immagine prendendo valori in percentuale.
seppia	Questo valore viene utilizzato per convertire un'immagine in seppia ed esibire valori in percentuale.
Drop-Shadow	Viene utilizzato per applicare un effetto ombra sull'immagine.
url ()	È una funzione che richiede la posizione di un documento XML contenente un filtro SVG e potrebbe rendere un collegamento a un particolare elemento filtro.
iniziale	Questo valore dà alla proprietà il suo valore iniziale.
ereditare	Questo valore eredita la proprietà del filtro dall'elemento antenato.

Ora che conosci tutti i valori che una proprietà del filtro può esibire, di seguito abbiamo dimostrato questi valori per una migliore comprensione.

Innanzitutto, aggiungiamo un'immagine alla nostra pagina Web utilizzando HTML di base.

Html

Qui abbiamo semplicemente aggiunto un'immagine usando il tag.

CSS

img
larghezza: 30%;
Altezza: auto;

Ora stiamo usando CSS di base per dare un po 'di larghezza e altezza all'immagine.

Produzione

L'immagine è stata aggiunta alla pagina web.

Ora applichiamo i filtri a questa immagine ed esploriamo i vari valori che la proprietà del filtro può esibire.

Sfocatura

Abbiamo impostato l'effetto Blur su 2px. Più valore del metodo Blur aumenterà la sfocatura.

.sfocatura
Filtro: Blur (2px);

Produzione

Questa è un'immagine sfocata.

Luminosità

La luminosità dell'immagine è stata impostata su 0.50. Una riduzione del valore comporterà un calo della luminosità e viceversa.

.luminosità
Filtro: luminosità (0.50);

Produzione

La luminosità dell'immagine è stata regolata con successo.

Contrasto

Abbiamo impostato il contrasto dell'immagine al 160%. Se vuoi aumentare il contrasto, aumenta il valore tanto quanto desideri.

.contrasto
Filtro: contrasto (160%);

Produzione

Un effetto di contrasto aggiunto con grande facilità.

Scala di grigi

Diamo un po 'di valore al metodo Grayscale () e vediamo le modifiche nell'immagine.

.grigio
Filtro: scala di grigi (100%);

Produzione

Un'immagine colorata è stata convertita in un'immagine in bianco e nero usando il metodo Grayscale () della proprietà del filtro.

ROTATO HUE

Stiamo assegnando il metodo Hue-rota () 270 gradi. Questo metodo sostanzialmente modifica le immagini ruotando l'immagine attorno al cerchio di colore.

.hue-rotate
Filtro: ROTATO HUE (270DEG);

Produzione

Questa è un'immagine con rotazione tonalità di 270 gradi.

Invertire

Il valore invertito aggiunge un effetto speciale all'immagine invertendola. Qui stiamo invertito l'immagine dell'80%.

.invertito
Filtro: invertito (80%);

Produzione

I campioni dell'immagine sono stati invertiti.

Opacità

Per creare un valore di opacità trasparente dell'immagine viene utilizzato. Di seguito stiamo regolando l'opacità dell'immagine su 0.4. Meno il valore dell'opacità, più l'immagine diventerà trasparente.

.opacità
Filtro: opacità (0.4);

Produzione

Questa è un'immagine con trasparenza del 40%.

Saturare

Per aggiungere la saturazione, viene utilizzato il metodo saturato () di proprietà del filtro. Più il valore, più sarà la saturazione dell'immagine.

.saturare
Filtro: saturato (4);

Produzione

L'effetto di saturazione è stato aggiunto con successo all'immagine.

Seppia

Allo scopo di aggiungere un effetto seppia all'immagine, dargli un valore come se l'abbiamo assegnato il 50% nello snippet di codice seguente.

.seppia
Filtro: seppia (50%);

Produzione

L'effetto seppia funziona correttamente.

Drop-Shadow

Per aggiungere un'ombra stiamo usando il metodo Drop-Shadow. La lunghezza dell'ombra è stata assegnata su ciascun lato dell'immagine.

.ombra
filtro: drop-shadow (8px 8px 10px rosso);

Produzione

L'effetto drop-shadow è stato aggiunto con successo.

Ora che abbiamo imparato in modo approfondito la proprietà del filtro, andiamo avanti e vediamo cosa è la proprietà di riflessione.

Riflessioni dell'immagine in CSS

Allo scopo di riflettere le immagini, viene utilizzata la proprietà CSS Box-Riflect.

Sintassi

-WebKit-Box-Riflect: sotto | sopra | giusto | Sinistra;

Affinché questa proprietà funzioni completamente su vari browser viene utilizzato con un prefisso "-webkit-".

Nota: Il browser Firefox non supporta la proprietà Riflessione Box.

Di seguito abbiamo dimostrato alcuni di questi valori con l'aiuto di esempi pertinenti in modo da poter afferrare il concetto di riflessione dell'immagine.

Aggiungiamo prima un'immagine alla nostra pagina web.

Html

Qui abbiamo aggiunto un'immagine e ci abbiamo dato un po 'di larghezza e altezza.

Produzione

Un'immagine è stata inserita nella pagina web.

Sotto

Basta assegnare il valore "sotto" della proprietà Riflessione della scatola per riflettere un'immagine sotto l'immagine originale.

img
-WebKit-Box-Riflect: sotto;

Produzione

L'immagine è stata riflessa di seguito.

Giusto

Esploriamo il valore "giusto" della proprietà Riflessione box.

img
-WebKit-Box-Riflect: giusto;

Produzione

L'immagine è stata riflessa con successo a destra.

Conclusione

Ai fini dell'aggiunta di effetti speciali alle immagini che appaiono sui siti Web viene utilizzata la proprietà del filtro CSS. Vari metodi che questa proprietà può esibire sono; Grayscale (), saturate (), opacity (), blur (), luminosità (), tonalità (), ecc. Oltre ad aggiungere effetti speciali, puoi anche riflettere le immagini utilizzando la proprietà Riflessione della scatola CSS a destra, a sinistra, sopra o sotto. Questo post copre tutte le profondità dell'aggiunta di filtri o riflessi alle immagini con l'aiuto di esempi pertinenti.