Les filtres CSS3 sont une émanation très intéressante de SVG, vous permettant de modifier des éléments et des images HTML en appliquant du flou, de la luminosité et bien d'autres filtres. Dans ce didacticiel, nous examinerons rapidement leur fonctionnement exact.

Comment cela marche-t-il?

En utilisant uniquement CSS, nous pouvons créer des effets assez complexes. Ils peuvent être appliqués à la fois aux images et aux éléments HTML. La propriété utilisée pour contrôler tous ces effets est filtre.

filtre : filtre(valeur) ;

Comme on peut s'y attendre, cette propriété nécessite l'utilisation d'un préfixe de navigateur. Mais sur à l'heure actuelle, seulement -kit Web-(Chrome et Safari) sont les seuls moteurs de navigateur prenant en charge cette propriété.

Filtre Webkit : filtre (valeur) ;
-moz-filter : filtre(valeur) ;
-o-filter : filtre(valeur) ;
-ms-filter : filtre(valeur) ;

Filtration

Il existe un certain nombre de filtres, donc pour mieux comprendre chacun d'entre eux, examinons-les individuellement. Plusieurs filtres peuvent être appliqués à un élément (séparés par un espace), par exemple : luminosité Et se brouiller:

filtre : flou (5px) luminosité (0,5 );

Il existe plusieurs filtres qui ne seront pas abordés ci-dessous, mais ils peuvent être facilement mis en œuvre avec déjà CSS existant(transparence et ombres). Voici l'image originale que nous utiliserons pour démontrer le fonctionnement des filtres :

Je montrerai une photo avec le filtre appliqué (première photo) et le résultat du filtre sous forme d'image statique (deuxième photo), si vous utilisez un navigateur qui ne prend pas en charge les filtres et ne peut pas voir le résultat.

Se brouiller

Vous avez toujours voulu créer un flou gaussien sur une image ou un texte en utilisant uniquement du CSS ? Avec les filtres, vous pouvez le faire ! Le flou est mesuré en pixels, vous pouvez donc faire quelque chose comme ceci :

filtre : flou(5px ) ;
// Spécifique au navigateur
-webkit-filter : flou(5px) ;
-moz-filter : flou(5px) ;
-o-filtre : flou(5px ) ;
-ms-filter : flou(5px) ;

Luminosité

La luminosité est mesurée de zéro à un, 1 est pleine luminosité(couleur blanche), et 0 est la luminosité initiale.

filtre : luminosité (0,2 ) ;
// Spécifique au navigateur
-webkit-filter : luminosité (0,2 );
-moz-filter : luminosité (0,2 );
-o-filtre : luminosité (0,2 );
-ms-filter : luminosité (0,2 );

Saturation

La saturation est mesurée en pourcentage.

filtre : saturer (50% ) ;
// Spécifique au navigateur
-webkit-filter : saturer (50 % );
-moz-filter : saturer (50 % );
-o-filtre : saturer (50 % );
-ms-filter : saturer (50 % );

Rotation des tons

Ce filtre permet de changer le ton en le faisant tourner (pensez à une roue de couleurs que vous faites ensuite tourner). Elle se mesure en degrés.

filtre : rotation de la teinte (20 deg) ;
// Spécifique au navigateur
-webkit-filter : teinte-rotation (20 deg) ;
-moz-filter : teinte-rotation (20 deg) ;
-o-filter : rotation de la teinte (20 deg) ;
-ms-filter : teinte-rotation (20 deg) ;

Contraste

Le contraste, encore une fois, est mesuré en pourcentage. 100 % est la valeur par défaut, 0 % créera une image complètement noire. Tout ce qui dépasse 100 % ajoute du contraste !

filtre : contraste (150 % );
// Spécifique au navigateur
-webkit-filter : contraste (150 % );
-moz-filter : contraste (150 % );
-o-filtre : contraste (150 % );
-ms-filter : contraste (150 % );

Inversion

Également mesuré en pourcentage. Les valeurs disponibles vont de 0% à 100%. Curieusement, pour le moment, webkit ne prend pas en charge les inversions si elles sont inférieures à 100 %.

