Proprietà CSS relative agli effetti filtro

Articles

Questo articolo spiega le proprietà CSS relative agli effetti filtro.

Puoi imparare l'uso e come scrivere proprietà come filter e transform.

YouTube Video

HTML per Anteprima

css-effect.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(50px, 50px, 50px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156            </section>
157        </article>
158    </main>
159</body>
160</html>

Effetti filtro

Proprietà `filter`

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

La proprietà filter viene utilizzata per applicare effetti visivi agli elementi. Puoi facilmente aggiungere una varietà di effetti come sfocare immagini o elementi, regolare la luminosità e modificare il contrasto.

La classe filtered-image-sepia ha un effetto seppia applicato.
La classe filtered-image-opacity ha un effetto di opacità applicato.
La classe filtered-image-multiple ha effetti di luminosità, contrasto e seppia applicati all'immagine.

Sintassi di Base

1filter: none | <filter-function> [<filter-function>]*;

Per la proprietà filter, specifica none o una filter-function.

Specificare none non applica alcun effetto filtro.
Specifica la funzione filtro da applicare in <filter-function>. È possibile specificare filtri multipli separandoli con spazi.

Tipi di funzioni filtro

`blur()`

1filter: blur(5px);

La funzione blur() applica un effetto di sfocatura.

Il valore viene specificato in pixel (px) e maggiore è il valore, maggiore sarà il grado di sfocatura.

`brightness()`

1filter: brightness(1.5);

La funzione brightness() regola la luminosità.

Il valore viene specificato da 0 (completamente scuro) a 1 (luminosità originale). Specificare un valore maggiore di 1 rende l'elemento più luminoso.

`contrast()`

1filter: contrast(2);

La funzione contrast() regola il contrasto.

Il valore viene specificato da 0 (scala di grigi) a 1 (contrasto originale), e valori maggiori di 1 aumentano il contrasto.

`grayscale()`

1filter: grayscale(1);

La funzione grayscale() converte l'elemento in tonalità di grigio.

Il valore è specificato da 0 (colore originale) a 1 (completamente monocromatico).

`hue-rotate()`

1filter: hue-rotate(90deg);

La funzione hue-rotate() ruota la tonalità.

I valori sono specificati in gradi (deg) e applicano modifiche al colore ruotando la tonalità. La tonalità ruota nell'intervallo da 0deg a 360deg.

`invert()`

1filter: invert(1);

La funzione invert() inverte i colori.

I valori sono specificati da 0 (colore originale) a 1 (completamente invertito).

`opacity()`

1filter: opacity(0.5);

La funzione opacity() modifica la trasparenza di un elemento.

I valori sono specificati nell'intervallo da 0 (completamente trasparente) a 1 (opaco).

`saturate()`

1filter: saturate(2);

La funzione saturate() regola la saturazione.

I valori vanno da 0 (monocromatico) a 1 (saturazione originale), e specificare valori maggiori di 1 aumenta la saturazione.

`sepia()`

1filter: sepia(1);

La funzione sepia() converte in tonalità seppia.

I valori sono specificati da 0 (colore originale) a 1 (tono seppia completo).

Applicare più filtri

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

È possibile applicare più filtri separati da spazi.

Vantaggi dell'utilizzo della proprietà `filter`

La proprietà filter è uno strumento potente per creare elementi visivamente accattivanti in modo semplice. Ha i seguenti vantaggi:.

Gli effetti visivi possono essere aggiunti facilmente.
Le immagini possono essere regolate utilizzando solo il CSS, senza software di modifica delle immagini.
Gli effetti dinamici possono essere creati combinando con le animazioni.

Proprietà `transform`

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

La proprietà transform viene utilizzata per applicare trasformazioni 2D o 3D agli elementi. Con il CSS è possibile specificare varie trasformazioni visive, come posizione, rotazione, ridimensionamento (ingrandire/rimpicciolire) e inclinazione. La proprietà transform viene spesso utilizzata in combinazione con le animazioni e aiuta a creare elementi UI dinamici.

Nella classe transform-scale, passando il cursore sull'elemento, si ingrandisce la larghezza di 1,5 volte e l'altezza di 2 volte.
Nella classe transform-skew, passando il cursore sull'elemento, viene ruotato di 30 gradi sull'asse X e di 20 gradi sull'asse Y.
Nella classe transform-rotate, passando il cursore sull'elemento, viene ruotato di 45 gradi e ingrandito di 1,5 volte.

Sintassi di Base

1transform: none | <transform-function> [<transform-function>]*;

La proprietà transform specifica none oppure una transform-function.

Se viene specificato none, non verrà applicata alcuna trasformazione.
Specifica il tipo di trasformazione con <transform-function>. È possibile applicare più trasformazioni separandole con spazi.

Principali Funzioni di Trasformazione

`translate()`

1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */

La funzione translate(x, y) sposta un elemento delle distanze specificate lungo gli assi X e Y. Specifica x e y utilizzando unità come px o %. È anche possibile specificare individualmente con translateX() o translateY().

`rotate()`

1transform: rotate(45deg); /* Rotate 45 degrees */

La funzione rotate(angle) ruota un elemento dell'angolo specificato in gradi (deg).

`scale()`

1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */

La funzione scale(x, y) scala un elemento lungo gli assi X e Y. x e y sono fattori di scala relativi alla dimensione originale. Ad esempio, scale(2, 2) raddoppierà la dimensione. Puoi specificare individualmente con scaleX() o scaleY().

`skew()`

1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);

