Guillaume Duverger - Développement & Graphisme - Blog

Transition sur dégradés CSS
Vous êtes ici : Accueil Blog > Tutoriels et astuces > Développement
Sommaire du tutoriel
  1. Introduction
  2. Jouer avec la transparence
  3. Les pseudo-éléments
  4. Utilisation de la position de l'arrière-plan
  5. Utilisation des ombres portées
  6. Bonus 1 : avec la règle@ CSS @property (CSS Houdini)
  7. Bonus 2 : avec CSS Houdini et JS

Introduction

Parce que les dégradés CSS ne sont pas animables. Parce que la vie (d'un développeur) est injuste. Il fallait bien prendre les armes et lutter. Nous allons voir quelques petites astuces pour contrer le problème.

Jouer avec la transparence

L'astuce réside dans l'utilisation d'un arrière-plan uni et d'un dégradé avec une transparence pour permettre au survol de voir le second arrière-plan uni, donnant ainsi l'impression d'une transition. C'est donc la couleur de l'arrière-plan qui est animée.

survolez-moi
CSS


.demo1{

display: flex;
justify-content: center;
max-width: 12rem;
color: white;
margin: 2rem auto;
padding: 1rem;
border-radius: .25rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.19);
background-color: #7d68e8;
background-image: linear-gradient(white, rgba(255,255,255,0));
transition: background-color 1s;
}
	
.demo1:hover{

background-color: #3cddc4;

}


Les pseudo-éléments

Sans aucun doute la manière la plus efficace pour réussir une transition sur un dégradé. On sait que les pseudo-éléments peuvent être très utiles en CSS. La preuve en est ici puisque nous allons nous servir du pseudo-élément ::before.

L'idée étant de cacher un dégradé avec la propriété opacity. L'empilement avec la propriété z-index est utile si un texte (ou un autre élément) est présent comme dans cet exemple afin de ne pas le recouvrir avec le dégradé lors de la transition.

survolez-moi
CSS


.demo2 {

display: flex;
justify-content: center;
max-width: 12rem;
color: white;
margin: 2rem auto;
padding: 1rem;
border-radius: .25rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.19);
background-image: linear-gradient(#7d68e8,#3cddc4);
position: relative;
z-index: 1;

}
	
.demo2::before{

border-radius: inherit;
background-image:linear-gradient(to top,#7d68e8,#3cddc4);
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: opacity 1s 
}

.demo2:hover::before {

opacity: 1

}


Utilisation de la position de l'arrière-plan

L'idée ici est d'utiliser la propriété background-position de manière à jouer avec le déplacement de l'arrière-plan, donnant plus ou moins bien l'illusion d'une transition. Au préalable, il faudra étendre l'arrière-plan avec la propriété background-size.

survolez-moi
CSS


.demo3 {

display: flex;
justify-content: center;
max-width: 12rem;
color: white;
margin: 2rem auto;
padding: 1rem;
border-radius: .25rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.19);
background-size: auto 200%;
transition:  background-position .4s;
background-image: linear-gradient( #3cddc4 0%, #7d68e8 51%, #3cddc4 100%)
}
	
.demo3:hover{
  
background-position: bottom center;
	
}


Utilisation des ombres portées

Une bonne solution au même titre que les pseudo-éléments, à la différence que la propriété box-shadow n'est pas idéale au niveau des performances lors d'une transition. Il faudra également définir une hauteur fixe à l'élément qui reçoit la transition car la propriété box-shadow n'accepte pas les pourcentages.

survolez-moi
CSS


.demo4{

display: flex;
justify-content: center;
border-radius: .25rem;
color: white;
max-width: 12rem;
margin: 2rem auto;
height: 50px;
background-color: #7d68e8;
box-shadow: 0 50px 25px -25px #3cddc4 inset; 
transition: 1s;
}
	
.demo4:hover{

    background-color: #3cddc4;
    box-shadow: 0 50px 25px -25px #7d68e8 inset; 
}


Bonus 1 : Utilisation de la règle@ CSS @property (CSS Houdini)

Cette règle CSS représente une inscription de propriété personnalisée (Custom properties) au sein d'une feuille de style sans avoir recours à du JavaScript.

survolez-moi
CSS


.demo6{
display: flex;
justify-content: center;
border-radius: .25rem;
color: white;
max-width: 12rem;
margin:2rem auto;
box-shadow:0 0 5px rgba(0, 0, 0, 0.19);
}
	
@property --transition-deg {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
	
.demo6{

--transition-deg:0deg;
  transition:--transition-deg 1s;
  background:linear-gradient(var(--transition-deg),#7d68e8,#3cddc4);

	}
	

	
	
.demo6:hover{
		
		--transition-deg:180deg;
	
	}

Bonus 2 : avec CSS Houdini et JS

Cela nécessite quelques lignes de JavaScript et ce n'est pas compatible sur tous les navigateurs à l'heure actuelle (mars 2021).

survolez-moi
CSS


.demo5{
--color-stop:#7d68e8;
max-width: 12rem;
display: grid;
place-items: center;
padding:1rem;
margin: 2rem auto;
border-radius: .25rem;
background-image: linear-gradient(#3e9ed9, var(--color-stop));
transition: --color-stop 1s;
box-shadow:0 0 5px rgba(0, 0, 0, 0.19);
	}
	
.demo5:hover {
  --color-stop: #3cddc4;
}


JavaScript


CSS.registerProperty({
name: '--color-stop',
syntax: '<color>',
inherits: false,
initialValue: 'transparent'
		})


Source, inspiration, ressources :

Article sur le sujet (FR)

Article sur @property (EN)

Vous rencontrez un problème avec ce tutoriel ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis du tutoriel ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.