Propriétés CSS liées à la transparence

Articles

Cet article explique les propriétés CSS liées à la transparence.

Vous pouvez apprendre l'utilisation et la syntaxe des propriétés opacity, z-index et clip-path.

YouTube Video

HTML pour l'aperçu

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>

Effets de filtre

Propriété `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 propriété opacity est utilisée pour définir la transparence d'un élément. Cette propriété spécifie l'opacité de l'ensemble de l'élément, des valeurs proches de 0 étant plus transparentes et des valeurs proches de 1 plus opaques. La propriété opacity peut être combinée à des animations pour créer des effets d'apparition et de disparition progressives.

La propriété opacity affecte non seulement l'élément sur lequel elle est définie, mais aussi ses éléments enfants. Cela signifie que si un élément parent est défini comme semi-transparent, ses éléments enfants hériteront de cette transparence.

Dans cet exemple, les paramètres sont configurés comme suit.

Lorsque la propriété opacity est définie à 1, l’élément est complètement opaque, comme un élément normal.
Lorsque la propriété opacity est définie à 0.5, l’élément devient semi-transparent.
Lorsque la propriété opacity est définie à 0, l’élément devient complètement transparent et n’est plus du tout visible.
La propriété transition est définie à opacity, donc lorsque le curseur de la souris passe sur l’élément, il s’estompe et devient complètement transparent après 2 secondes.
Si l’élément parent possède une propriété opacity de 0.5, les éléments enfants deviennent également semi-transparents.

Propriété `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}

Le z-index est une propriété utilisée en CSS pour contrôler l'ordre d'empilement des éléments. Cette propriété spécifie si un élément doit apparaître devant ou derrière d'autres éléments.

Dans la boîte rouge, le z-index est défini à 1, donc l’élément apparaît devant les autres éléments.
Dans la boîte bleue, le z-index est défini à 0, donc l’élément apparaît derrière la boîte rouge.
Dans la boîte verte, le z-index est défini à 2, et elle apparaît tout devant.
Dans la boîte bleu clair, le z-index maximal de 4 est spécifié, mais comme l’élément parent a un z-index de 0, il n’apparaît pas en premier plan.

Mécanisme de base

La propriété z-index prend une valeur numérique, où les éléments ayant des nombres plus élevés sont affichés devant ceux avec des nombres plus petits. Par défaut, les éléments sans un z-index spécifié s’empilent selon l’ordre dans lequel ils apparaissent dans le HTML.

Cependant, pour que le z-index prenne effet, l'élément doit avoir sa propriété position définie sur relative, absolute, fixed ou sticky. Si la propriété position est static, alors le z-index n’a aucun effet.

Valeurs

Si une valeur entière positive est attribuée au z-index, l’élément est affiché plus vers l’avant. Plus le nombre est grand, plus il est affiché devant les autres éléments.
- Si le z-index est défini sur 0, il maintient l’ordre d’empilement par défaut.
- Si le z-index est défini sur 1, l’élément est affiché une couche devant les autres éléments.
Si une valeur entière négative est attribuée au z-index, l’élément est affiché plus vers l’arrière. Plus le nombre est petit, plus il est affiché derrière les autres éléments.
- Si le z-index est défini sur -1, l’élément est affiché une couche derrière les autres éléments.

Notes

Le z-index dépend du z-index de l’élément parent. Lorsqu’un élément parent a un z-index spécifié, l’ordre d’empilement relatif à l’intérieur de cet élément parent est appliqué. Cela s’appelle un contexte d’empilement. Ainsi, même si un élément enfant a un z-index élevé, si le z-index de l’élément parent est bas, il n’apparaîtra pas devant les autres éléments.

La propriété `clip-path`

La propriété clip-path en CSS est utilisée pour découper des éléments sous des formes spécifiques. Normalement, les éléments sont affichés sous forme de boîtes rectangulaires, mais avec clip-path, ils peuvent être affichés sous des formes complexes comme des cercles ou des polygones. C’est un outil très utile pour créer des designs visuels ou des effets interactifs.

La propriété clip-path restreint la zone d’affichage d’un élément et masque les parties situées en dehors de la forme spécifiée. Ensuite, nous expliquerons comment spécifier les formes couramment utilisées.

Formes de découpe principales

`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() découpe un élément en une forme circulaire. Vous pouvez contrôler la forme en spécifiant le centre et le rayon du cercle.

Le premier 50% correspond au rayon du cercle (en pourcentage de la largeur ou de la hauteur de l'élément).
Le suivant at 50% 50% désigne la position du centre du cercle (en pourcentage de la largeur et de la hauteur de l'élément).

Ici, cela spécifie un cercle avec un rayon de la moitié des dimensions de l'élément, centré à l'intérieur de celui-ci.

`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() découpe un élément en une forme elliptique. Vous spécifiez les rayons de la largeur et de la hauteur, ainsi que la position du centre.

Les premiers 50% 30% représentent les rayons de la largeur et de la hauteur.
Le suivant at 50% 50% désigne la position du centre de l'ellipse.

Dans cet exemple, cela spécifie une ellipse centrée dans l'élément, avec une largeur de 50% et une hauteur de 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() forme un polygone en reliant un ensemble spécifique de sommets. Chaque sommet est spécifié avec des coordonnées relatives à l'intérieur de l'élément.

Dans cet exemple, cela spécifie trois sommets (centre en haut, en bas à droite, en bas à gauche) et découpe en un triangle. polygon() est très flexible et permet de créer n'importe quelle forme.

`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() découpe vers l'intérieur à partir des bords extérieurs d'un élément. Définissez un rectangle en spécifiant la distance par rapport à chacun des quatre côtés.

10% représente la distance par rapport au bord supérieur.
20% représente la distance par rapport au bord droit.
30% représente la distance par rapport au bord inférieur.
40% représente la distance par rapport au bord gauche.

Cette spécification crée un rectangle qui se rétracte à l'intérieur de l'élément.

`clip-path` en utilisant 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}

Le clip-path CSS peut utiliser non seulement des formes primitives, mais aussi découper des formes complexes avec un élément SVG <clipPath>.

Dans cet exemple, un chemin de découpe circulaire défini en SVG avec l’identifiant myClip est appliqué à un élément HTML.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

`object-fit` et `object-position` Propriétés Propriétés CSS Liées aux Effets de Filtre

Propriétés CSS liées à la transparence

YouTube Video

HTML pour l'aperçu

Effets de filtre

Propriété opacity

Propriété z-index

Mécanisme de base

Valeurs

Notes

La propriété clip-path

Formes de découpe principales

circle()

ellipse()

polygon()

inset()

clip-path en utilisant SVG

YouTube Video

Propriété `opacity`

Propriété `z-index`

La propriété `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` en utilisant SVG