Aller au contenu principal
Partagez cette démonstration :

Menu CSS background-clip avec @property

Dernière mise à jour : juin 2022

Votre navigateur ne supporte pas cette démonstration.

Le code :



<div class=navigation>

<a href="#!">rubrique</a>
<a href="#!">rubrique</a>
<a href="#!">rubrique</a>
<a href="#!">rubrique</a>

</div>




@property --clip-path {

  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
	
.navigation {

display: flex;
margin: 5rem auto;
justify-content: center;
flex-wrap: wrap;
gap:10px;
font-size: clamp(1rem, 2vmax, 1.5rem);
white-space: nowrap;
 
}
	
.navigation>*{

width: 15ch; 
height: 3rem;

}
	

.navigation a {

--clip-path: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.999;
background: linear-gradient(#000, #000), 
radial-gradient(circle at var(--x) var(--y), 
var(--couleur-clip) calc(var(--clip-path)*100% - 1px), 
transparent calc(var(--clip-path)*100%)), 
linear-gradient(var(--couleur-clip), var(--couleur-clip));
-webkit-background-clip: border-box, border-box, text;
background-clip: border-box, border-box, text;
background-blend-mode: difference;
-webkit-text-fill-color: transparent;
color: transparent;
text-transform: uppercase;
text-decoration: none;
transition:--clip-path .3s ease-in;
 
}
	
	
.navigation a:hover,
.navigation a:focus {

  --clip-path: 1 ;
}	
	
.navigation a:first-child{--couleur-clip: #ea4335; --x: 10%; --y: 0%}
.navigation a:nth-child(2){--couleur-clip: #4285f4; --x: 50%; --y: 0%}
.navigation a:nth-child(3){--couleur-clip: #34a853; --x: 50%; --y: 50%}
.navigation a:last-child{--couleur-clip: #fbbc05; --x: 90%; --y: 0%}	
	
	



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.