L'image CSS filtre la superposition de couleurs. Filtres d'images CSS. Quels filtres peuvent être utilisés en CSS

Les filtres CSS ont été créés pour produire différents effets visuels lorsqu'ils sont appliqués aux éléments DOM. Dans cet article, nous parlerons de l'histoire des filtres, de ce qu'ils font et comment les utiliser. Nous considérerons également leur impact sur les performances à la fois sur les ordinateurs de bureau et appareils mobiles.

Passé, présent et futur des filtres

Les filtres ont été créés dans le cadre de la spécification SVG. Leur tâche consistait à appliquer des effets basés sur une grille de pixels à graphiques vectoriels. Au fil du temps, les navigateurs Internet se sont dotés du support SVG et l’utilité des filtres est devenue évidente. Robert O'Callahan de Mozilla a décrit l'idée d'appliquer des filtres SVG à Éléments DOM en les décrivant en CSS. Il a créé un exemple qui montre à quel point cela pourrait être plus simple application de SVG effets en combinaison avec CSS. Ouvriers Groupes CSS et SVG se sont associés et ont créé un nouveau Propriétés CSSÔ filtre. La documentation de cette spécification se trouve.

Nouvelle vie pour la propriété « filtre »

Parfois, en parcourant le code CSS d'une page sur Internet, on tombe souvent sur cette propriété. Mais dans la plupart des cas, cette propriété est écrite pour les anciennes versions Internet Explorer, il contrôle certains des effets implémentés dans le navigateur. Cette propriété a été omise au profit d'une propriété standard qui fait déjà partie de la spécification CSS3.

Comment fonctionnent les filtres

A quoi servent les filtres ? Vous pouvez imaginer qu'il s'agit d'une sorte de post-traitement qui fait des merveilles sur les éléments de la page après leur rendu.

Lorsque le navigateur charge une page Web, il crée sa mise en page, applique des styles et enfin la restitue. Les filtres sont appliqués après toutes ces opérations, mais avant que la page rendue n'apparaisse à l'écran. Ils traitent la page pixel par pixel, en appliquant les effets spécifiés et en 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 de temps pour afficher la page.

Description des filtres utilisant SVG et CSS

Il existe plusieurs façons de décrire et d'appliquer des filtres. SVG lui-même est un élément dans lequel les filtres sont décrits à l'aide de la syntaxe XML. Description des filtres utilisant Styles CSS donne le même résultat, mais grâce à la syntaxe CSS, cette méthode est beaucoup plus simple.

Le plus standard Filtres CSS peut être décrit en utilisant SVG, CSS permet également de faire référence aux filtres décrits dans Format SVG. Ici nous ne parlerons que des filtres disponibles en CSS.

Comment utiliser les filtres CSS

Les filtres peuvent être appliqués à n’importe quel élément visible sur la page.

Div ( filtre : niveaux de gris (100 %); )

Cet exemple changera la couleur du contenu à l’intérieur de la balise en noir et blanc.

Chaque filtre possède un paramètre qui vous permet de modifier la force du filtre.

Div ( filtre : niveaux de gris (50 % ); )

Vous pouvez appliquer plusieurs filtres en même temps.

Quels filtres peuvent être utilisés en CSS

niveaux de gris (valeur)

Convertit les couleurs en n/b. La valeur est spécifiée à la fois en pourcentage (0 % - 100 %) et décimales (0 - 1).

sépia (valeur)

Crée un effet sépia. La valeur est spécifiée à la fois en pourcentage (0 % - 100 %) et en fraction décimale (0 - 1).

saturer (valeur)

Contrôle la saturation des couleurs. La valeur est spécifiée à la fois en pourcentage (0 % - 100 %) et en fraction décimale (0 - 1).

teinte-rotation (angle)

Modifie les couleurs de l'image en fonction de angle donné. L'angle de rotation détermine dans quelle mesure une couleur donnée changera sur la roue chromatique du rouge au violet. La valeur est spécifiée en degrés (0deg - 360deg).

