Proprietà CSS relative alla trasparenza

Articles

Questo articolo spiega le proprietà CSS relative alla trasparenza.

Puoi imparare l'utilizzo e la sintassi delle proprietà opacity, z-index e clip-path.

YouTube Video

HTML per Anteprima

css-opacity.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-opacity.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties Related to Transparency</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>CSS Properties Related to Transparency</h2>
20        </header>
21        <article>
22            <h3>opacity</h3>
23            <section>
24                <header><h4>opacity: 1</h4></header>
25                <section class="sample-view">
26                    <div class="opaque-box">Opaque</div>
27                </section>
28                <header><h4>opacity: 0.5</h4></header>
29                <section class="sample-view">
30                    <div class="semi-transparent-box">Semi-transparent</div>
31                </section>
32                <header><h4>opacity: 0</h4></header>
33                <section class="sample-view">
34                    <div class="transparent-box">Transparent</div>
35                </section>
36                <header><h4>transition: opacity 2s ease-in-out</h4></header>
37                <section class="sample-view">
38                    <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39                </section>
40                <header><h4>Parent & Child Element</h4></header>
41                <section class="sample-view">
42                    <div class="opacity-parent">
43                        Parent Element & <span class="opacity-child">Child Element</span>
44                    </div>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>z-index</h3>
50            <section>
51                <div class="z-index-box1">1</div>
52                <div class="z-index-box2">
53                    <div class="z-index-box2-1">2-1</div>
54                    2
55                </div>
56                <div class="z-index-box3">3</div>
57            </section>
58        </article>
59        <article>
60            <h3>clip-path</h3>
61            <section>
62                <h4>Clip-path Property Examples</h4>
63                <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64                <section class="sample-view">
65                    <div class="clip-path-circle">Circle</div>
66                </section>
67                <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68                <section class="sample-view">
69                    <div class="clip-path-ellipse">Ellipse</div>
70                </section>
71                <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72                <section class="sample-view">
73                    <div class="clip-path-polygon">Polygon</div>
74                </section>
75                <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76                <section class="sample-view">
77                    <div class="clip-path-inset">Inset</div>
78                </section>
79                <header><h4>clip-path: url(#myClip)</h4></header>
80                <section class="sample-view">
81                    <div class="clip-path-url">Url</div>
82                </section>
83            </section>
84            <svg width="0" height="0">
85                <clipPath id="myClip">
86                    <circle cx="50" cy="50" r="40" />
87                </clipPath>
88            </svg>
89        </article>
90    </main>
91</body>
92</html>

Effetti filtro

Proprietà `opacity`

 1.opaque-box {
 2    background-color: skyblue;
 3    opacity: 1; /* completely opaque */
 4    border: 1px solid black;
 5}
 6
 7.semi-transparent-box {
 8    background-color: skyblue;
 9    opacity: 0.5; /* semi-transparent */
10    border: 1px solid black;
11}
12
13.transparent-box {
14    background-color: skyblue;
15    opacity: 0; /* completely transparent */
16    border: 1px solid black;
17}
18
19.opacity-transition-box {
20    background-color: orange;
21    transition: opacity 2s ease-in-out;
22    border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26    opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30    background-color: blue;
31    opacity: 0.5;
32}
33
34.opacity-child {
35    background-color: red;
36}

La proprietà opacity viene utilizzata per impostare la trasparenza di un elemento. Questa proprietà specifica l'opacità dell'intero elemento: valori vicini a 0 lo rendono più trasparente, mentre valori vicini a 1 lo rendono più opaco. La proprietà opacity può essere combinata con animazioni per creare effetti di fade-in e fade-out.

La proprietà opacity influenza non solo l'elemento su cui è impostata, ma anche i suoi elementi figli. Ciò significa che se un elemento genitore è impostato come semi-trasparente, i suoi elementi figli erediteranno tale trasparenza.

In questo esempio, le impostazioni sono configurate come segue.

Quando la proprietà opacity è impostata su 1, l'elemento è completamente opaco, proprio come un elemento normale.
Quando la proprietà opacity è impostata su 0.5, l'elemento diventa semitrasparente.
Quando la proprietà opacity è impostata su 0, l'elemento diventa completamente trasparente e non è affatto visibile.
La proprietà transition è impostata su opacity, quindi quando il cursore del mouse passa sopra l'elemento, questo scompare gradualmente e diventa completamente trasparente dopo 2 secondi.
Se l'elemento padre ha una proprietà opacity di 0.5, anche gli elementi figli diventano semitrasparenti.

Proprietà `z-index`

 1.z-index-box1 {
 2    position: relative;
 3    width: 100px;
 4    height: 100px;
 5    background-color: red;
 6    top: 10px;
 7    left: 10px;
 8    z-index: 1; /* Displayed in the foreground */
 9}
10
11.z-index-box2 {
12    position: relative;
13    width: 100px;
14    height: 100px;
15    background-color: blue;
16    top: -100px;
17    left: 90px;
18    z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22    position: relative;
23    width: 100px;
24    height: 100px;
25    background-color: green;
26    top: -160px;
27    left: 80px;
28    z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32    position: relative;
33    width: 50px;
34    height: 50px;
35    background-color: skyblue;
36    top: 0px;
37    left: 0px;
38    z-index: 4;
39}

Il z-index è una proprietà CSS utilizzata per controllare l'ordine di sovrapposizione degli elementi. Questa proprietà specifica se un elemento deve apparire davanti o dietro ad altri elementi.

Nel riquadro rosso, il z-index è impostato su 1, quindi l'elemento appare davanti agli altri elementi.
Nel riquadro blu, il z-index è impostato su 0, quindi l'elemento appare dietro al riquadro rosso.
Nel riquadro verde, il z-index è impostato su 2 e appare in prima posizione.
Nel riquadro azzurro, è specificato il z-index più alto, pari a 4, ma poiché l'elemento padre ha un z-index di 0, non appare in prima posizione.

Meccanismo di base

La proprietà z-index accetta un valore numerico, dove gli elementi con numeri più alti sono visualizzati davanti a quelli con numeri più piccoli. Per impostazione predefinita, gli elementi senza un z-index specificato si sovrappongono secondo l'ordine in cui appaiono nell'HTML.

Tuttavia, affinché il z-index abbia effetto, l'elemento deve avere la proprietà position impostata su relative, absolute, fixed o sticky. Se la position è static, allora il z-index non ha alcun effetto.

Valori

Se viene assegnato un numero intero positivo al z-index, l'elemento verrà visualizzato più avanti. Maggiore è il numero, più l'elemento sarà visualizzato davanti agli altri.
- Se il z-index è impostato su 0, mantiene l'ordine di sovrapposizione predefinito.
- Se il z-index è impostato su 1, l'elemento verrà visualizzato uno strato davanti agli altri.
Se viene assegnato un numero intero negativo al z-index, l'elemento verrà visualizzato più indietro. Più piccolo è il numero, più l'elemento sarà visualizzato dietro agli altri.
- Se il z-index è impostato su -1, l'elemento verrà visualizzato uno strato dietro agli altri.

Note

z-index dipende dal z-index dell'elemento genitore. Quando un elemento genitore ha un z-index specificato, viene applicato l'ordine di sovrapposizione relativo all'interno di quell'elemento genitore. Questo viene chiamato contesto di sovrapposizione. Pertanto, anche se un elemento figlio ha un z-index alto, se il z-index dell'elemento genitore è basso, non apparirà davanti agli altri elementi.

La proprietà `clip-path`

La proprietà CSS clip-path viene utilizzata per ritagliare gli elementi in forme specifiche. Normalmente, gli elementi sono visualizzati come riquadri rettangolari, ma con clip-path possono essere mostrati in forme complesse come cerchi o poligoni. È uno strumento molto utile per creare design visivi o effetti interattivi.

La proprietà clip-path limita l'area visibile di un elemento e nasconde le parti al di fuori della forma specificata. Successivamente, spiegheremo come specificare le forme più comuni.

Forme di ritaglio principali

`circle()`

1.clip-path-circle {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: circle(50% at 50% 50%);
6}

circle() ritaglia un elemento in una forma circolare. Puoi controllare la forma specificando il centro e il raggio del cerchio.

Il primo 50% è il raggio del cerchio (come percentuale della larghezza o altezza dell'elemento).
Il successivo at 50% 50% è la posizione del centro del cerchio (come percentuale della larghezza e altezza dell'elemento).

Qui, specifica un cerchio con un raggio pari alla metà delle dimensioni dell'elemento, centrato nell'elemento.

`ellipse()`

1.clip-path-ellipse {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: ellipse(50% 30% at 50% 50%);
6}

ellipse() ritaglia un elemento in una forma ellittica. Specifichi i raggi della larghezza e dell'altezza, oltre alla posizione del centro.

Il primo 50% 30% sono i raggi della larghezza e dell'altezza.
Il successivo at 50% 50% è la posizione del centro dell'ellisse.

In questo esempio, specifica un'ellisse centrata nell'elemento, con una larghezza del 50% e un'altezza del 30%.

`polygon()`

1.clip-path-polygon {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}

polygon() forma un poligono collegando un insieme specifico di vertici. Ogni vertice è specificato con coordinate relative all'interno dell'elemento.

In questo esempio, specifica tre vertici (centro superiore, angolo inferiore destro, angolo inferiore sinistro) e ritaglia un triangolo. polygon() è molto flessibile e può creare qualsiasi forma.

`inset()`

1.clip-path-inset {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: inset(10% 20% 30% 40%);
6}

inset() ritaglia verso l'interno dai bordi esterni di un elemento. Definisci un rettangolo specificando la distanza da ciascuno dei quattro lati.

Il 10% è la distanza dal bordo superiore.
Il 20% è la distanza dal bordo destro.
Il 30% è la distanza dal bordo inferiore.
Il 40% è la distanza dal bordo sinistro.

Questa specifica crea un rettangolo che si riduce all'interno dell'elemento.

`clip-path` utilizza SVG

 1/*
 2<svg width="0" height="0">
 3  <clipPath id="myClip">
 4    <circle cx="50" cy="50" r="40" />
 5  </clipPath>
 6</svg>
 7*/
 8.clip-path-url {
 9    width: 100px;
10    height: 100px;
11    background-color: green;
12    clip-path: url(#myClip);
13}

Il CSS clip-path può utilizzare non solo forme primitive ma anche ritagliare forme complesse utilizzando un elemento SVG <clipPath>.

In questo esempio, una clip path circolare definita in SVG con l'id di myClip viene applicata a un elemento HTML.

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

YouTube Video

Proprietà `object-fit` e `object-position`Proprietà CSS relative agli effetti filtro

Proprietà CSS relative alla trasparenza

YouTube Video

HTML per Anteprima

Effetti filtro

Proprietà opacity

Proprietà z-index

Meccanismo di base

Valori

Note

La proprietà clip-path

Forme di ritaglio principali

circle()

ellipse()

polygon()

inset()

clip-path utilizza SVG

YouTube Video

Proprietà `opacity`

Proprietà `z-index`

La proprietà `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` utilizza SVG