La funzione skew(x-angle, y-angle) inclina un elemento degli angoli specificati lungo gli assi X e Y. Puoi specificare individualmente con skewX() o skewY().

`matrix()`

1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);

La funzione matrix() specifica una matrice per combinare più trasformazioni contemporaneamente. Di solito viene utilizzata in combinazione con altre funzioni di trasformazione.

Funzioni di trasformazione 3D

`translate3d()`

1/* Moves the element 100px to the right (X-axis),
250px down (Y-axis), and 30px towards the viewer (Z-axis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Allows child elements to preserve their 3D position relative to the parent */
6transform-style: preserve-3d;
7
8/* Applies a perspective from a distance of 600px to give a sense of depth */
9perspective: 600px;

La funzione translate3d() esegue una traslazione nello spazio 3D.
- Può essere specificata in tre dimensioni: sugli assi X, Y e Z.
Impostando la proprietà transform-style su preserve-3d e la proprietà perspective su 600px, viene applicato agli elementi figli un effetto di movimento tridimensionale con profondità.

`rotate3d()`

1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;

La funzione rotate3d() esegue una rotazione nello spazio 3D.
- Ruota un elemento rispetto agli assi X, Y e Z.

Combinazione di più trasformazioni

1transform: rotate(45deg) scale(1.5);

La proprietà transform può applicare più trasformazioni contemporaneamente. Ad esempio, puoi combinare rotazione e scalatura.

Punti chiave per l'utilizzo

La proprietà transform è uno strumento potente in CSS per trasformare visivamente gli elementi. Combinando varie funzioni, puoi creare interfacce utente interattive e dinamiche.

La proprietà transform consente la trasformazione diretta degli elementi, permettendo manipolazioni visive senza modificare il layout del DOM.
È molto utile per creare animazioni ed elementi interattivi, permettendo design dinamici se combinata con transition o animation.

Proprietà `transform-origin`

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}

La proprietà transform-origin viene utilizzata per impostare il punto di origine delle trasformazioni applicate dalla proprietà transform. Puoi specificare il punto di riferimento per le trasformazioni degli elementi, permettendoti di controllare attorno a quale posizione vengono applicati effetti come rotazione o scalatura.

In questo esempio, quando passi il mouse sopra l'elemento, esso ruota e si scala simultaneamente in base al punto specificato dalla proprietà transform-origin.

Sintassi di Base

1transform-origin: x y z;

Per la proprietà transform-origin, devi specificare x, y e z come segue.

Per x, specifica il punto di riferimento sull'asse X (direzione orizzontale). I valori possono essere specificati utilizzando parole chiave (left, center, right) o lunghezze (px, %, ecc.).
Per y, specifica il punto di riferimento sull'asse Y (direzione verticale). I valori possono essere specificati utilizzando parole chiave (top, center, bottom) o lunghezze.
Per z, specifica il punto di riferimento sull'asse Z (direzione della profondità). Può essere utilizzato solo con trasformazioni 3D. È opzionale e il valore predefinito è 0.

Valore Predefinito

1transform-origin: 50% 50%; /* Center of the element */

Il valore predefinito della proprietà transform-origin è il centro dell'elemento sia per l'asse X che per l'asse Y. Questo significa che, per impostazione predefinita, le trasformazioni vengono eseguite con il centro dell'elemento come punto di riferimento.

Come specificare i valori

I valori per la proprietà transform-origin possono essere specificati utilizzando parole chiave, percentuali, lunghezze come px, em, ecc.

Specificazione delle Parole Chiave
- left: Imposta il riferimento dell'asse X sul bordo sinistro dell'elemento.
- right: Imposta il riferimento dell'asse X sul bordo destro dell'elemento.
- top: Imposta il riferimento dell'asse Y sul bordo superiore dell'elemento.
- bottom: Imposta il riferimento dell'asse Y sul bordo inferiore dell'elemento.
- center: Imposta il riferimento per l'asse X o Y al centro dell'elemento.
Specificazione in Percentuale
- 0%: Lo imposta sul bordo sinistro o superiore.
- 50%: Lo imposta al centro.
- 100%: Lo imposta sul bordo destro o inferiore.
Specificazione di Lunghezza
- Puoi regolare con precisione il punto di riferimento utilizzando lunghezze specifiche come px, em, ecc.

`transform-origin` nelle Trasformazioni 3D

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin può essere utilizzato anche per le trasformazioni 3D. Nelle trasformazioni 3D, puoi anche specificare il punto di riferimento sull'asse Z. Ad esempio, specificando il centro di rotazione nella direzione della profondità, sono possibili trasformazioni con un senso di profondità.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative alla trasparenza

Proprietà CSS relative agli effetti filtro

YouTube Video

HTML per Anteprima

Effetti filtro

Proprietà filter

Sintassi di Base

Tipi di funzioni filtro

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

Applicare più filtri

Vantaggi dell'utilizzo della proprietà filter

Proprietà transform

Sintassi di Base

Principali Funzioni di Trasformazione

translate()

rotate()

scale()

skew()

matrix()

Funzioni di trasformazione 3D

translate3d()

rotate3d()

Combinazione di più trasformazioni

Punti chiave per l'utilizzo

Proprietà transform-origin

Sintassi di Base

Valore Predefinito

Come specificare i valori

transform-origin nelle Trasformazioni 3D

YouTube Video

Proprietà `filter`

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

Vantaggi dell'utilizzo della proprietà `filter`

Proprietà `transform`

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

Proprietà `transform-origin`

`transform-origin` nelle Trasformazioni 3D