Generalmente, los campos de estrellas se suelen crear con Javascript, utilizando programación matemática y un elemento canvas. Sin embargo... ¿Y si intentamos crear uno utilizando CSS y sólo Javascript para la generación de números aleatorios? En este video, vamos a ver como crear un vistoso campo de estrellas utilizando... ¡box-shadow!
🟨🟨⬛ Nivel: Intermedio
🔗 Links
✅ La propiedad box-shadow: lenguajecss.com/css/sombras/b...
✅ Pixel art con CSS: lenguajecss.com/css/sombras/p...
✅ Animaciones CSS: lenguajecss.com/css/animacion...
✅ Variables CSS: lenguajecss.com/css/cascada-c...
👉 CodePen: codepen.io/manz/pen/YzMaNed
#css #html #javascript
⌚ Timestamps
00:00 - Introducción
00:45 - Fondo fijo
02:07 - Estrellas con box-shadow
04:40 - Múltiples estrellas
06:45 - Generar estrellas aleatorias
10:23 - Tamaño de estrella
11:15 - Crear varias capas
11:58 - Total de estrellas por capa
12:25 - Animación de las estrellas
15:10 - Duración (Parallax)
16:45 - Colores de estrellas
17:56 - Resultado final
🌍 Si quieres, puedes seguirme en mis redes sociales:
🟪 Web oficial: manz.dev
🟪 Twitter: / manz
🟪 Twitch: / manzdev
🟪 Todas las redes: links.manz.dev
26 май 2024