Un guide pratique pour créer des effets visuels époustouflants avec les modes de fusion CSS

Contour

• Présentation
• Comprendre les propriétés des couleurs primaires des modes de fusion
• Modes de fusion — Mix-Blend-Mode et Background-Blend-Mode
• Applications pratiques des modes de fusion
• Conseils pour utiliser efficacement les modes de fusion
• Conclusion

Les modes de fusion sont des types de données CSS qui décrivent la couleur résultante de deux éléments HTML ou plus après chevauchement. Avec la propriété de filtre CSS, les modes de fusion permettent aux développeurs de créer des effets visuels riches et dynamiques de type Photoshop avec seulement quelques lignes de CSS. Ils vous offrent, en tant que développeur, un moyen puissant d'améliorer l'apparence et la convivialité de la conception d'un site Web et de rendre votre site Web exceptionnel et professionnel.
CSS offre aux développeurs deux propriétés de mode fusion : mix-blend-mode et background-blend-mode. La propriété mix-blend-mode définit la manière dont la couleur du contenu d’un élément doit se mélanger avec les autres contenus du parent de l’élément. Le background-blend-mode fait la même chose, sauf qu’il se concentre sur le mélange de la couleur de l’élément avec son arrière-plan.
CSS propose aux développeurs 16 mots-clés et cinq valeurs globales pour les propriétés du mode de fusion, chacune avec des effets visuels uniques sur les éléments que vous appliquez. Ce guide vous aidera à comprendre en profondeur les modes de fusion, à expliquer chaque mot-clé et valeur globale, leurs applications pratiques et des conseils pour les utiliser efficacement.

Comprendre les modes de fusion

Les modes de fusion sont utilisés pour ajuster la luminosité, le contraste, la saturation et la teinte du contenu et de l'arrière-plan d'un élément par rapport au contenu et aux arrière-plans des éléments voisins. Pour une compréhension approfondie des modes de fusion, vous devez aborder les 4 termes principaux que vous rencontrerez dans presque toutes les définitions de chaque propriété de mode de fusion du point de vue de la conception graphique.

• Luminosité : C'est l'intensité de la lumière émise par chaque pixel d'un écran. Pour que les yeux perçoivent la couleur d’un objet, celui-ci doit être exposé à la lumière. Lorsqu’il est exposé à la lumière, l’objet absorbe une partie de la lumière et réfléchit le reste. L’intensité de la lumière réfléchie est une mesure de la luminosité de l’objet. Vos yeux perçoivent l’intensité de la lumière réfléchie comme la luminosité de la couleur de l’objet. Par conséquent, la luminosité correspond essentiellement à la luminosité avec laquelle vos yeux perçoivent la couleur d’un objet. La luminosité n’est pas seulement définie par la luminosité avec laquelle vos yeux perçoivent la couleur d’un objet ; elle est également influencée par 2 autres propriétés : la saturation et la teinte.
• Saturation : cette propriété de conception va de 0 à 100 % et définit l'apparence pure de la couleur. Les concepteurs atténuent les couleurs en ajoutant du blanc et du noir (gris), en plus de quelques autres modifications, pour obtenir la couleur spécifique de l'image qu'ils tentent de recréer. Si tous les « autres changements » appliqués à une couleur sont supprimés et que les autres propriétés de la couleur restent constantes, la quantité de gris dans la couleur modifiée définit son degré d'insaturation. Cependant, en l'absence totale de gris dans une couleur, le pourcentage de saturation d'une couleur est de 100, ce qui signifie que la couleur est absolument pure. Comme tout pourcentage de saturation inférieur à 100 indique qu'une couleur particulière est tonique, la luminosité de la couleur est également altérée en raison des impuretés contenues dans la couleur (la couleur grise).
• Teinte : En bref, c’est la représentation la plus pure d’une couleur. Ne la confondez pas avec la propriété de saturation. Tout ajout de gris à une couleur pure réduit son pourcentage de saturation de 100. La forme pure d'une couleur avant qu'elle ne soit saturée est « Teinte ». Alors que les autres propriétés de la couleur restent constantes, la teinte est une couleur sans teinte (ajout de tout degré de blanc) ni nuance (ajout de tout degré de noir). De la même manière que modifier la saturation d’une couleur gâche sa luminosité, modifier le degré de teinte a le même effet.
• Contraste : Dans ce contexte, c’est la différence entre deux ou plusieurs teintes. Cela confère à chaque couleur une propriété distinctive, permettant aux gens de distinguer facilement les couleurs.

Maintenant que les propriétés des couleurs primaires ont été correctement disséquées, il est temps d'apprendre comment elles se rapportent à chaque propriété du mode de fusion et de lui donner un effet distinct.