filtre : inverser (100%) ;
// Spécifique au navigateur
-webkit-filter : inverser (100%) ;
-moz-filter : inverser (100 % );
-o-filter : inverser (100% ) ;
-ms-filter : inverser (100 % );

Blanchiment

Encore une fois, entrez le pourcentage selon lequel vous souhaitez désaturer l’image. Les valeurs disponibles vont de 0% à 100%.

filtre : niveaux de gris (100 % );
// Spécifique au navigateur
-webkit-filter : niveaux de gris (100 % );
-moz-filter : niveaux de gris (100 % );
-o-filter : niveaux de gris (100 % );
-ms-filter : niveaux de gris (100 % );

Sépia

Je suppose que c'est très utile si vous souhaitez publier quelque chose sur Instagram. Bien que je suppose également que vous n'utiliserez pas CSS pour cela. Au contraire, ces nuances de gris et de négatif s'additionneront pour ajouter du sépia à votre image. 100 % sera un sépia complet, 0 % sera l'image originale.

filtre : sépia(100% ) ;
// Spécifique au navigateur
-webkit-filter : sépia(100% ) ;
-moz-filter : sépia (100 % );
-o-filtre : sépia(100% ) ;
-ms-filter : sépia (100 % );

Prise en charge du navigateur

	Kit Web	Mozilla	Trident	Presto
Se brouiller	Expérimental	Non	Non	Non
Luminosité
Saturation
Faire pivoter les tons
Contraste
Inversion	Inversion complète uniquement
Blanchiment	Expérimental
Sépia

Si vous avez des questions, nous vous recommandons d'utiliser notre

Le moyen le plus simple de désaturer une image couleur est d’utiliser CSS. Généralement, un filtre est appliqué à une classe, car il faut souvent créer le même effet pour plusieurs images :

100 % ) ; }

Définir une classe pour une image est également simple :

Ajout d'un filtre SVG

Le code CSS présenté ci-dessus fonctionne dans tous les navigateurs modernes, de bureau et de bureau. appareils mobiles, y compris le navigateur Microsoft Edge.

Pour obtenir le même effet dans Firefox avant la version 35, vous devrez utiliser un filtre SVG, que nous créerons dans un fichier séparé appelé desaturate.svg. Ce fichier contiendra le code suivant :

"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" /> < /filter> < /svg>

Si le code SVG ci-dessus semble un peu effrayant et que le tableau est trop complexe, ne vous inquiétez pas. Il s'agit d'un morceau de code que nous recommandons simplement de copier et de coller comme recette standard pour créer une image en noir et blanc.

Avec ce fichier SVG situé à côté Page HTML et l'image souhaitée, le code CSS sera complété par la ligne suivante :

Img.desaturate ( filtre : niveaux de gris ( 100 % ) ; filtre : url (désaturer) ; }

.svg #niveaux de gris

Ajout de la prise en charge du navigateur Internet Explorer Pour que l'effet fonctionne dans le navigateur Internet Explorer

de la 6 à la 9 versions, nous appliquons un simple filtre propriétaire Microsoft : 100 % ) ; filtre : url (désaturer) ; }

