Propriétés CSS Liées aux Effets de Filtre

Articles

Cet article explique les propriétés CSS liées aux effets de filtre.

Vous pouvez apprendre les utilisations et comment écrire des propriétés telles que filter et transform.

YouTube Video

HTML pour l'aperçu

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>

Effets de filtre

Propriété `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 propriété filter est utilisée pour appliquer des effets visuels aux éléments. Vous pouvez facilement ajouter divers effets tels que flouter des images ou des éléments, ajuster la luminosité et modifier le contraste.

La classe filtered-image-sepia applique un effet sépia.
La classe filtered-image-opacity applique un effet d'opacité.
La classe filtered-image-multiple applique des effets de luminosité, contraste et sépia à l'image.

Syntaxe de base

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

Pour la propriété filter, spécifiez none ou une filter-function.

Spécifier none n'applique aucun effet de filtre.
Spécifiez la fonction de filtre à appliquer dans <filter-function>. Plusieurs filtres peuvent être spécifiés en les séparant par des espaces.

Types de fonctions de filtre

`blur()`

1filter: blur(5px);

La fonction blur() applique un effet de flou.

La valeur est spécifiée en pixels (px) et plus la valeur est grande, plus le flou est intense.

`brightness()`

1filter: brightness(1.5);

La fonction brightness() ajuste la luminosité.

La valeur est spécifiée entre 0 (entièrement sombre) et 1 (luminosité originale). Spécifier une valeur supérieure à 1 rend l'élément plus lumineux.

`contrast()`

1filter: contrast(2);

La fonction contrast() ajuste le contraste.

La valeur est spécifiée entre 0 (échelle de gris) et 1 (contraste original), et des valeurs supérieures à 1 augmentent le contraste.

`grayscale()`

1filter: grayscale(1);

La fonction grayscale() convertit l'élément en monochrome.

La valeur est spécifiée de 0 (couleur originale) à 1 (entièrement monochrome).

`hue-rotate()`

1filter: hue-rotate(90deg);

La fonction hue-rotate() fait pivoter la teinte.

Les valeurs sont spécifiées en degrés (deg), en appliquant des modifications de couleur en faisant pivoter la teinte. La teinte pivote dans une plage de 0deg à 360deg.

`invert()`

1filter: invert(1);

La fonction invert() inverse les couleurs.

Les valeurs sont spécifiées de 0 (couleur originale) à 1 (entièrement inversée).

`opacity()`

1filter: opacity(0.5);

La fonction opacity() modifie la transparence d’un élément.

Les valeurs sont spécifiées dans une plage allant de 0 (entièrement transparent) à 1 (opaque).

`saturate()`

1filter: saturate(2);

La fonction saturate() ajuste la saturation.

Les valeurs vont de 0 (monochrome) à 1 (saturation originale), et spécifier des valeurs supérieures à 1 augmente la saturation.

`sepia()`

1filter: sepia(1);

La fonction sepia() convertit en ton sépia.

Les valeurs sont spécifiées de 0 (couleur originale) à 1 (ton sépia complet).

Application de plusieurs filtres

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

Plusieurs filtres peuvent être appliqués, séparés par des espaces.

Avantages de l'utilisation de la propriété `filter`

La propriété filter est un outil puissant pour créer facilement des éléments visuellement attrayants. Elle présente les avantages suivants :.

Des effets visuels peuvent être ajoutés facilement.
Les images peuvent être ajustées uniquement à l'aide de CSS, sans logiciel de retouche d'image.
Des effets dynamiques peuvent être créés en les combinant avec des animations.

Propriété `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 propriété transform est utilisée pour appliquer des transformations 2D ou 3D aux éléments. Diverses transformations visuelles telles que la position, la rotation, l’agrandissement/réduction et l’inclinaison peuvent être spécifiées avec CSS. La propriété transform est souvent utilisée en combinaison avec des animations et aide à créer des éléments d'interface utilisateur dynamiques.

Dans la classe transform-scale, passer la souris sur l'élément agrandit sa largeur de 1,5 fois et sa hauteur de 2 fois.
Dans la classe transform-skew, passer la souris sur l'élément l'incline de 30 degrés sur l'axe X et de 20 degrés sur l'axe Y.
Dans la classe transform-rotate, passer la souris sur l'élément le fait pivoter de 45 degrés et l'agrandit de 1,5 fois.

Syntaxe de base

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

La propriété transform spécifie soit none, soit une transform-function.

Si none est spécifié, aucune transformation ne sera appliquée.
Spécifiez le type de transformation avec <transform-function>. Plusieurs transformations peuvent être appliquées en les séparant par des espaces.

Principales fonctions de transformation