inverser (valeur)

Inverse les couleurs. La valeur est spécifiée à la fois en pourcentage (0 % - 100 %) et en fraction décimale (0 - 1).

opacité (valeur)

Définit la transparence de l'élément. La valeur est spécifiée à la fois en pourcentage (0 % - 100 %) et en fraction décimale (0 - 1).

Ce filtre fonctionne de la même manière qu'une propriété CSS. opacité. La seule différence est que le filtre prend en charge l’accélération matérielle, contrairement à la propriété. Ainsi, l’utilisation d’un filtre donnera de meilleures performances.

luminosité (valeur)

Modifie la luminosité de l'image. La valeur est spécifiée à la fois en pourcentage (0 % et plus) et en fractions décimales (0 et plus).

contraste(valeur)

Modifie le contraste de l'image. La valeur est spécifiée à la fois en pourcentage (0 % et plus) et en fractions décimales (0 et plus).

flou (rayon)

Crée un effet de flou. La valeur est spécifiée en pixels (px).

ombre portée (x, y, rayon, couleur)

Crée une ombre similaire à une propriété CSS boîte-ombre, mais seul le filtre est pris en charge accélération matérielle. Les valeurs sont définies de la même manière Valeurs CSS analogue

Ombre portée (16px 16px 20px noir);

Filtre : ombre portée (encart 0 0 2rm bleu) ;

Vous pouvez créer vos propres filtres en utilisant l'élément SVG filtre et référencez-les à partir de CSS. Chaque filtre a son propre identifiant.

...

