Ne pas utiliser le noir pour ombre en CSS

Le concept est simple, « ne pas utiliser des ombres noires sur un arrière-plan de couleur. » Voici un exemple, lorsque vous ajoutez une ombre portée (drop shadow) sur un calque (layer) par exemple dans Photoshop, n’utiliser pas la couleur noir ou grise, mais la couleur de fond de l’arrière-plan de votre élément. Il vous faudra surement jouer avec la transparence (opacity) pour que le résultat soit convainquant. Tout simplement parce que la vraie vie n’est pas noire. Pour expliquer d’une autre façon, l’ombre est la version plus foncée de l’élément en dessous, et cela parce qu’il y a moins de lumière. Regarder cette ombre sur la photo. Si vous voulez recréer cela, je ne crois pas qu’une couleur noir avec différent type de transparence pourra vous donner exactement le même résultat.

Maintenant, nous avons dans nos outils de CSS (l’impressionnant) RGBa, et je suis surpris d’entendre et de voir les gens utilisés un noir en fond (ex. rgba(0,0,0,0.5) ) pour les arrières plans et les ombres. Ce qui est enseigné et encouragé avec des commentaires comme « la couleur d’ombre reprendra la couleur de fond en raison de l’opacité« . Certes, cela fonctionne, mais il est mélangé avec du noir et une version plus foncée de lui-même.

J’ai entendu Dan Cederholm enseigner cela sur An Event Apart et sur Bulletproof Web Design. Meagan Fischer a aussi un tutoriel récent avec le noir comme exemple d’ombre. Dan et Meagan sont de bons designers, et je n’essaye pas de les supplanté avec mon argument. Je crois que leurs points sont mieux et plus adaptés dans le future en utilisant le noir, parce que le noir peut être appliqué sur n’importe quelle couleur d’arrière-plan, mais une ombre de couleur fonctionnera mieux sur un arrière-plan de même teinte.

Mon point est, si vous aller changer l’arrière-plan de couleur, vous n’avez qu’à modifier les CSS. Lorsque vous ferez la modification, changer seulement la teinte de l’ombre simplement. Par contre, si vous n’avez pas le contrôle sur les ombres des boîtes ou textes, utilisé le noir en ombre. Si vous pouvez, utilisé une ombre teintée.

Et puis, comment trouvez-vous l’idée? Utilisez-vous la couleur noir par défaut comme « couleur plus foncée de l’élément »? Je soulève cette question parce que je vois beaucoup de personne qui utilise le noir en fond et particulière les étudiants qui sortent de l’école.

Cet article est une traduction de l’article « Don’t Use Black for Shadows » sur Css-tricks.com par Chris Coyier