Me parece muy buen material Alvaro... pero toda la clase das la sensación de que vas corriendo, o que dejaste algo en la estufa.
En otras clases explicas todo lo que vas tecleando (lo hayamos visto o no) y aquí casi casi nos regañas si es que no sabemos lo que vas tecleando.
muy diferente a tus anteriores clases. Hubo varios element.properties que utilizaste sin explicar (claro en la web los podemos investigar) pero saca de ritmo.
Una pregunta.. yo veo que utilizas muchos Keyboard shortcuts... desplazas lineas, indentas columnas enteras etc... existe alguna guia sobre todos estos trucos para los editores de código?, sobre todo Vstudio.
No puedo hacer que el mapa aparezca en mi pagina en la etiqueta
Alexis.. buenisimas tus clases!.. Te comento que despues de cada clase me gusta profundizar en la teoria y en la pagina de MDN encontre lo siguiente...
"Si ningún elemento ancestro tiene su propiedad de posición definida explícitamente, entonces, por defecto, todos los elementos ancestros tendrán una posición estática. El resultado de esto es que el elemento absolutamente posicionado estará contenido en el bloque de contención inicial. El bloque contenedor inicial tiene las dimensiones de la ventana gráfica y también es el bloque que contiene el elemento . En otras palabras, el elemento absolutamente posicionado se mostrará fuera del elemento y se colocará en relación con la ventana gráfica inicial."
Para demostrar esto bastaria con darle algun padding o margen al para ver que el elemento absolutamente posicionado no respeta la posicion del body, si no las dimensiones del "initial viewport". Para lograr que el elemento absolutamente posicionado tome como referencia el , tendriamos que tambien definir la posicion del es decir....en CSS body { position: relative;}.
para una demostracion grafica se puede consultar la siguiente pagina:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#positioning_contexts
El orden al estilizar links es muy importante y para eso se usa la regla "LoVe Fears HAte" (link, visited, focus, hover, active)
Aqui encontré esta guia.. Espero les sirva
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links#styling_some_links
Aca les dejo una liga interesante sobre las razones por las que no es conveniente usar la justificación de texto:
Oye Alvaro: En la explicación que das en el video sobre background-origin. Apuntas con el mouse la esquina exterior del lado superior izquierdo del borde y en las notas oficiales que están aquí mismo incluidas, se afirma que el valor predeterminado de background-origin es border-box. Pero en las notas oficiales de MDN dice que el valor predeterminado (initial value) es padding-box. Ósea, la esquina superior izquierda del padding o en otras palabras la esquina interior del lado superior izquierdo del borde.
Aqui les dejo la liga: https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
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.
lenguaje
/* 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);
}
lenguaje
En Codepen: https://codepen.io/pacoromo/pen/MWmvVWo?editors=1100
Buenisima clase Alvaro! se nota la práctica que tienes.
Por aca encontré esta liga para ejercitar esta clase... Espero les sirva.
U+1F44F U+1F44F U+1F44F U+1F44F U+1F44F U+1F44F U+1F44F U+1F44F U+1F44F
#ElqueEntendioEntendio