Share
Pensez à une situation où vous devez avoir des versions à contraste élevé, floues ou plus lumineuses d’images particulières sur votre site Web. Avant les filtres CSS, vos seules options étaient soit de télécharger différentes versions de ces images, soit de les manipuler avec JavaScript..
À moins que vous ne souhaitiez manipuler les pixels de l'image d'origine, les filtres CSS constituent une solution de sortie facile. Commençons ce tutoriel par une brève discussion de tous les filtres disponibles..
Ce filtre appliquera un flou gaussien à vos images. Vous devrez fournir une valeur de longueur qui déterminera le nombre de pixels nécessaires pour se fondre l'un dans l'autre. Cela implique qu'une valeur plus grande fournira une image plus floue. N'oubliez pas que vous ne pouvez pas utiliser le pourcentage pour déterminer le rayon de flou. Si vous ne spécifiez pas de paramètre, la valeur 0 est utilisée. La syntaxe appropriée pour utiliser ce filtre est la suivante:
filtre: flou ()
le brouiller() le filtre n'accepte pas les valeurs négatives.
Ce filtre appliquera un multiplicateur linéaire à vos images, les rendant plus claires ou plus faibles par rapport aux images d'origine. Il accepte un nombre ainsi qu'un pourcentage. À 0%, vous obtiendrez une image complètement noire. À 100%, vous obtenez l'image d'origine sans aucune modification. Des valeurs plus élevées produiront des images plus lumineuses. Une valeur suffisamment élevée transformera l'image en blanc. La syntaxe appropriée pour utiliser ce filtre est la suivante:
filtre: luminosité ([| ])
Ce filtre n'accepte pas non plus de valeurs négatives.
Ce filtre modifie le contraste de vos images. Tout comme le filtre de luminosité, il accepte un nombre ainsi que des valeurs en pourcentage. Une valeur de 0% donnera une image complètement grise. Le réglage de la valeur à 100% n'a aucun effet. Des valeurs supérieures à 100% produiront des images à contraste élevé. Vous n'êtes pas autorisé à utiliser des valeurs négatives avec le contraste() filtre. La syntaxe appropriée pour utiliser ce filtre est la suivante:
filtre: contraste ([| ])
Presque chacun d'entre vous a peut-être utilisé une boîte à ombre au moins une fois. Le problème avec box-shadow est qu'ils sont boxy. Vous ne pouvez pas les utiliser pour créer des ombres de formes irrégulières. D'autre part, le ombre portée Le filtre crée des ombres autour de la limite d'une image. Il s'agit essentiellement d'une version floue du masque alpha de l'image d'entrée. La syntaxe à utiliser ombre portée est:
filtre: ombre portée (2,3 ? )
Les deux premières valeurs de longueur sont requises et définissent le décalage d'ombre horizontal et vertical. Le troisième
Ce filtre rendra vos images en niveaux de gris. Une valeur de 0% laissera l'image inchangée, tandis qu'une valeur de 100% rendra l'image complètement en niveaux de gris. Toute valeur entre ces deux effets sera un multiplicateur linéaire sur cet effet. Vous ne pouvez pas utiliser de valeurs négatives avec le niveaux de gris () filtre. La syntaxe appropriée pour utiliser ce filtre est la suivante:
filtre: niveaux de gris ([| ])
Ce filtre appliquera une rotation de teinte sur vos images. Le paramètre (transmis sous forme d'angle) déterminera le nombre de degrés autour du cercle de couleur auquel les images seront ajustées. Avec une valeur 0deg, l'image finale sera inchangée. Si vous spécifiez une valeur au-delà de 360 degrés, le filtre est simplement bouclé. La syntaxe appropriée pour utiliser ce filtre est la suivante:
filtre: teinte-rotation ()
Ce filtre inversera vos images. La quantité d'inversion dépend de la valeur du paramètre que vous avez transmis. Une inversion de 0% n'aura aucun effet sur l'image. D'autre part, une valeur de 100% inversera complètement l'image. Une valeur de 50% produira une image complètement grise. Toute valeur entre les extrêmes sera un multiplicateur linéaire de l'effet. Ce filtre n'accepte pas les valeurs négatives. La syntaxe appropriée pour utiliser le inverser() le filtre est:
filtre: inverser ([| ])
Le filtre d'opacité applique la transparence à l'image d'entrée. Une valeur de 0% implique que vous souhaitez une opacité de 0%, ce qui donne une transparence totale. De même, une valeur de 100% donne une image complètement opaque.
Le filtre est similaire à la propriété opacity en CSS. La seule différence est que, dans ce cas, certains navigateurs peuvent fournir une accélération matérielle pour améliorer les performances. La syntaxe appropriée pour utiliser ce filtre est la suivante:
filtre: opacité ([| ]);
Ce filtre détermine la saturation de vos images. La saturation elle-même dépend de la valeur du paramètre. Vous ne pouvez pas utiliser de valeurs négatives avec ce filtre. À 0%, la valeur minimale possible, l'image sera complètement insaturée. Avec une valeur de saturation de 100%, l'image reste inchangée. Pour obtenir des images sursaturées, vous devez utiliser des valeurs supérieures à 100%. La syntaxe appropriée pour utiliser ce filtre est la suivante:
filtre: saturer ([| ])
Ce filtre transformera vos images originales en sépia. À 100%, vous obtiendrez un sépia complet et une valeur de 0% n'aura aucun effet sur l'image. Toutes les autres valeurs situées entre les deux seront des multiplicateurs linéaires de ce filtre. Vous n'êtes pas autorisé à utiliser des valeurs négatives avec ce filtre. La syntaxe appropriée pour utiliser le sépia() le filtre est:
filtre: sépia ([| ])
Il peut arriver que vous souhaitiez utiliser vos propres filtres sur les images. le url Le filtre prendra l'emplacement d'un fichier XML qui spécifie un filtre SVG. Il accepte également une ancre à un élément de filtre spécifique. Voici un exemple qui aboutit à la postérisation de notre image:
// Le filtre // CSS requis pour appliquer ce filtre filter: url (#posterize);
Le résultat final après l'application du filtre ressemblerait à l'image suivante:
Si vous n'êtes pas satisfait de la sortie d'un filtre individuel, vous pouvez appliquer une combinaison de ceux-ci sur une seule image. L'ordre dans lequel vous appliquez les filtres peut produire des résultats légèrement différents. Plusieurs filtres peuvent être appliqués de la manière suivante:
filtre: contraste sépia (0,8) (2); filtre: saturer (0,5) brillance teinte-rotation (90 °) (1,8);
Lorsque vous utilisez plusieurs filtres ensemble, la première fonction de filtre de la liste est appliquée à l'image d'origine. Les filtres suivants sont appliqués à la sortie des filtres précédents. Cette démo montre deux autres combinaisons de filtres en action.
Dans certaines circonstances particulières, l'ordre des filtres peut produire des résultats complètement différents. Par exemple, en utilisant sépia() après niveaux de gris () produira une sortie sépia, et en utilisant niveaux de gris () après sépia() se traduira par une sortie en niveaux de gris.
La propriété de filtre peut être animée. Avec la bonne combinaison d’image et de filtres, vous pouvez exploiter cette fonctionnalité pour créer des effets époustouflants. Considérons l'extrait de code ci-dessous:
@keyframes jour-nuit 0% filtre: teinte-rotation (0deg) luminosité (120%); 10% filter: teinte-rotation (0deg) luminosité (120%); 20% filter: teinte-rotation (0deg) luminosité (150%); 90% filtre: brillance teinte-rotation (180 degrés) (10%); 100% filtre: luminosité teinte-rotation (180 degrés) (5%);
J'utilise le teinte-rotation () et luminosité() filtrez ensemble pour créer l'illusion du jour et de la nuit. L'image originale elle-même a une teinte orange. Jusqu'à 20% de l'animation, j'augmente progressivement la luminosité tout en maintenant la rotation de teinte à zéro. Cela crée l'effet d'une journée ensoleillée. À la fin de l'animation, je fais pivoter la teinte de 180 degrés. Cela se traduit par une teinte bleue. La combinaison de ceci avec une très faible luminosité crée l'effet de nuit.
Outre les 11 filtres évoqués ci-dessus, il existe également un Douane() filtre. Il vous permet de créer des types d'effets complètement différents à l'aide de shaders. Il y a quelques problèmes avec Douane() filtres qui ont stoppé leur développement. Adobe s’emploie activement à trouver des solutions aux problèmes qui surviennent lors de l’utilisation de Douane() filtres. Espérons qu'ils seront bientôt disponibles pour que les développeurs les utilisent dans leurs projets..
Maintenant, revenons sur nos pas. Les filtres sont appliqués à toutes les parties de l'élément cible, y compris le texte, l'arrière-plan et les bordures. Voici une démo de base pour vous permettre d'essayer une combinaison de filtres sur différentes images.
Comme vous l'avez vu dans les deux dernières sections, les filtres CSS peuvent complètement changer les images auxquelles ils sont appliqués. Cependant, parfois, cela ne suffit pas. Dans la suite de cette série, je discuterai de l’utilisation des modes de fusion pour éditer des images..
Accentsconagua