Effets d'images CSS, 3 : les vignettes

Suite de notre série d'articles sur les effets d'images CSS. Toujours aussi créative, l'étonnante Una Kravets montre 3 façons de créer des vignettes, l'un des filtres photo les plus populaires.

Par

Cet article fait partie d’une série qui décortique des effets visuels utilisant les filtres CSS et les blend modes. Nous allons explorer ici l’un des filtres photo les plus populaires : les vignettes. Une vignette comporte un effet de fondu dans les angles afin d’attirer l’attention vers le centre. Il existe plusieurs façons d’obtenir cet effet en CSS.

Méthode 1 : Inset Box Shadow

La première méthode, qui est également la mieux supportée, consiste à utiliser une box-shadow avec une valeur inset(c’est à dire “tournée vers l’intérieur”). Box-shadow est une propriété très intéressante et flexible. J’ai écrit un article entier sur la façon dont on pouvait réaliser du pixel art avec les box-shadows et les listes et fonctions Sass.

Voici comment cela fonctionne ( NdT : pour tout savoir sur box-shadow, vous pouvez consulter l’article du Dico-CSS de La Cascade) :

//CSS
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];  

Voici une version éditable d’une utilisation assez standard de box-shadow (amusez-vous à modifier le CSS) :

Mais box-shadow a aussi une valeur inset qui renverse la direction du spread. Au lieu de se trouver à l’extérieur de l’élément, l’ombre commence à son périmètre et se dirige vers le centre. Si nous prenons exactement le même code que ci-dessus mais en ajoutant le mot-clé inset, voici ce que cela donne :

 NdT : les lecteurs attentifs auront remarqué que les encadrés de code de La Cascade comportent un très léger inset de box-shadow :)

Nous pouvons centrer cette ombre en donnant aux décalages horizontal et vertical la valeur 0, et en élargissant l’ombre sur une plus grande étendue (spread) :

Autrement dit, avec une simple ligne de code nous pouvons ajouter une vignette à nos images ! Mais attention : lorsque nous appliquons box-shadow, le navigateur affiche l’ombre derrière le contenu (c’est logique...) mais notre <img> étant notre contenu, l’application d’une ombre inset ne nous permettra pas de voir le moindre commencement d’une ombre. C’est pourquoi nous avons besoin de faire appel aux pseudo-éléments ou une div superposée :

Une vignette avec une inset box-shadow est appliquée à cette image.

Bon, ça marche bien, mais ça produit une sorte de carré bizarre autour du périmètre. Ce n’est pas à cela que ressemble une vraie vignette (ronde à cause du filtre de la lentille). Heureusement, il y a des solutions !

Méthode 2 : dégradé radial

Un background dégradé radial basique, de transparent (rgba(0,0,0,0)) à noir (rgba(0,0,0,1)), ressemble à celui-ci, appliqué à notre base rose :

Maintenant, notre image est beaucoup plus obscurcie que ce que nous voulions. Ceci parce qu’il y a un mélange parfait depuis la couleur transparente (au stop 0%) jusqu’au noir (au stop 100%). Pour résoudre ce problème, et rendre notre image de background plus visible, nous pouvons modifier le stop de notre dégradé transparent. Si nous utilisons radial-gradient(transparent 50%, black), le dégradé est transparent jusqu’à 50%, et à partir de là il commence à se mélanger jusqu’à arriver au noir (à 100%).

L'effet de lentille

On se rapproche, mais ça ne ressemble pas encore à une “vraie” vignette. Si nous pensons aux vignettes en photographie, la lentille crée un effet d’assombrissement de cette façon :

image dans une lentille

Pour y parvenir, nous pouvons d’abord modifier la forme de notre ellipse dégradée, afin d’imiter la lentille et de ressembler à un cercle parfait partant du centre de l’image. On y parvient très facilement en indiquant circle en tête de la déclaration de dégradé. Ensuite, nous allons élargir le spread de la couleur sombre, en dehors des limites de l’image. Ces deux modifications nous donnent le résultat suivant :

L’utilisation des dégradé css est également une excellente technique pour rendre le texte plus lisible par-dessus les images. Vous pouvez utiliser des dégradés transparent-vers-noir sur des images lumineuses ou claires, couvrant des surfaces de texte et inversement sur des images sombres. Il y a un très bon article là-dessus et sur d’autres techniques dans CSS-Tricks.

Voici un exemple live avec lequel jouer :

Voici une vignette beaucoup plus réaliste.

Méthode 3 : dégradés et blend modes

Mais qui a dit que les dégradés devaient être blanc ou noirs ? Nous pouvons être un peu plus créatifs et utiliser les couleurs et les blend modes ! Utilisons les techniques que nous avons rencontrées dans les parties précédentes.

Les blend modes difference et exclusion nous permettent de créer des effets intéressants lorsqu’on les combine avec les dégradés. Ces deux blend modes sont comparatifs, en gros ils prennent les pixels superposés et les soustraient, pour chaque canal, pour donner leur différence.

Ils étaient utilisés à l’origine pour aligner les documents. Lorsque le document était parfaitement noir (dans le cas de difference) ou à 50% gris (dans le cas d’exclusion) ils étaient alignés. Comme je l’ai déjà évoqué, la seule différence est que dans le blend mode difference les pixels identiques s’annulent en devenant noirs, alors qu’avec exclusion ils s’annulent en devenant 50% gris.

Mais lorsque les pixels sont de couleur différente, ils créent des différences vives et c’est pourquoi — si on les utilise avec subtilité — ils peuvent créer de beaux effets de lumière. L’exemple qui suit utilise un dégradé rouge et le blend mode difference. Vous pouvez superposer plusieurs dégradés pour obtenir un effet plus spectaculaire.

Amusez-vous à changer les couleurs de dégradé et le blend mode.

Les articles de cette série :

  1. Effet vintage délavé
  2. Effet lunettes 3D
  3. Trois sortes de vignettes
  4. Textures Bokeh
  5. Filtres lomographiques
  6. Effet photo infrarouge

Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les Blend Modes parus dans la Cascade.


Ressources complémentaires en anglais

Ressources complémentaires en français


original paru le dans Almost Profound.

Sur l’auteur : est développeur front-end, elle conçoit des systèmes de design et des prototypes de logiciels chez IBM Design à Austin, Texas. Elle fait partie des membres principaux de l’organisation Design Open et elle est fondatrice des meetups Sassy DC et ATX Sass. Elle dessine parfois, elle code beaucoup et parle de Sass, de performance web et d’open source. On peut la suivre sur Twitter, Dribbble, Github, Codepen.

Traduit avec l’aimable autorisation de Una Kravets.
Copyright Una Kravets © 2015.