Modes de fusion - Mix-Blend-Mode et Background-Blend-Mode

Les propriétés du mode de fusion CSS sont particulièrement utiles pour contrôler le comportement de fusion des éléments transparents et translucides avec le contenu sous-jacent. De plus, ils peuvent également être appliqués sur des éléments opaques pour produire des effets généralement attrayants. Les modes de fusion permettent aux développeurs Web de manipuler la façon dont les couleurs sont combinées en ajustant la luminosité, en mélangeant 2 couleurs ou plus, en augmentant le contraste de 2 contenus superposés ou plus et en révélant la différence entre les couleurs de premier plan et d'arrière-plan des éléments qui se chevauchent, ce qui entraîne divers effets de conception.
La propriété mix-blend-mode définit comment le contenu d'un élément doit se mélanger avec d'autres contenus du même parent et de l'arrière-plan, tandis que la propriété background-blend-mode définit comment l'image d'arrière-plan d'un élément doit se mélanger avec d'autres images d'arrière-plan dans le même élément et dans l'arrière-plan. couleur. La propriété background-blend-mode fonctionne pour les éléments avec au moins une image d'arrière-plan, tandis que la propriété mix-blend-mode fonctionne pour tout élément avec ou sans image d'arrière-plan. Les deux propriétés partagent 16 mots-clés et 5 valeurs globales pour définir les styles.

• Normal : Normal est la valeur par défaut. Il n'y a aucun changement visible dans un élément avec une propriété de mode de fusion normale. C’est comme placer un morceau de papier opaque au-dessus d’un autre papier opaque ; vous ne pouvez voir que la couleur du papier le plus haut.
• Multiplier : comme son nom l'indique, la couleur résultante est l'effet obtenu en multipliant les couleurs de premier plan et d'arrière-plan. Cela revient à superposer un sac en plastique translucide sur un autre. Plus la couleur de l’élément supérieur est claire, plus la couleur de l’élément de base est révélée.
• Écran : Les couleurs de premier plan et d'arrière-plan sont inversées, et l'effet multiplicateur est appliqué au résultat, qui est finalement à nouveau inversé. Pour cet effet, plus la couleur de premier plan est foncée, plus la couleur d'arrière-plan transparaîtra.
• Superposition : cet effet se présente comme un effet de multiplication ou d'écran en fonction de la couleur d'arrière-plan. Il adopte l'effet multiplicateur si la couleur d'arrière-plan est plus foncée, et si elle est plus claire, il dégage l'effet d'écran.
• Éclaircir : la couleur résultante est équivalente au plus clair des deux éléments colorés.
• Assombrir : La couleur résultante est équivalente au plus foncé des deux éléments colorés.
• Color-dodge : éclaircit la couleur de premier plan (ou l'image d'arrière-plan) pour refléter la couleur d'arrière-plan.
• Color-burn : L'inverse de la couleur-dodge. Il reflète une couleur de fond très contrastée dans la couleur de premier plan (ou image d'arrière-plan).
• Hard-light : c'est similaire à la superposition mais avec des calques échangés. Cela peut donner un effet de multiplication ou de tramage, mais contrairement à la superposition, cela dépend de la couleur de premier plan. Si la couleur de premier plan est plus foncée, elle donne l’effet multiplicateur, et si elle est plus claire, elle donne l’effet écran.
• Soft-light : similaire à la lumière dure mais en version plus douce. Il utilise color-burn/color-dodge au lieu de multiplier/screen.
• Différence : l'effet résultant est obtenu en soustrayant l'élément de couleur plus foncée de l'élément plus clair.
• Exclusion : Semblable à la différence mais avec un contraste plus doux.
• Teinte : elle est composée de la teinte de la couleur de premier plan et de la saturation et de la luminosité de la couleur d'arrière-plan.
• Saturation : similaire à la teinte mais avec des rôles inversés. La saturation de la couleur de premier plan et la teinte et la luminosité de la couleur d’arrière-plan sont mélangées pour donner l’effet final.
• Luminosité : Également similaire à la teinte mais avec des rôles inversés. La luminosité de la couleur de premier plan et la teinte et la saturation de la couleur d’arrière-plan sont mélangées pour donner l’effet final.
• Couleur : Pour cet effet, la teinte et la saturation de la couleur de premier plan et la luminosité de la couleur d'arrière-plan sont mélangées pour donner l'effet final.

Applications pratiques pour les modes de fusion

Création de superpositions d'images dynamiques

Les modes de fusion peuvent être utilisés pour créer des superpositions d'images captivantes, ajoutant de la profondeur et de l'intérêt à vos conceptions Web. Voici un exemple de la façon de créer une superposition de couleurs sur une image :

