Explorer le pouvoir créatif des filtres CSS et le mélange

Filtres CSS et modes de mélange: un outil puissant pour améliorer les effets visuels Web

Points de base

• Les filtres CSS fournissent une variété d'effets visuels, tels que les niveaux de gris, le flou, le contraste, la luminosité et le tan, qui peuvent améliorer l'attrait visuel du contenu des pages Web et l'utiliser en combinaison pour obtenir des effets complexes.
• Le mode de mélange CSS permet une interaction visuelle entre les éléments pour créer des effets incroyables. Les modes de mélange couramment utilisés comprennent l'empilement positif, le filtrage des couleurs, la superposition, la différence et l'exclusion, etc. Ils gèrent les valeurs de couleur des éléments qui se chevauchent de différentes manières.
• Lors de l'utilisation des filtres et des modes de mélange, l'accessibilité et la compatibilité du navigateur doivent être prises en compte. Un contraste de couleur, une clarté de texte, un texte alternatif d'image et une conception réactive sont essentiels pour garantir que le contenu est disponible et facile à comprendre pour un large éventail de groupes d'utilisateurs.
• Les erreurs courantes dans l'utilisation des filtres CSS et des modes de mélange incluent la surutilisation des filtres, l'application de filtres aux éléments interactifs sans considérer l'interaction de l'utilisateur et ignorer l'impact des performances des filtres ou combinaisons complexes. L'équilibrage de l'utilisation et la hiérarchisation de la clarté permet d'éviter ces pièges.
• Les filtres CSS et les modes de mélange offrent des possibilités créatives sans fin, permettant aux développeurs Web de créer des interfaces utilisateur engageantes et dynamiques. Essayer différentes combinaisons peut produire des effets uniques, ajoutant une sophistication visuelle au site Web.

Cet article explorera les filtres CSS et les modes de mélange qui offrent une variété de possibilités créatives qui peuvent améliorer la beauté d'une page Web.

Apprenez des filtres CSS

