Un caso práctico: botones
A continuación quiero crear un juego de botones utilizando variables CSS. Exactamente como en los demás ejemplos el código puede funcionar sin variables pero el uso de variables aporta claridad y reduce la verbosidad del código.
Para comenzar quiero que los botones sean iguales en todos sus aspectos excepto el tamaño. Para esto en el código voy a utilizar em en lugar de px porque de esta manera puedo fácilmente cambiar el tamaño del botón solo con cambiar el tamaño de fuente.
button{
font-size:18px;
padding:/*9px 18px*/.5em 1em;
margin:/*4px*/.22em;
border-radius:/*4px*/.22em;
color:#fff;
border: .1em solid hsl( 211, 40%,52%);
background: linear-gradient(hsl( 211, 40%,70%), hsl( 211, 40%,52%));
text-shadow:-.05em -.05em .05em hsl( 211, 40%,20%);
}Esto de por si ya se comporta como una variable.
See the Pen Botones y variables CSS #1 by Gabi (@enxaneta) on CodePen.
Cambiar el color de estos botones es un poco más complicado. En el ejemplo anterior he necesitado 4 colores diferentes además del color para la fuente ( #fff ):
- un color para el borde:
border: .1em solid hsl( 211, 40%,52%);
- otro color para la sombra que aplicamos al texto:
text-shadow:-.05em -.05em .05em hsl(211, 40%,20%);
- finalmente dos colores más para crear el gradiente lineal:
background: linear-gradient(hsl(211, 40%,70%), hsl(211, 40%,52%));
Mirando con atención estos colores podemos ver que todos son colores hsl que comparten el mismo valor para el matiz ( 211 ) y para la saturación ( 40 ), y lo único que difiere es la luminosidad. Así que podemos construir estos colores a partir de otros variables: --hue ( matiz ) y --saturation.
--colorA: hsl( var(--hue), calc(var(--saturation) * 1%), 70%);
See the Pen Botones y variables CSS #2 by Gabi (@enxaneta) on CodePen.