`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 fonction translate(x, y) déplace un élément des distances spécifiées le long des axes X et Y. Spécifiez x et y en utilisant des unités telles que px ou %. Vous pouvez également spécifier individuellement avec translateX() ou translateY().

`rotate()`

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

La fonction rotate(angle) fait pivoter un élément de l'angle spécifié en degrés (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 fonction scale(x, y) redimensionne un élément le long des axes X et Y. x et y sont des facteurs d'échelle relatifs à la taille originale. Par exemple, scale(2, 2) doublera la taille. Vous pouvez spécifier individuellement avec scaleX() ou 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 fonction skew(x-angle, y-angle) incline un élément selon les angles spécifiés le long des axes X et Y. Vous pouvez spécifier individuellement avec skewX() ou skewY().

`matrix()`

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

La fonction matrix() spécifie une matrice pour combiner plusieurs transformations en même temps. Elle est généralement utilisée en combinaison avec d'autres fonctions de transformation.

Fonctions de transformation 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 fonction translate3d() effectue une translation dans l'espace 3D.
- Elle peut être spécifiée dans trois dimensions : les axes X, Y et Z.
En définissant la propriété transform-style sur preserve-3d et la propriété perspective sur 600px, un effet de mouvement tridimensionnel avec profondeur est appliqué aux éléments enfants.

`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 fonction rotate3d() effectue une rotation dans l'espace 3D.
- Elle fait pivoter un élément par rapport aux axes X, Y et Z.

Combiner plusieurs transformations

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

La propriété transform peut appliquer plusieurs transformations simultanément. Par exemple, vous pouvez combiner rotation et échelle.

Points clés pour l'utilisation

La propriété transform est un outil puissant en CSS pour transformer visuellement des éléments. En combinant diverses fonctions, vous pouvez créer des interfaces utilisateur interactives et dynamiques.

La propriété transform permet de transformer directement les éléments, offrant une manipulation visuelle sans modifier la structure DOM.
Elle est très utile pour créer des animations et des éléments interactifs, permettant des conceptions dynamiques lorsqu'elle est combinée avec transition ou animation.

Propriété `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 propriété transform-origin est utilisée pour définir le point d'origine des transformations appliquées par la propriété transform. Vous pouvez spécifier le point de référence pour les transformations d'un élément, ce qui vous permet de contrôler la position autour de laquelle des effets tels que la rotation ou le redimensionnement sont appliqués.

Dans cet exemple, lorsque vous survolez l'élément avec le curseur, il tourne et change d'échelle simultanément en fonction du point spécifié par la propriété transform-origin.

Syntaxe de base

1transform-origin: x y z;

Pour la propriété transform-origin, vous spécifiez x, y et z comme ceci.

Pour x, spécifiez le point de référence sur l'axe X (direction horizontale). Les valeurs peuvent être spécifiées à l'aide de mots-clés (left, center, right) ou de longueurs (px, %, etc.).
Pour y, spécifiez le point de référence sur l'axe Y (direction verticale). Les valeurs peuvent être spécifiées à l'aide de mots-clés (top, center, bottom) ou de longueurs.
Pour z, spécifiez le point de référence sur l'axe Z (direction de profondeur). Il ne peut être utilisé qu'avec des transformations 3D. C'est optionnel, et la valeur par défaut est 0.

Valeur par défaut

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

La valeur par défaut pour la propriété transform-origin est le centre de l'élément pour les axes X et Y. Cela signifie que, par défaut, les transformations sont effectuées avec le centre de l'élément comme point de référence.

Comment spécifier des valeurs

Les valeurs pour la propriété transform-origin peuvent être spécifiées à l'aide de mots-clés, de pourcentages, de longueurs comme px, em, etc.

Spécification des mots-clés
- left : Définit la référence de l'axe X sur le bord gauche de l'élément.
- right : Définit la référence de l'axe X sur le bord droit de l'élément.
- top : Définit la référence de l'axe Y sur le bord supérieur de l'élément.
- bottom : Définit la référence de l'axe Y sur le bord inférieur de l'élément.
- center : Définit la référence pour l'axe X ou Y au centre de l'élément.
Spécification en pourcentage
- 0% : Le définit sur le bord gauche ou supérieur.
- 50% : Le définit au centre.
- 100% : Le définit sur le bord droit ou inférieur.
Spécification en longueur
- Vous pouvez ajuster précisément le point de référence à l'aide de longueurs spécifiques comme px, em, etc.

`transform-origin` dans les transformations 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 peut également être utilisé pour les transformations 3D. Dans les transformations 3D, vous pouvez également spécifier le point de référence sur l'axe Z. Par exemple, en spécifiant le centre de rotation dans la direction de la profondeur, des transformations avec une impression de profondeur sont possibles.

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

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

Propriétés CSS Liées aux Effets de Filtre

YouTube Video

HTML pour l'aperçu

Effets de filtre

Propriété filter

Syntaxe de base

Types de fonctions de filtre

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

Application de plusieurs filtres

Avantages de l'utilisation de la propriété filter

Propriété transform

Syntaxe de base

Principales fonctions de transformation

translate()

rotate()

scale()

skew()

matrix()

Fonctions de transformation 3D

translate3d()

rotate3d()

Combiner plusieurs transformations

Points clés pour l'utilisation

Propriété transform-origin

Syntaxe de base

Valeur par défaut

Comment spécifier des valeurs

transform-origin dans les transformations 3D

YouTube Video

Propriété `filter`

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

Avantages de l'utilisation de la propriété `filter`

Propriété `transform`

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

Propriété `transform-origin`

`transform-origin` dans les transformations 3D