Ejercicio:
Gracias por la clase Alvaro!, creo que es la que más me ha gustado, así que me puse a practicar las properties y values que has mencionado hasta ahora e hice el siguiente ejercicio donde aprendí bastante y comprobé varias cosas:
-
Efectivamente el background-color no se hereda (obviamente sería un caos)
-
Aqui aplique el valor currentColor para tomar el color como variable según se desee.
-
Comprobé que, los degradados toman como referencia el borde exterior y no el padding (que es lo que aparentemente observamos)
-Devido a lo anteriormente mencionado, si queremos hacer más ancho el borde en el código que muestras el video, interferimos con los círculos interiores (que toman su posición respecto al borde exterior), asi que utilice un calc() que fue una de las funciones que mencionaste en este capítulo para restarle el borde al tamaño del degradado
-Por ultimo me puse a investigar lo que mencionaste de transfom y aunque no la se usar todavía, las referencias de la MDN están muy fáciles de entender y las utilicé aquí para darle algo de animación.
/* Normalize */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
/* Declaraciones */
:root {
--size: 400px; /* Diametro del circulo*/
--border-thickness: 30px; /* Grueso del borde */
--size2: calc((var(--size)/2) - var(--border-thickness)); /* Proporcion de los circulos interiores (la mitad del diametro exterior menos el borde)*/
--color: steelblue; /* Color del Ying Yang en hover*/
}
/* dimensiones y figuras en div */
.ying-yang {
width: var(--size);
height: var(--size);
border: var(--border-thickness) solid;
border-radius: 50%;
margin: 200px auto;
background-image: radial-gradient(var(--size2) circle at 50% 25%, currentColor 12%, transparent 12%), /* Circulo pequeño negro superior */
radial-gradient(var(--size2) circle at 50% 75%, white 12%, transparent 12%), /* Circulo pequeño blanco inferior */
radial-gradient(var(--size2) circle at 50% 25%, white 50%, transparent 50%), /* Circulo mediano blanco superior */
radial-gradient(var(--size2) circle at 50% 75%, currentColor 50%, transparent 50%), /* Circulo mediano negro inferior */
linear-gradient(to right, white 50%, currentColor 50%); /* Circulo exterior*/
transition: all 3s;
}
/* cambios */
.ying-yang:hover {
transform: rotate(360deg);
color: var(--color);
}
En Codepen: https://codepen.io/pacoromo/pen/MWmvVWo?editors=1100