Hue.css regroupe 49 dégradés photoréalistes. Pourquoi photoréalistes ? tout simplement parce que ce ne sont pas de simples dégradés avec 2 couleurs. Ils sont un peu plus complexe que ça. Dans la plupart des cas plusieurs types de dégradés (linear et radial) sont utilisés et dans certains on y trouve la propriété CSS backgound-blend-mode.
Exemple du dégradé SilverStone :
.silverStone {
background: #989898;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), -webkit-radial-gradient(at top center, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 120%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 120%);
background-blend-mode: multiply,multiply; }
Très facile à mettre en place, il suffit pour cela d’ajouter hue.css dans votre code et d’appeler la classe du dégradé que vous aurez choisi.
Voir et télécharger la collection : evankarageorgos.github.io/hue/grid.html
Hue est également disponible sur Sketch.
Si vous en voulez plus, n’hésitez pas à me suivre sur Facebook et sur Twitter.