Les filtres CSS fournissent un moyen d'appliquer des effets visuels sur les éléments Web. Ces effets peuvent aller de simples ajustements (comme le changement de la luminosité ou du contraste d'une image) à des conversions plus complexes (comme le brouillage ou l'ajout de tons beige).

Plongeons dans certains filtres CSS couramment utilisés et explorons comment ils améliorent l'attrait visuel du contenu Web.

1.

Les filtres convertissent les couleurs en ombres en niveaux de gris, donnant à l'image un look monochromatique et classique. Vous pouvez contrôler l'intensité de l'effet en spécifiant le pourcentage: grayscale()

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

En ajoutant

au conteneur <div>, nous demandons au navigateur d'appliquer l'effet en niveaux de gris à tout dans ce conteneur, y compris les images. En conséquence, l'image affichée dans le conteneur sera affichée dans des ombres en niveaux de gris au lieu de sa couleur d'origine. En définissant la propriété <code>filter: grayscale() sur filter, nous indiquons que nous voulons convertir l'image en niveaux de gris à pleine intensité. grayscale(100%)

Exemple de codepen

2. Les filtres

créent un effet doux et hors de focus. Ceci est particulièrement utile pour les images de fond ou les éléments que nous voulons affaiblir:

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

Ici, nous demandons au navigateur d'appliquer le filtre flou à tout à l'intérieur de ce conteneur, y compris les images. En conséquence, l'image affichée dans le conteneur aura un effet sans focus doux, comme s'il était légèrement flou. En définissant blur(5px), nous indiquons que nous voulons appliquer un effet flou à l'image avec un rayon flou à 5 pixels.

Exemple de codepen

3.

Les filtres améliorent ou réduisent la différence entre les zones lumineuses et sombres d'un élément, ce qui le rend plus visuellement accrocheur: contrast()

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

Ici, le contraste entre les zones lumineuses et sombres de l'image dans le conteneur sera augmentée, ce qui la rend plus visuellement accrocheuse. En le définissant sur

, nous disons que nous voulons augmenter le contraste de l'image de 150%. contrast(150%)

Exemple de codepen

4. Les filtres

contrôlent la luminosité globale de l'élément. Une luminosité accrue peut rendre les couleurs plus vives, tandis que la luminosité réduite peut créer des effets doux ou plus sombres:

brightness()

Ici, la luminosité globale de l'image dans le conteneur sera ajustée. En le définissant sur

<code class="language-css">.image-container {
  filter: blur(5px);
}</code>

, nous disons que nous voulons augmenter la luminosité de l'image de 20%.

brightness(120%)

Exemple de codepen

5.

Les filtres donnent aux éléments un ton bronzé chaud, créant une sensation nostalgique ou rétro:

sepia() Ici, l'image sera présentée avec un ton bronzé chaud, rappelant les vieilles photos. Le régler sur

signifie que nous voulons appliquer l'effet Tan à l'image à 80% d'intensité. L'ajustement de la valeur en pourcentage nous permet de contrôler l'intensité de l'effet Tan appliqué à l'image.

<code class="language-css">.image-container {
  filter: contrast(150%);
}</code>

sepia(80%) Exemple de codepen

combinaison de filtre CSS

L'un des avantages des filtres CSS est leur combinaison. Nous pouvons appliquer plusieurs filtres pour obtenir des effets visuels complexes:

Ici, nous appliquons plusieurs filtres aux éléments du conteneur pour obtenir un effet visuel composite. Les filtres multiples sont séparés par des espaces dans les valeurs d'attribut

. Chaque filtre est appliqué de gauche à droite dans l'ordre spécifié:

<code class="language-css">.image-container {
  filter: brightness(120%);
}</code>

filter

Le filtre convertit la couleur de l'élément en une ombre en niveaux de gris avec une intensité de 30%.

1. grayscale(30%) Le filtre ajoute un effet flou avec un élément radial flou à 3 pixels.
Les filtres
2. blur(3px) augmentent le contraste des éléments de 150%.
3. contrast(150%) En combinant ces filtres, vous pouvez obtenir des effets visuels complexes qui améliorent l'apparence du contenu Web. L'ajustement des paramètres de chaque filtre vous permet de micro-ajuster l'effet corporel en fonction de vos préférences de conception.

Dans cet exemple, l'élément aura des effets de niveaux de gris subtils, un léger flou et un contraste plus élevé, résultant en un aspect unique et artistique.

Exemple de codepen

Plus de filtres

Vous pouvez essayer plus de filtres CSS, notamment drop-shadow(), hue-rotate(), invert(), opacity(), saturate() et backdrop-filter. Il existe également une propriété

qui mélange un fond translucide avec l'image d'arrière-plan derrière.

Vous pouvez en savoir plus sur ces fonctionnalités sur MDN. (Le lien MDN doit être inséré ici)

Utilisez la puissance du mode hybride CSS

Le mode de mélange CSS permet aux éléments d'interagir visuellement, créant des effets au-delà de l'empilement traditionnel de l'axe Z. Le mode mélange traite les valeurs de couleur des éléments qui se chevauchent, produisant des résultats incroyables. Explorons certains modes hybrides couramment utilisés et apprenons à les implémenter.

1.

multiply Le mode de mélange les combine en "multipliant" les valeurs de couleur des éléments qui se chevauchent. Il crée un mélange plus foncé en multipliant les valeurs RVB (rouge, vert, bleu) de chaque pixel sur la couche supérieure avec les pixels correspondants sur la couche inférieure. Cela produira un mélange où les zones communes deviennent plus sombres et les couleurs uniques de chaque couche sont encore visibles:

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

Exemple de codepen

2.

Le mode de mélange dans CSS détermine comment la couleur d'un élément est mélangée avec la couleur de son élément sous-jacent. Il égayera particulièrement la couleur de la couche supérieure et produira un mélange plus brillant. screen

Ce qui suit est de savoir comment fonctionne

Le mode mixte fonctionne: screen

Calcul des couleurs:
1. Pour chaque pixel dans la couche supérieure, les valeurs RVB (rouge, vert, bleu) sont inversées.
   Multipliez ensuite la valeur de couleur inversée avec la valeur RVB correspondante à la couche inférieure.
Résultat:
2. Le résultat est un mélange où les zones communes de la couche deviennent plus lumineuses, ce qui entraîne un effet éclaircissant.
   Plus la couche supérieure est saturée, plus l'effet est fort.

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

Exemple de codepen

3.

Mode de mélange dans

CSS combine les modes

et overlay Blend pour produire des visuels riches et contrastés. Voici comment fonctionne le mode mixte: multiply screen overlay Calcul des couleurs:

Si la couleur du sous-jacent (B) est plus lumineuse que 0,5, le résultat est calculé à l'aide de la formule 2
1. B
   T, où B est la couleur sous-jacente et T est la couleur supérieure.
   • Si la couleur sous-jacente est égale ou plus sombre que 0,5, le résultat est calculé à l'aide de la formule 1 - 2 (1 - b)
   (1 - t).
   Résultat:
2. Le mode Blend combine l'effet assombrissant du mode
   sur les couleurs sombres et l'effet éclaircissant du mode
   • sur les couleurs vives. overlay multiply Le résultat est un mélange qui améliore le contraste et la saturation. La zone sombre devient plus sombre et la zone lumineuse devient plus brillante, créant un effet visuellement frappant. screen

Exemple de codepen

<code class="language-css">.image-container {
  filter: blur(5px);
}</code>

4.

Le mode de mélange calcule la différence absolue entre les valeurs de couleur supérieure et inférieure de chaque pixel. Il crée un effet de contraste élevé en mettant l'accent sur la différence de couleur entre les éléments qui se chevauchent. Voici comment fonctionne le mode mixte: difference difference

Calcul des couleurs:

1. Pour chaque pixel dans la couche supérieure, calculez la différence absolue entre les valeurs RVB de la couche supérieure et inférieure (rouge, vert, bleu).
   • Les résultats indiquent la différence de couleur entre les deux couches.
   Résultat:
2. Les zones avec des couleurs similaires ou identiques produiront des tons plus sombres.
   • Les zones avec différentes couleurs produiront des tons plus brillants.
   • Si les couleurs sont les mêmes, le résultat sera noir (la valeur RVB est 0).

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

Exemple de codepen

5. Le mode de mélange

produit des effets similaires au mode de mélange

, mais a tendance à produire des résultats plus doux et moins contrastés. Il est souvent utilisé pour mélanger les couleurs qui se chevauchent des éléments qui se chevauchent d'une manière qui permet aux couleurs similaires et aux différentes couleurs de contribuer à l'apparence finale. Voici comment fonctionne le mode mixte:

exclusion difference Calcul des couleurs: exclusion

Pour chaque pixel dans la couche supérieure, appliquez la formule B T - 2

B
1. T, où B est la valeur de couleur de la couche inférieure et t est la valeur de couleur de la couche supérieure.
   • Le résultat indique la combinaison de la différence entre les valeurs de couleur des deux couches.
   • Résultat:
   Les zones avec des couleurs similaires ou identiques auront une apparence sombre.
2. Les zones avec différentes couleurs produiront un effet de mélange et de ramollissement au lieu du contraste fort vu en mode
   Mélange.
   Cet effet est souvent plus subtil et est souvent utilisé pour créer des mélanges de couleurs harmonieux.
   • difference
Exemple de codepen

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

Plus de modes de mélange Il existe de nombreux autres modes hybrides à essayer, y compris

,

,

,

, darken, lighten, color-dodge, color-burn, hard-light , soft-light, hue, saturation, color, luminosity, plus-darker, plus-lighter,

et

.

Vous pouvez en savoir plus sur la façon dont ils fonctionnent sur MDN. (Le lien MDN doit être inséré ici)

Certaines précautions

Il y a toujours des utilisateurs finaux qui constateront que les filtres CSS et les modes de mélange peuvent causer des difficultés. Regardons quelques exemples.

Prise en charge du navigateur

<code class="language-css">.image-container {
  filter: blur(5px);
}</code>

La prise en charge des filtres CSS et des modes de mélange est très étendue, mais pour garantir absolument que vos utilisateurs finaux obtiendront des résultats satisfaisants, vous voudrez peut-être envisager un plan de repli. Par exemple:

Accessibilité

Lorsque vous utilisez des filtres et des mélanges dans la conception ou le développement, il est important de considérer l'accessibilité pour vous assurer que votre contenu est disponible et facile à comprendre pour un large éventail de groupes d'utilisateurs, y compris ceux handicapés. Voici quelques éléments clés à noter:

1. Contraste des couleurs. Assurez-vous qu'il y a suffisamment de contraste entre le texte et la couleur d'arrière-plan, en particulier lors de l'application de filtres ou de modes de mélange. Un faible contraste peut rendre difficile pour les utilisateurs ayant une déficience visuelle de lire du texte. Testez votre conception avec des outils qui simulent différents types de cécité couleur pour vous assurer que les utilisateurs des défauts de vision des couleurs peuvent lire.
2. Clarité du texte. Évitez les filtres ou les modes de mélange qui peuvent réduire la clarté du texte. Par exemple, certains modes de mélange peuvent rendre le texte flou ou peu clair, ce qui rend difficile la lecture des utilisateurs malvoyants.
3. texte alternatif. Fournit un texte alternatif pour les images et les graphiques qui peuvent être affectés par les filtres ou les modes de mélange. Les lecteurs d'écran s'appuient sur un texte alternatif pour décrire le contenu aux utilisateurs malvoyants.
4. Animation et transitions. Si vous appliquez des filtres ou des modes de mélange aux éléments d'animation, assurez-vous que l'animation n'est pas trop distrayante ou rapide, car cela peut être problématique pour les utilisateurs souffrant de certains troubles cognitifs ou neurologiques.
5. conception réactive. Assurez-vous que votre conception est réactive et fonctionne bien sur différents appareils et tailles d'écran. Des filtres efficaces ou des modes de mélange sur des écrans plus grands peuvent ne pas fonctionner bien sur des écrans plus petits ou causer des problèmes.
6. Navigation du clavier. Assurez-vous que tous les éléments interactifs sont accessibles et utilisés grâce à la navigation au clavier. Les utilisateurs qui comptent sur la saisie du clavier ou la technologie d'assistance devraient être en mesure de naviguer de manière transparente et d'interagir avec votre contenu.
7. Test à l'aide de la technologie d'assistance. Testez vos conceptions en utilisant une variété de technologies d'assistance telles que les lecteurs d'écran et les logiciels de reconnaissance vocale pour identifier et résoudre les problèmes qui peuvent survenir en raison de filtres ou de modes hybrides.
8. grossièrement amélioré. Mettre en œuvre une approche de conception qui suit le principe de l'amélioration progressive. Assurez-vous que le contenu et les fonctionnalités de base sont toujours disponibles même si le mode filtre ou le mode n'est pas pris en charge ou désactivé.

En gardant ces notes à l'esprit, vous pouvez créer des conceptions non seulement visuellement attrayantes, mais également accessibles à un public plus large, y compris ceux qui ont un handicap.

Pièges communs lorsque vous utilisez des filtres CSS et des modes de mélange

Voici des erreurs courantes que les développeurs peuvent rencontrer et comment les éviter.

Erreur 1: surutilisation des filtres

Une erreur courante consiste à appliquer trop de filtres, ce qui entraîne des dispositions visuellement écrasantes ou confuses. La surutilisation peut rendre difficile pour les utilisateurs de se concentrer sur un contenu important et peut conduire à une mauvaise expérience utilisateur.

Exemple:

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

Dans cet exemple, plusieurs filtres sont appliqués au même élément. Bien que la combinaison des filtres puisse créer des effets uniques, il est crucial de trouver un équilibre et de garantir que la conception globale reste cohérente et conviviale. Considérez la hiérarchie visuelle et hiérarchisez la clarté.

Erreur 2: Utilisez des filtres sur les éléments interactifs

Appliquer des filtres à des éléments interactifs tels que des boutons ou des liens sans considérer l'interaction utilisateur peut conduire à une expérience utilisateur moins intuitive et déroutante.

Exemple:

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

Les filtres

peuvent modifier l'apparence d'éléments interactifs, ce qui peut affecter la compréhension des utilisateurs de leur objectif. Assurez-vous que le filtre n'affecte pas la clarté et la convivialité des éléments interactifs.

Erreur 3: ignorer l'impact des performances

L'application de filtres complexes ou des combinaisons de filtres peut avoir un impact sur les performances, en particulier sur les appareils ou les navigateurs plus anciens. Ignorer les problèmes de performances peut entraîner des temps de chargement de page.

Exemple:

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

Les filtres complexes peuvent nécessiter plus de ressources informatiques, ce qui affectera les performances de la page Web. Testez les performances sur une variété d'appareils et optimisez au besoin, en tenant compte du compromis entre les effets visuels et la vitesse de la page.

Conclusion

Les filtres CSS et les modes de mélange permettent aux développeurs Web de repousser les limites créatives pour créer des interfaces utilisateur attrayantes et dynamiques.

En comprenant et en combinant ces fonctionnalités, vous pouvez améliorer l'attrait visuel de votre contenu Web, ce qui le rend plus attrayant et mémorable pour les utilisateurs.

Lorsque vous explorez la créativité des filtres et des mélanges CSS, n'hésitez pas à essayer différentes combinaisons pour découvrir les effets uniques que vous pouvez réaliser.

Que vous créiez un portfolio, un blog ou un site Web de commerce électronique, la combinaison de ces technologies peut ajouter un sentiment supplémentaire de sophistication visuelle pour faire ressortir votre site Web.