Div ( filtre : url(#foo); )

personnalisé (à venir)

Bientôt, vous aurez la possibilité de créer vos propres filtres à l'aide de CSS Shaders.

Performance

Les filtres CSS offrent un excellent effets visuels, mais affectent en même temps négativement les performances de votre site Web. Il est important de comprendre ce qu'ils font et comment cela affecte les performances.

La plupart des filtres fonctionnent assez rapidement sur n'importe quel appareil qui les prend en charge. Cependant, les filtres se brouiller Et ombre portée, qui utilisent l'effet de flou, fonctionnent beaucoup plus lentement que les autres. Comment fonctionnent-ils exactement ?

Lorsque vous appliquez un filtre se brouiller, il mélange les couleurs des pixels autour de chaque pixel, créant ainsi un effet flou. Par exemple, si le rayon est donné 2px, le filtre sélectionnera deux pixels dans toutes les directions et mélangera leurs couleurs, et ainsi de suite pour chaque pixel. Comment rayon plus grand, plus il faut de temps pour calculer l'effet. Étant donné que le filtre sélectionne les pixels dans toutes les directions, lorsque le rayon de flou augmente de 2 fois, le nombre de pixels augmente de 4 fois. Cela signifie que le temps de calcul prendra exactement 4 fois plus de temps. Filtre ombre portée contient un filtre se brouiller.

Vous pouvez utiliser ces filtres en toute sécurité sur des plates-formes offrant une accélération matérielle, mais tous les navigateurs ne la prennent pas en charge. Dans ce cas, cela vaut la peine d'expérimenter et, après avoir obtenu le résultat souhaité, d'essayer de réduire autant que possible le rayon de flou sans endommager de manière critique l'effet visuel.

Lorsque vous utilisez des filtres SVG personnalisés, assurez-vous qu'ils ne contiennent pas d'effets susceptibles d'affecter négativement les performances.

Compatibilité

La plupart des filtres CSS sont désormais disponibles pour une utilisation dans le navigateur FireFox et les navigateurs basés sur le moteur WebKit. Nous espérons voir du soutien bientôt Navigateurs Opera et IE10. Puisque la spécification est encore en cours de développement, les préfixes des fournisseurs doivent être utilisés. Pour WebKit -filtre-webkit, FireFox ne nécessite pas de préfixe.

Vous trouverez ci-dessous un tableau de compatibilité des filtres avec les navigateurs.

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(Niveaux de gris image css), 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 a remède spécial filtre.

C'est ce que nous utiliserons.

Solution : Décolorer 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.
Le premier paramètre peut être spécifié certains biens(par exemple la hauteur, pour animer uniquement la hauteur), et dans un deuxième temps en secondes (peut être en fractions décimales - 0,1s).

Bonjour les amis, aujourd'hui j'ai une très GRANDE leçon pour vous, 27 minutes entières. Mais nous y examinerons simplement une propriété très, très, très intéressante qui vous permettra de définir divers effets spéciaux pour les images sans entrer dans les détails. Programme Photoshop et d'autres éditeurs.

Filtre est une propriété en CSS3 qui peut modifier vos images. Appliquez du flou, augmentez le contraste et la luminosité, ajoutez des ombres, changez les couleurs et bien plus encore.

Au total, Filter a 10 valeurs qui vous permettent de faire « toutes sortes de choses intéressantes » avec les éléments du site. Je vous propose maintenant d'analyser toutes ces 10 significations en pratique dans le tutoriel vidéo ci-dessous.

Filtre vidéo CSS 3 – Filtres d'image :

Un exemple de la page que nous créons dans ce tutoriel :

Vous pouvez télécharger le fichier modèle en utilisant .

Attention! La propriété filters est actuellement en test et n'est entièrement prise en charge que par le navigateur Firefox. UN Navigateur Chrome et d'autres basés sur le moteur Webkit, cette propriété ne fonctionne que lors de l'ajout de préfixes. Je montre les préfixes à la fin de la leçon, je recommande donc de les parcourir en premier. Firefox le plus récent versions.

Si vous êtes trop paresseux pour regarder la vidéo, vous pouvez la regarder instructions détaillées ci-dessous avec toutes les règles de filtrage.

10 effets de filtre en CSS3

Veuillez noter que tous les effets dans les images ci-dessous sont implémentés uniquement en utilisant CSS3, ils ne seront donc pas visibles dans les anciens navigateurs !!!

1. Filtre de flou

Si nous parlons dans un langage simple, alors c'est le flou habituel de l'image. Un filtre est idéal si vous devez adoucir les bords. Le flou crée l’apparence d’un arrière-plan flou.

Essayons d'appliquer notre filtre sur le renard en écrivant le code suivant :

A gauche, pour plus de clarté, j'ai mis une photo normale, mais à droite se trouve la même image, modifiée uniquement à l'aide de CSS3.

Un filtre avec une valeur de flou est spécifié en pixels. De plus, plus cette valeur est élevée, plus l’image apparaît floue.

Luminosité du filtre

Ce filtre est similaire à la modification de la luminosité d'un écran de télévision. DANS dans ce cas couleur réglable entre noir et couleur d'origine au fur et à mesure que les paramètres sont ajoutés.

Et voici notre cheval expérimental :

Vous pouvez ajuster à partir de 0 % ou plus. À 0 % l'image sera noire, à 100 % elle sera originale et à 200 % elle deviendra deux fois plus lumineuse. C'est très bon effet, en particulier pour les images sombres.

Le filtre de luminosité peut être spécifié de 3 manières :

1. entiers
2. nombres fractionnaires
3. intérêt

De plus, il n’y a en principe aucune restriction. Dans l'exemple, nous avons défini la valeur sur 2 et augmenté la luminosité de notre image de 2 fois ou 200 %.

3. Filtre de contraste

Ce filtre vous permettra d'augmenter le contraste d'une image en ajustant la différence entre les tons clairs et sombres de l'image. Ici, les valeurs sont également spécifiées de trois manières : nombres entiers, fractions et pourcentages. Donc 100 % est la valeur par défaut. 0% - image noire. Et tout ce qui dépasse 100 % vous ajoute du contraste.

Cette fois, nous allons nous moquer du chat. Ajoutons-y +50% de contraste :

Voici le résultat :

Comme vous pouvez le constater, nous n'avons même plus besoin d'utiliser Photoshop pour créer du contraste et du flou. Ici, directement en CSS, nous prenons et modifions les images selon nos envies.

4. Saturation du filtre - saturer

C'est un effet très sympa qui rendra vos images plus vibrantes et plus riches. Nous indiquons les valeurs selon trois options : nombres entiers et fractionnaires, ainsi que pourcentages. Précisons la valeur - 200%. Augmentons la saturation de notre image de 2 fois.

La mer est devenue sensiblement plus agréable :

Regardez à quel point l'image est juteuse. Je pense que c'est un effet très cool ! On y va ??

5. Filtrer la transparence - l'opacité

Définit la transparence. Certaines restrictions sont imposées sur les valeurs de ce filtre :

• pourcentages : de 0% à 100

Essayons de réduire la transparence de l'image suivante de 50 %.

Regardez ce qui s'est passé :

6. Inversion du filtre - inverser

Il vous permet de « retourner » les couleurs. Il existe également des restrictions sur les valeurs de ce filtre :

• nombres entiers et fractionnaires : de 0 à 1
• pourcentages : de 0% à 100

Dans notre cas nous poserons valeur maximale - 100 %:

Et d'un léger mouvement de la main, une belle voiture de sport se transforme en...

Ce filtre nous a aidé à créer un effet négatif sur l'image elle-même.

7. Filtre sépia

Il vous permettra de changer la couleur en ajoutant un ton sépia. Autrement dit, vous obtiendrez une imitation vieille photo. Les restrictions sur les valeurs de filtre sont les mêmes que dans les deux précédentes.

• nombres entiers et fractionnaires : de 0 à 1
• pourcentages : de 0% à 100

Bien? Devons-nous essayer ?

Putain-tibidoh ! D’un léger geste de la main, nous vieillirons cette photo de quelques décennies. On dirait que je deviens fou avec ces exemples.

Dans notre cas, nous avons spécifié une valeur fractionnaire - 0,5. Mais vous pouvez expérimenter à votre guise !

8. Filtre en niveaux de gris

Ce filtre nous permet de transformer les couleurs en nuances de gris. Il existe également des restrictions sur les valeurs de filtre :

• nombres entiers et fractionnaires : de 0 à 1
• pourcentages : de 0% à 100

Ainsi, à 100 % l'image entière sera en nuances de gris, et à 0 % elle restera inchangée. 0 est égal à 0 % et 1,0 est égal à 100 %.

Fixons la valeur à 0,7 (ou 70 %) :

Auparavant, pour modifier, par exemple, la luminosité/le contraste d'une image d'un site Web, des filtres de différents éditeurs graphiques étaient utilisés. Ces temps sont déjà révolus ; ces effets peuvent désormais être implémentés en utilisant les propriétés et les paramètres de la technologie CSS3.

Le filtre est une propriété de feuilles de style en cascade CSS3 utilisée pour modifier gamme de couleurs images. Principalement utilisé avec le préfixe -webkit-.

Malheureusement, cette propriété CSS3 n'est pas prise en charge navigateurs obsolètes. Vous pouvez voir la liste des navigateurs pris en charge.

1. Niveaux de gris - teinte grise (filtre noir et blanc)

Pour créer un effet "filtre noir et blanc", utilisez le paramètre niveaux de gris, auquel une valeur de 0 à 100 % est appliquée.

2. Sépia - teinte marron clair (filtre sépia)

Pour créer un effet "filtre marron clair", utilisez le paramètre sépia, auquel est appliquée une valeur comprise entre 0 et 100 %.

Pour créer un effet « filtre de luminosité », utilisez le paramètre de luminosité, auquel est appliquée une valeur de 0 à des valeurs élevées (en pourcentage).

Par exemple, à 0% l'image sera noire, à 100% la luminosité d'origine de l'image sera utilisée, à 200% la luminosité augmentera de 2 fois.

4. Contraste - filtre de contraste

Le filtre de contraste ajuste la différence entre les tons sombres et clairs d'une image. Le paramètre de contraste est utilisé et une valeur comprise entre 0 et un pourcentage élevé est appliquée.

À 0 %, l'image sera noire, à 100 %, le contraste de l'image d'origine sera utilisé, à 150 %, le contraste augmentera de 1,5 fois.

Le filtre de saturation donne à une image un aspect plus riche et plus saturé. Le paramètre saturé est utilisé, une valeur de 0 à de grandes valeurs est appliquée (en pourcentage).

A 0% l'image devient noir et blanc (analogue au filtre niveaux de gris), à 100% la saturation originale de l'image sera utilisée, à 200% la saturation augmentera de 2 fois.

Inversion des couleurs - changement de la gamme de couleurs d'une image par celle opposée dans le spectre.

Le paramètre invert est responsable du fonctionnement du filtre ; une valeur de 0 à 100 % est appliquée.

Ce filtre modifie l'angle de couleur en fonction de la « roue chromatique » et le décale d'une valeur spécifiée en degrés.

Le paramètre hue-rotate est responsable du fonctionnement du filtre ; une valeur de 0 à 360 degrés (deg) est appliquée.

Crée un effet de flou d'image. L'essence du filtre est de déterminer le nombre de pixels dans le rayon qui fusionneront les uns avec les autres (plus le paramètre est grand, plus le flou est grand)

Le paramètre flou est responsable du fonctionnement du filtre ; la valeur est spécifiée en pixels (px).

Le filtre ajuste le niveau de transparence de l'image.

Le paramètre d'opacité est responsable du travail ; la valeur est définie entre 0 et 100 %. A une valeur de 10% l'image sera à peine visible, à 100% il n'y aura pas de transparence.

Comment faire une animation au survol (comme dans les exemples de démo) ?

Balisage HTML

/* Appliquer la classe de flou à l'image */

Balisage CSS

Sur la base de l'exemple de démonstration, l'image dans un état statique est déjà dans un état flou, mais lorsqu'elle est survolée, elle devient claire, c'est-à-dire le flou est désactivé. Sur cette base, nous obtenons les styles suivants :

Img ( transition : 0,5 s tout ; // transition douce, 0,5 seconde ) img.blur ( -webkit-filter:blur(1px); //flou actif, décalage 1px ) img.blur:hover ( -webkit-filter:blur (0px); //le flou est désactivé, il n'y a pas de décalage de pixels)

Les propriétés CSS ont mûri au point où elles peuvent gérer certaines fonctions importanteséditeurs graphiques. Un exemple en est les filtres CSS, avec lesquels vous pouvez créer beaux 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. En attendant, regardons ce qui se passe à l'heure actuelle a déjà été mise en œuvre.

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 ». Les nuances sont appliquées grisà l’image en fonction du pourcentage spécifié. 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 souvent utilisé dans le 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 tableau 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 de l'étirement et de la valeur d'insertion ( ombre intérieure), 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 de noter que lorsqu'un bloc n'a pas d'arrière-plan, mais seulement un bordure de trait, alors lors de l'utilisation de box-shadow, l'ombre sera affichée soi-disant en tenant compte de l'arrière-plan, c'est-à-dire 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 tous les temps 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 position de départ indiqué à 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 s facilitent les 0 s ; ) .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 a un certain rôle et il arrive que sans sa participation, il soit impossible de réaliser résultat souhaité. Le paramètre de filtre inversé est spécifié uniquement dans côté positif 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

Quand une image perd sa couleur naturelle raisons inconnues(quelque chose comme un T-shirt délavé au soleil), puis augmenter la saturation peut restaurer instantanément vieux look. 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

Simuler l'effet photographies d'époque(teinte légèrement brune). Cela permet d'obtenir style rétro des images particulièrement populaires. 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

Le filtre est similaire propriété d'opacitéà partir 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

Créez votre propre filtre Basé sur SVG des éléments avec un identifiant spécifique, qui peuvent ensuite être utilisés 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 d'usage de créer des générateurs divers CSS propriétés. , 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é. Pareil avec Générateurs CSS filtres. 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.