Effet de survol de l’ombre de la boîte ABDZ CSS

Il y a quelques mois, nous avons envoyé la nouvelle version d’Abduzeedo à nos lecteurs – un nouvel article détaillant l’impulsion et les fonctionnalités du nouveau site est à venir. En un mot, notre objectif principal était de simplifier et de réduire autant que possible. L’un des domaines dans lesquels nous avons décidé d’investir notre temps était de petits effets subtils comme le mode nuit avec un thème sombre et des effets de survol CSS sur les images. Ce dernier a été salué par un certain nombre de nos lecteurs et nous avons reçu de nombreuses demandes demandant comment nous l’avons fait, alors je vais essayer de tout expliquer ici dans ce post.

L’effet de survol de l’ombre de l’image est assez simple. Il a été inspiré par le nouveau langage visuel Apple TV dans lequel ils utilisent des ombres longues et colorées pour les éléments sélectionnés ainsi que de nombreuses références Dribbble. La communauté du design visuel a adopté cela et j’adore l’effet, j’ai donc décidé de le recréer.

Le résultat est à peu près CSS box-shadow et Javascript pour extraire les couleurs des images.

Concevoir

Lorsque j’ai conçu le site dans Sketch, j’ai commencé à jouer avec quelques idées d’utilisation d’ombres dramatiques que j’ai utilisées lors de la conception de mon site personnel. Voici un exemple (http://fabiosasso.com/labs/newsite/) de longues ombres pour le texte.

La chose intéressante à propos de Sketch est que la propriété shadow est à peu près la même que dans CSS. Cela nous donne la possibilité d’essayer plusieurs variantes jusqu’à ce que nous obtenions le résultat souhaité. J’ai joué avec des tonnes d’ombres, différentes opacités comme vous pouvez le voir sur l’image ci-dessus. Mon CSS final était quelque chose d’aussi simple que:

box-shadow: 
                0 4px 4px rgba(0, 0, 0, .1), 
                0 8px 8px rgba(0, 0, 0, .1), 
                0 16px 16px rgba(0, 0, 0, .1), 
                0 32px 32px rgba(0, 0, 0, .15), 
                0 64px 64px rgba(0, 0, 0, .15);
                

Ce CSS crée l’effet d’ombre, maintenant j’avais juste besoin de le mettre sur l’état « survol » et c’est tout. Mais pour le rendre fluide, j’ai également utilisé la transition CSS uniquement pour le box-shadow.

transition: box-shadow .3s ease-out;

Pour une ombre noire régulière, c’était suffisant, mais je voulais utiliser une couleur extraite de l’image à utiliser comme couleur de la boîte CSS. Pour ce faire, j’ai utilisé Javascript et une bibliothèque appelée Vibrant.js.

« Vibrant.js est un port javascript de l’impressionnante classe Palette de la bibliothèque de support Android. »

La bibliothèque extrait jusqu’à 6 couleurs :

• Vibrant
• En sourdine
• SombreVibrant
• SombreMuet
• LumièreVibrant
• Lumière en sourdine

La dernière chose à faire était de sélectionner toutes les images et d’extraire les couleurs, puis de remplacer le RGBA() du css par celui de l’image. Si le processus est effectué dans le client, cela peut prendre un peu plus de temps en fonction de la taille de l’image, à cause de cela, nous rendons une petite image à utiliser pour l’extraction des couleurs. De plus, le fait que l’effet ne s’affiche que pendant le survol nous a permis d’avoir un peu plus de temps pour tout faire en arrière-plan.

Bien sûr, rien n’est parfait. Nous essayons toujours de corriger quelques bugs. Le script renvoie ‘undefined’ lorsque l’image ne fournit pas la couleur spécifique. Cela devient assez difficile à prévoir car nous ne connaissons jamais le résultat, donc parfois vous pouvez voir des couleurs étranges.

Nous affinons également la meilleure configuration pour améliorer la vitesse, l’un des objectifs est de passer du client au serveur afin que les couleurs soient extraites et stockées dans la base de données. Cela réduirait considérablement le temps d’extraction. Il faut juste apprendre à faire ça 🙂