Img.desaturate ( filtre : gris ; filtre : niveaux de gris ( Si vous devez ajouter un support versions obsolètes

navigateurs sur le moteur Webkit, développons le code de cette façon : 100 % Img.desaturate ( -webkit-filter : niveaux de gris(1 ) ; -webkit-filter : niveaux de gris( 100 % ) ; filtre : url (désaturer) ; }

) ; filtre : gris ; filtre : niveaux de gris (

Cette méthode ne fonctionne pas dans

Navigateurs Internet Versions Explorateur 10 et 11. Si vous devez créer le même effet visuel dans absolument tous les navigateurs, vous pouvez utiliser une solution dans le langage de programmation Javascript pour différents navigateurs ou, par exemple, le script Greyscale.js. Le code CSS écrit ci-dessus nous permet de convertir visuellement une image en noir et blanc à la volée dans le navigateur, sans avoir besoin d'enregistrer de nouvelles versions dans Photoshop. Vous pouvez également modifier l'image beaucoup plus facilement à l'aide du code CSS : par exemple, si vous réduisez le pourcentage dans les valeurs des propriétés du filtre de 100 % à 50 %, vous obtenez un mélange de l'effet de désaturation et de l'image couleur d'origine. :

Une approche légèrement plus simple pour les anciennes versions du navigateur Firefox consiste à inclure le code SVG directement dans le code CSS sans rien ajouter à 100 % fichier séparé 100 % et dans l'étiquette Img.desaturate ( -webkit-filter : niveaux de gris ( ) ;) ; }

filtre : niveaux de gris (

) ; et ont atteint un tel niveau de développement qu'ils sont capables de gérer certaines fonctions importantes des éditeurs graphiques. Les filtres CSS en sont un exemple, avec lesquels vous pouvez créer de superbes effets pour les images.

Si auparavant c'était difficile à imaginer, presque tous les filtres logiciels sont désormais implémentés dans la table en cascade, du flou aux modèles de couleurs artistiques.

Mais les filtres CSS présentent encore un petit inconvénient : tous les navigateurs Web ne prennent pas en charge les effets visuels. Bien sûr, ce n'est qu'une question de temps. Et lorsque l’heure « x » arrive, les développeurs doivent être préparés. Pour l’instant, regardons ce qui a déjà été mis en œuvre jusqu’à présent.

Prise en charge du navigateur pour les filtres CSS

Fondamentalement, tous les navigateurs populaires, Firefox, Chrome, Opera, ont une relation « conviviale » avec les effets de filtre. On ne peut pas en dire autant d'IE, qui refuse complètement de prendre en charge les effets, même dans les dernières versions.

Navigateur	Explorateur	Chrome	Firefox	Safari	Opéra	Androïde	IOS
Version	Non	31+	35+	7+	18+	4.4+	6+
filtre	—	(-webkit-)	+	(-webkit-)	(-webkit-)	(-webkit-)	(-webkit-)

Fonctions et syntaxe des filtres CSS

Toutes les propriétés CSS ont certains paramètres qui combinent l'ordre dans lequel les valeurs sont écrites. La propriété filter ne fait pas exception, comme d’autres, elle peut utiliser une combinaison de plusieurs règles dans une seule application. Par exemple, ajoutez un filtre de luminosité pour une image et, après un espace, spécifiez-en un autre - le contraste. Nous couvrirons tout dans cet article avec quelques exemples pour une meilleure compréhension.

Syntaxe

Filtre : nom du filtre (pourcentage de la valeur) ; filtre : url(img.svg) ; filtre : flou (10 px ); filtre : luminosité (0,9) ; filtre : contraste (150 %) ; filtre : ombre portée (5px 5px 10px noir) ; filtre : niveaux de gris (80 %) ; filtre : teinte-rotation (60 deg) ; filtre : inverser (80 %) ; filtre : opacité (50 %) ; filtre : saturer (50 %) ; filtre : sépia (40 %) ; /* Appliquer plusieurs filtres */ filtre : contraste (150 %) niveaux de gris (80 %) ;

Liste des filtres

Filtre	Description
flou (px)	Filtre pour rendre l'image floue. Le degré de flou est indiqué en pixels. Si aucun nombre n’est spécifié, la valeur par défaut est 0.
ombre portée()	Ombre. Une alternative à la propriété box-shadow avec des paramètres similaires et le même ordre d'écriture. L'exception est la quatrième valeur « stretch » : presque tous les navigateurs ne la prennent pas en charge.
échelle de gris (%)	Filtre « Décolorer ». Applique des nuances de gris à l'image en fonction du pourcentage que vous spécifiez. Une valeur négative n'est pas autorisée et l'originalité de l'image est de 0.
luminosité (%)	Ajustez la luminosité de l’image. Une valeur de 100 % indique le point de départ de la luminosité. L'ajustement s'effectue à la fois négativement (-50 %) et positivement (150 %).
contraste (%)	Ajustez le contraste de l’image. Comme pour le filtre précédent, une valeur de 100 % indiquera l'origine. Les changements peuvent être négatifs (-20 %) ou positifs (120 %).
rotation de la teinte (deg)	Superposition de tons de couleur rotatifs. En fonction du degré spécifié (de 0° à 360°), l'image sera ajustée à la couleur, qui est déterminée par la roue chromatique.
inverser (%)	Inversion d'images. Une valeur de 0 à 100 % est appliquée sans paramètre négatif.
saturer (%)	Saturation des images. La position initiale est déterminée à 100% et n'a aucune valeur négative.
sépia (%)	Effet sépia. L'originalité de l'image est déterminée à 0% et est disponible jusqu'à 100% sans négation.
opacité (%)	Transparence de l'image. Un autre filtre qui a une propriété d'opacité similaire avec les mêmes méthodes d'utilisation. Le réglage est autorisé de 0 à 100% sans paramètre négatif.
URL()	Un lien CSS vers un élément SVG avec un #id spécifique.
initial	Définit la valeur par défaut de la propriété.
hériter	Hérite de toutes les valeurs de propriété de son élément parent.

Exemples de filtres CSS

Nous sommes arrivés à une partie intéressante de l'article, dans laquelle nous examinerons chaque filtre séparément avec des exemples de son application. Pour plus de clarté, trois images seront utilisées. Le premier montrera le point de départ, l’apparition de l’originalité. Le second servira d'exemple statique d'application d'un filtre, et le troisième montrera l'effet de survol, en plaçant le curseur de la souris sur l'image.

Filtre de flou

DANS éditeurs graphiques Le filtre de flou est un outil indispensable et est souvent utilisé au travail. Il peut facilement créer une image floue, mais peut créer l'effet de se concentrer sur un élément spécifique tandis que le reste de l'image tombe sous le flou. Et bien plus encore.

Dans la conception de sites Web (par exemple, le flou) peut être utilisé comme doublure pour une meilleure lisibilité du texte situé dans l'image. En fait, le flou est gaussien à partir d'une valeur de 0 px jusqu'à disparition complète.

Original

Filtre

Effet de survol

/*règle statique*/ .efbl1 img( filtre : flou(2px); -webkit-filter : flou(2px); ) /*pour effet de survol*/ .efbl2 img( transition : tous les 0,6 s facilitent 0 s; ) . :hover img( filtre : flou (4px); -webkit-filter: flou (4px); transition : tous les 0,6 s facilitent les 0 s ; )

Filtrer l'ombre

La propriété shadow nous est parvenue avec la troisième version de la table en cascade. Bien sûr, il est familier à toutes les personnes impliquées dans le développement de sites Web, puisque box-shadow joue un rôle important dans la conception. Le filtre d'ombre portée peut être qualifié d'alternative inférieure avec des paramètres similaires, et il n'y en a que 5, sans compter l'ombre intérieure.

L'ordre d'écriture est le suivant : 5px/-5px (décalage horizontal), 5px/-5px (décalage vertical), 15px (rayon de flou de l'ombre), 5px/-5px (étirement de l'ombre), noir (couleur). Le filtre prend en charge toutes les syntaxes à l'exception des valeurs d'étirement et d'insertion, ainsi que l'ajout de plusieurs ombres séparées par des virgules. Mais malgré tout cela, il y a quelques avantages, par exemple, le filtre prend en compte les pseudo-éléments, ce qui permet d'afficher la forme exacte de l'ombre de l'élément.

Il est également intéressant que lorsque le bloc n'a pas d'arrière-plan, mais que seul un trait de bordure est spécifié, alors lors de l'utilisation de box-shadow, une ombre sera affichée, censée prendre en compte l'arrière-plan, c'est-à-dire un arrière-plan solide. Et dans le cas de l'utilisation de l'ombre portée, l'ombre prend la forme d'un trait sans tenir compte du fond.

Original

Filtre

Effet de survol

/*règle statique*/ .efdrswd1 img( filtre : ombre portée(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter : ombre portée(6px 7px 3px rgba(0, 0, 0 , 0.4)); ) /*pour l'effet de survol*/ .efdrswd2 img( transition : toutes les 0,6 secondes facilitent les 0 ; ) .efdrswd2:hover img( filtre : ombre portée(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter : drop-shadow (6px 7px 3px rgba(0, 0, 0, 0.4));

Filtre de décoloration

Style de photographie classique pour toujours dans la bonne direction. Le filtre n'autorise qu'une seule valeur - positive. En fonction du pourcentage spécifié, des nuances de gris remplaceront en douceur la couleur de l'image. De plus, au lieu de pourcentages, vous pouvez utiliser des fractions jusqu'à un nombre entier (0,01/1).

Original

Filtre

Effet de survol

/*règle statique*/ .efgrays1 img( filtre : niveaux de gris(90%); -webkit-filter: niveaux de gris(90%); ) /*pour l'effet de survol*/ .efgrays2 img( transition : toutes les 0,6 s facilitent les 0 s ; ) .efgrays2:hover img( filtre : niveaux de gris (90 %) ; -webkit-filter : niveaux de gris (90 %) ; transition : tous les 0,6 s facilitent les 0 ; )

Filtre de luminosité

Ajout de lumière aux coins noirs "inexplorés" de l'image. Il est souvent utilisé dans le traitement des photos, car les photographies amateurs sont généralement prises dans des endroits mal éclairés. La luminosité du filtre est réglable de 0% (une image complètement noire) jusqu'à faire disparaître presque complètement l'image. Le point d'origine est défini comme 100 % et la valeur peut également être spécifiée sous forme de fraction.

Original

Filtre

Effet de survol

/*règle statique*/ .efbrig1 img( filtre : luminosité(150%); -webkit-filter : luminosité(150%); ) /*pour l'effet de survol*/ .efbrig2 img( transition : toutes les 0,6 s facilitent 0 s; ) .efbrig2:hover img( filtre : luminosité (150 %) ; -webkit-filter : luminosité (150 %) ; transition : toutes les 0,6 s facilitent les 0 s ; )

Filtre de contraste

Un moyen simple de rendre une image plus expressive consiste à expérimenter les paramètres de luminosité des parties les plus claires et les plus sombres de l'image. Le filtre de contraste est prêt à vous aider. Ses paramètres, comme beaucoup d'autres, excluent une valeur négative (-150 %), et la position initiale est indiquée à 100 %. En plus des pourcentages, les fractions (1,5) sont également autorisées.

Original

Filtre

Effet de survol

/*règle statique*/ .efcontr1 img( filtre : contraste(150%); -webkit-filter: contraste(150%); ) /*pour l'effet de survol*/ .efcontr2 img( transition : toutes les 0,6 s facilitent les 0 s ; ) .efcontr2:hover img( filtre : contraste (150 %) ; -webkit-filter : contraste (150 %) ; transition : tous les 0,6 s facilitent les 0 ; )

Filtre de tonalité de couleur

Une excellente technique de conception dans la conception d’images qui correspond au style de conception de la ressource principale. L'idée est de superposer une nuance de la couleur sélectionnée sur l'image originale. Les ratios apparaissent en fonction du degré donné, qui indique le point de couleur sur la roue chromatique.

Si la valeur est positive (150 degrés), alors la rotation se produit dans le sens des aiguilles d'une montre. En conséquence, si négatif, alors dans le sens inverse des aiguilles d'une montre. Dans deux positions, il commence de 0° à 360°.

Original

Filtre

Effet de survol

/*règle statique*/ .efhrotai1 img( filtre : teinte-rotate(180deg); -webkit-filter : teinte-rotate(180deg); ) /*pour l'effet de survol*/ .efhrotai2 img( transition : toutes les 0,6 secondes facilitent les 0 ; ) .efhrotai2:hover img( filtre : teinte-rotate(180deg); -webkit-filter : teinte-rotate(180deg); transition : tous les 0,6 s facilitent les 0 s ; )

Filtre d'inversion

Un effet spécifique qui permet de renverser la couleur d’une image. Dans les éditeurs graphiques, il joue un certain rôle et il arrive que sans sa participation, le résultat souhaité ne puisse être obtenu. Le paramètre de filtre inversé est spécifié uniquement dans le sens positif d'une valeur de 0 % à 100 %.

Original

Filtre

Effet de survol

/*règle statique*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*pour l'effet de survol*/ .efinve2 img( transition : toutes les 0,6 s facilitent les 0 s; ) .efinve2:hover img( filtre : inverser (100 %) ; -webkit-filter : inverser (100 %) ; transition : tous les 0,6 s facilitent les 0 ; )

Filtre de saturation

Lorsqu'une image perd sa couleur naturelle pour des raisons inconnues (par exemple un T-shirt décoloré par le soleil), l'augmentation de la saturation peut restaurer instantanément son aspect d'origine. Et si ce filtre est utilisé en combinaison avec d’autres filtres, le résultat sera très satisfaisant. Le réglage s'effectue de 0 vue initiale aux grands nombres.

Original

Filtre

Effet de survol

/*règle statique*/ .efsatut1 img( filtre : saturer(165%); -webkit-filter : saturer(165%); ) /*pour l'effet de survol*/ .efsatut2 img(transition : toutes les 0,6 s facilitent les 0 s; ) .efsatut2:hover img( filtre : saturer (165 %); -webkit-filter : saturer (165 %); transition : tous les 0,6 s facilitent les 0 s ; )

Filtre sépia

Imitation de l'effet de photographies anciennes (teinte légèrement brune). Cela permet d'obtenir un style d'image rétro, particulièrement populaire. Le filtre sépia est réglable de 0% (position d'origine) à 100%.

Original

Filtre

Effet de survol

/*règle statique*/ .efsepiaa1 img( filtre : sépia(100%); -webkit-filter : sépia(100%); ) /*pour l'effet de survol*/ .efsepiaa2 img( transition : toutes les 0,6 s facilitent les 0 s; ) .efsepiaa2:hover img( filtre : sépia (100 %) ; -webkit-filter : sépia (100 %) ; transition : tous les 0,6 s facilitent les 0 ; )

Transparence du filtre

Un filtre similaire à la propriété opacity de la table en cascade version 3. La syntaxe est la même et la valeur de transparence est réglable de 0 % à 100 % (position d'origine).

Original

Filtre

Effet de survol

/*règle statique*/ .efopaty1 img( filtre : opacité(50%); -webkit-filter : opacité(50%); ) /*pour l'effet de survol*/ .efopaty2 img( transition : toutes les 0,6 s facilitent les 0 s; ) .efopaty2:hover img( filtre : opacité (50 %) ; -webkit-filter : opacité (50 %) ; transition : tous les 0,6 s facilitent les 0 ; )

Lien de filtre

Un filtre personnalisé est créé à partir d'éléments SVG avec un identifiant spécifique, qui peut ensuite être utilisé en CSS via un filtre de lien. Les effets peuvent être très différents des filtres standards, des masques de superposition à la transparence banale.

Générateur de filtres CSS

Il est depuis longtemps habituel de créer des générateurs de diverses propriétés CSS. , et bien plus encore. Ils servent d’outil pour faciliter le travail. Et pour les webmasters débutants, ils peuvent présenter un double avantage. Ils sont très simples à utiliser : déplacez les curseurs et vous pourrez voir les résultats immédiatement. Et une fois terminé, il ne reste plus qu'à copier le code généré. Il en va de même pour les générateurs de filtres CSS. En voici deux pour votre référence :

Conclusion

L'examen s'est avéré assez volumineux, mais j'espère qu'il sera utile à quelqu'un dans la pratique. N’oubliez pas non plus de combiner les filtres, un c’est bien, mais deux seront mieux dans certains cas.

Filtres CSS3 reproduire des effets visuels dans le navigateur similaires aux filtres Photoshop. Des filtres peuvent être ajoutés non seulement aux images, mais également à tout élément non vide.

L'ensemble des filtres ne se limite pas à ceux préinstallés dans le navigateur. Vous pouvez également utiliser des filtres SVG en les téléchargeant à partir du lien avec l'élément svg.

Les filtres ont été créés à l'origine dans le cadre de la spécification SVG. Leur tâche consistait à appliquer des effets basés sur une grille de pixels aux graphiques vectoriels. Avec le support SVG dans les navigateurs, il est désormais possible d'utiliser ces effets directement dans les navigateurs.

Les navigateurs traitent la page pixel par pixel, appliquant les effets spécifiés et dessinant le résultat par-dessus l'original. Ainsi, en utilisant plusieurs filtres, vous pouvez obtenir différents effets ; ils semblent se chevaucher. Plus il y a de filtres, plus le navigateur met du temps à afficher la page.

Vous pouvez appliquer plusieurs filtres en même temps. La manière classique d’appliquer de tels effets consiste à survoler un élément : hover .

Prise en charge du navigateur

IE : ne supporte pas
Bord: 13.0 sauf url()
Firefox : 35.0
Chrome: 18.0 -kit Web-
Safari: 9.1, 6.0 -kit Web-
Opéra: 40.0, 15.0 -kit Web-
iOS-Safari : 9.3, 6.1 -kit Web-
Navigateur Android : 53.0, 4.4 -kit Web-
Chrome pour Android: 55.0, 47.0 -kit Web-

filtre
se brouiller()	La valeur est spécifiée en unités de longueur, par exemple px, em. Applique un flou gaussien à l'image originale. Plus la valeur du rayon est grande, plus le flou est important. Si aucune valeur de rayon n'est spécifiée, la valeur par défaut est 0.
luminosité()	La valeur est spécifiée en % ou en fractions décimales. Modifie la luminosité de l'image. Plus la valeur est élevée, plus l'image est lumineuse. La valeur par défaut est 1.
contraste()	La valeur est spécifiée en % ou en fractions décimales. Ajuste le contraste de l'image, c'est-à-dire la différence entre les zones les plus sombres et les plus claires de l’image/de l’arrière-plan. La valeur par défaut est 100 %. Une valeur de zéro masquera l'image originale sous un fond gris foncé. Les valeurs augmentant de 0 à 100 % ou de 0 à 1 ouvriront progressivement l'image d'origine à l'affichage d'origine, et les valeurs ci-dessus augmenteront le contraste entre les hautes lumières et les ombres.
ombre portée()	Le filtre agit de manière similaire aux propriétés box-shadow et text-shadow. Utilise les valeurs suivantes : Décalage X Décalage Y flou étirement couleur de l'ombre. La particularité du filtre est que l'ombre est ajoutée aux éléments et à leur contenu en tenant compte de leur transparence, c'est-à-dire si l'élément contient du texte à l'intérieur, le filtre ajoutera une ombre à la fois pour le texte et les bordures visibles du bloc. Contrairement aux autres filtres, pour ce filtre il est nécessaire de définir des paramètres (le minimum est la valeur de décalage).
niveaux de gris()	Extrait toutes les couleurs d'une image, ce qui donne une image en noir et blanc. La valeur est spécifiée en % ou en fractions décimales. Plus la valeur est élevée, plus l’effet est fort.
teinte-rotation()	Modifie les couleurs de l'image en fonction de l'angle de rotation spécifié dans la roue chromatique. La valeur est spécifiée en degrés de 0° à 360°. 0deg est la valeur par défaut, ce qui signifie aucun effet.
inverser()	Le filtre rend l'image négative. La valeur est spécifiée en %. 0% n'applique pas de filtre, 100% convertit complètement les couleurs.
opacité()	Le filtre fonctionne de la même manière que la propriété opacité, ajoutant de la transparence à l'élément. Une particularité est que les navigateurs fournissent accélération matérielle pour le filtre, ce qui améliore les performances. Un avantage supplémentaire est que le filtre peut être combiné avec d'autres filtres en même temps, créant des effets intéressants. La valeur est définie sur % uniquement, 0 % rend l'élément complètement transparent et 100 % n'a aucun effet.
saturer()	Contrôle la saturation des couleurs, en travaillant sur le principe d'un filtre de contraste. Une valeur de 0 % supprime la couleur, tandis qu'une valeur de 100 % n'a aucun effet. Les valeurs de 0 % à 100 % réduisent la saturation des couleurs, les valeurs supérieures à 100 % augmentent la saturation des couleurs. La valeur peut être spécifiée en % ou sous forme d'entier, 1 équivaut à 100 % .
sépia()	Un effet qui imite l'antiquité et le « rétro ». Une valeur de 0% ne change pas apparenceélément et reproduit à 100 % l'effet sépia.
URL()	La fonction accepte l'emplacement d'un fichier XML externe avec un filtre svg, ou une ancre à un filtre situé dans le document actuel.
aucun	Valeur par défaut. N'indique aucun effet.
initial	Définit cette propriété à sa valeur par défaut.
hériter	Hérite de la valeur de propriété de l'élément parent.

Bonjour. Aujourd’hui, vous ne surprendrez personne avec de beaux effets sur les sites Web. Certains le font en Flash depuis 10 ans, d’autres n’ont pas encore arrêté de le faire en Javascript, mais les plus avancés utilisent CSS3 depuis longtemps. C'est ce que nous allons faire aujourd'hui.

Apprenons à décolorer Image CSS(Image CSS en niveaux de gris), et faisons-le magnifiquement

Alors commençons par quelque chose de simple, il nous faut de belles photos, prenons ceci :

Nous devons le désaturer (désaturer l'image CSS - supprimer les couleurs, rendre l'image en noir et blanc). Pour cela (et pour travailler avec des graphiques en général), CSS3 dispose d'un outil de filtrage spécial.

C'est ce que nous utiliserons.

Solution : Désaturer l'image CSS

Commençons par présenter l'image elle-même :

Ensuite, nous définirons un style pour l'image :

Img ( -webkit-filter : niveaux de gris (100 %) ; -moz-filter : niveaux de gris (100 %) ; -ms-filter : niveaux de gris (100 %) ; -o-filter : niveaux de gris (100 %) ; filtre : niveaux de gris ( 100 % ); filtre : gris ; /* IE 6-9 */ )

Maintenant, notre image deviendra en noir et blanc.

On peut bien sûr s’arrêter là, mais c’est bien plus intéressant quand l’image répond aussi aux actions de l’utilisateur.

Je propose de faire en sorte que lorsque vous survolez l'image, elle se colore progressivement.

En fait, ce n’est pas du tout difficile à faire et vous n’avez pas du tout besoin de connaître Javascript.

Animer la décoloration de l'image CSS

Ajoutons un peu à notre style précédent :

Img ( -webkit-filter : niveaux de gris (100 %) ; -moz-filter : niveaux de gris (100 %) ; -ms-filter : niveaux de gris (100 %) ; -o-filter : niveaux de gris (100 %) ; filtre : niveaux de gris ( 100 % ); filtre : gris ; /* IE 6-9 */ ) img:hover ( -webkit-filter : aucun ; -moz-filter : aucun ; -ms-filter : aucun ; -o-filter : aucun ; filtre : aucun ; filtre : aucun ; /* IE 6-9 */ )

Cela permettra à l'image de devenir colorée lorsque vous la survolerez avec la souris. Utilisons également la transition CSS3 pour animer le processus de décoloration :

Img ( -webkit-filter : niveaux de gris (100 %) ; -moz-filter : niveaux de gris (100 %) ; -ms-filter : niveaux de gris (100 %) ; -o-filter : niveaux de gris (100 %) ; filtre : niveaux de gris ( 100 % ); filtre : gris ; /* IE 6-9 */ /*Ajouter ce code*/ -webkit-transition : tous les 1 ; -moz-transition : tous les 1 ; /*fin du code avec transition ; */ ) img:hover ( -webkit-filter : aucun ; -moz-filter : aucun ; -ms-filter : aucun ; -o-filter : aucun ; filtre : aucun ; filtre : aucun ; /* IE 6-9 * / )

Le paramètre all en transition indique que la règle fonctionnera pour tous les styles, et le deuxième paramètre est la durée de l'animation.
Dans le premier paramètre, vous pouvez spécifier une certaine propriété (par exemple, la hauteur, pour animer uniquement la hauteur), et dans le second, le temps en secondes (peut être en fractions décimales - 0,1 s).