Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Autres

Simple checkbox CSS Houdini

Code :

HTML


<input type='checkbox' id='toggle'>
<label for='toggle'></label>


CSS


@property --i{
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}	
	
 #toggle {
	
appearance: none
	
}	
	
	
#toggle + [for=toggle] {

cursor: pointer;
--i: 0;/* = 0 */
--not-i: calc(1 - var(--i));/* = 1 */
display: grid;
grid: 1fr/1fr 1fr;
overflow: hidden;
border: solid 1vmin transparent;
width: 18vmin;
height: 9vmin;
--a: rgb(calc(var(--not-i)*240 + var(--i)*126),calc(var(--not-i)*240 + var(--i)*134),calc(var(--not-i)*240 + var(--i)*250));
background: radial-gradient(closest-side, var(--a) calc(100% - 1px), transparent) calc(var(--i)*100%)/50% no-repeat, 
radial-gradient(closest-side, rgba(215, 214, 255, var(--i)) 65%, transparent) calc(var(--i)*100% + 1em) 1em/50% no-repeat rgb(224, 224, 224);
clip-path: inset(1vmin round 9vmin);
transition: --i 0.4s;
}
	

#toggle:checked + [for=toggle] { 
  --i: 1 ;
}	
	


Source, inspiration, ressources :

source originale

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

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, 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.