.image-container {
      position: relative;
      width: 100%;
      height: 400px;
    }

    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 255, 0.5); /* Blue overlay */
      mix-blend-mode: multiply;
    }

Ce CSS créera une superposition bleue sur une image, lui donnant un effet cinématographique maussade.

Améliorer la typographie

Les modes de fusion peuvent faire ressortir le texte sur des arrière-plans complexes. Voici comment utiliser les modes de fusion pour garantir la lisibilité du texte :

.text-overlay {
      color: white;
      mix-blend-mode: difference;
    }

Cela rendra le texte visible sur des arrière-plans clairs et sombres en inversant sa couleur en fonction de l'arrière-plan.

Concevoir des arrière-plans saisissants

Créez des effets d'arrière-plan uniques en mélangeant plusieurs images d'arrière-plan :

    .blended-background {
      background-image: 
        url('texture.jpg'),
        linear-gradient(to right, #ff0000, #00ff00);
      background-blend-mode: overlay;
    }

Cela combine une image texturée avec un dégradé, créant un arrière-plan riche et texturé.

Artistic Image Manipulation

Use blend modes to apply artistic effects to images without the need for image editing software:

   .artistic-image {
      background-image: url('portrait.jpg');
      background-color: #ff00ff; /* Magenta */
      background-blend-mode: color;
    }

This applies a colourization effect to the image, similar to duotone effects in print design.

Tips for Using Blend Modes Effectively

1. Start Simple: Begin with basic blend modes like multiply or screen before moving on to more complex ones.
2. Consider Accessibility: Ensure that text remains readable when using blend modes. Always test your designs with different colour blindness simulations.
3. Test Across Browsers: Not all browsers support all blend modes equally. Always test your designs in multiple browsers and have fallbacks ready.
4. Be Mindful of Performance: Overusing blend modes, especially on large images or backgrounds, can impact page performance. Use them judiciously.
5. Combine with Other CSS Properties: Blend modes work well with opacity, filters, and animations to create even more interesting effects.
6. Use with SVGs: Blend modes can create fascinating effects when applied to SVG elements.
7. Experiment: Don't be afraid to try unexpected combinations. Sometimes the most interesting effects come from experimentation.
8. Consider Dark Mode: If your site has a dark mode, remember that blend modes might behave differently on dark backgrounds.
9. Document Your Work: When using complex blend mode combinations, leave comments in your CSS to explain the intended effect.
10. Use Dev Tools: Browser dev tools are invaluable for tweaking real-time blend modes. Use them to fine-tune your effects.

Browser Compatibility

While most modern browsers support blend modes, there are still some considerations:

• Internet Explorer does not support blend modes at all.
• Some older versions of browsers may have limited support.
• Mobile browsers generally have good support but always test on actual devices.

For up-to-date compatibility information, check Can I Use.

Performance Considerations

Blend modes are generally performant, but can cause issues if overused:

• Applying blend modes to large areas or many elements can slow down rendering.
• Animated blend modes can be particularly resource-intensive.
• Consider using will-change: background-blend-mode; or will-change: mix-blend-mode; for frequently changing blend modes, but use sparingly as it can consume memory.

Conclusion

CSS blend modes offer web developers and designers a powerful tool to create stunning visual effects with minimal effort. By understanding the principles behind blend modes and how they interact with colour properties like luminosity, saturation, and hue, you can create designs previously only possible with image editing software.
From enhancing typography and creating dynamic image overlays to designing striking backgrounds and manipulating images artistically, blend modes open up a world of creative possibilities. Remember to use them judiciously, always keeping in mind accessibility, performance, and cross-browser compatibility.
As web design continues to evolve, mastering blend modes will give you an edge in creating unique, eye-catching designs that stand out in the digital landscape. Don't be afraid to experiment and push the boundaries of what's possible with CSS – you might discover exciting new techniques that elevate your web design to the next level.
Lastly, here's a suggested "Resources" section to round out the article:

Resources for Further Learning

To deepen your understanding and skills with CSS blend modes, check out these valuable resources:

1. MDN Web Docs on Blend Modes - Comprehensive documentation on all blend mode properties.
2. CSS Tricks - CSS Blend Modes - A practical guide with examples and explanations.
3. Codrops CSS Reference - Blend Modes - Interactive examples of different blend modes.
4. Can I Use - CSS Blend Modes - Up-to-date browser compatibility information.
5. Adobe Color - A tool for creating colour schemes that work well with blend modes.
6. Blend - CSS Playground - An interactive tool to experiment with different blend modes.
7. CSS Blend Mode Generator - A CodePen demo to generate blend mode effects.

These resources will help you explore the full potential of CSS blend modes and inspire you to create unique visual effects in your web projects.

Cover photo by Hitesh Choudhary

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!