Тёмный

Campo de estrellas con CSS y Javascript 

ManzDev
Подписаться 1,7 тыс.
Просмотров 7 тыс.
50% 1

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

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 55   
@JuanAndador
@JuanAndador 4 дня назад
Quiero agradecerte por el increíble trabajo que realizas en tus videos. Me parecen excelentes para aprender CSS. Sigo a varios desarrolladores, y gracias a eso encontré tu canal, que se ha convertido en uno de mis favoritos para aprender CSS y JavaScript. Aportas un gran valor a la comunidad de desarrolladores y tu contenido es realmente inspirador. ¡Muchas gracias por compartir tu conocimiento con todos nosotros! Un saludo
@robertogenio5565
@robertogenio5565 25 дней назад
hola bro, desde hace algunos meses me estoy metiendo en el mundo de la programación web, hoy me ha aparecido tu video y la verdad el hecho de que expliques hasta las cosas mas sencillas aporta mucho ademas que te ayuda a recordar y entender como funciona, muy buena explicación y gracias por tremendo video, nuevo sub
@ManzDevTV
@ManzDevTV 25 дней назад
¡Muchísimas gracias, Roberto! 🚀
@dalls8318
@dalls8318 19 дней назад
Esta bárbaro, y quedaría aún mejor si agregas una 2 layout más, una de planetas unos 5 modelos que vayan cambiando y otra de una galaxia para que se vea más vivo
@juanpischetz4053
@juanpischetz4053 21 день назад
noooooo te sigo en linkedin, que bueno haberte encontrado por acá tambien!!!
@KORE_ANIIK
@KORE_ANIIK 20 дней назад
Buen video man, estaba desocupado hoy y me hice el proyecto para tenerlo guardado por si quiero hacer algo parecido y seguir aprendiendo, gracias :)
@Miguel-vy2ko
@Miguel-vy2ko 25 дней назад
Impresionante, explicas muy bien y es genial que expliques hasta las cosas más básicas. Gracias por tu video!
@verborverbor1889
@verborverbor1889 21 день назад
Son ejercicios visualmente muy atractivos con los que uno aprende mucho y además disfruta haciendo. Gracias por el vídeo!
@seshomarutaisho8997
@seshomarutaisho8997 23 дня назад
Lo estaba buscando desde el año pasado, al fin lo encuentro, por un momento pensé que era sólo con CSS
@protn-ct1ms
@protn-ct1ms 24 дня назад
Manz, subirias algun video sobre como hacer animaciones relacionadas con el scroll? por ejemplo escrolleas hacia abajo y se va a revelando un elemento, pero que el valor de la opacidad este relacionada con el scroll, algo parecido a las timelines que se usan en gsap. pd: Buen video!!!! me parece super genial el fondo, y mas al final cuando tiene difrerentes colores y opacidades, de un efecto muy chulo
@eliasbriones969
@eliasbriones969 24 дня назад
Esta hermoso, gracias por darnos sabiduría con tu explicación maravillosa. 🎉
@fabriciobrandan4247
@fabriciobrandan4247 24 дня назад
me encanto, justo estaba viendo mientras tomo un café y escuchando una solo de piano.
@erick8e
@erick8e 24 дня назад
Excelente fluidez a la hora de explicar a detalle, muy buen trabajo y muy buen efecto. Gracias por compartir este video- Saludos!
@sosgeropa
@sosgeropa 19 дней назад
La verdad que esta buenisimo, sos un crack explicando!
@Partido_Comunista_BingChiling
@Partido_Comunista_BingChiling 24 дня назад
Gracias, aunque yo diria que parece mas particulas de polvo
@franciscofuentes5253
@franciscofuentes5253 22 дня назад
Me parece demasiado hermoso!!! Lo voy a practicar, muchas gracias!!
@emmanuelbarba2567
@emmanuelbarba2567 25 дней назад
Wow siempre he querido saber cómo se hace esto
@jmp89
@jmp89 20 дней назад
Ayer me quedé embobao con el vídeo y el resultado, me paso hoy a dejarte el comentario y compartirlo, gracias por el buen contenido! edit: que tal quedaría con unos border-radius exagerados?
@ManzDevTV
@ManzDevTV 15 дней назад
Personalmente, me gustaba más cuadraditos para recordar a los píxeles de juegos antiguos, pero sería simplemente añadirle un border-radius a los tres elementos, el box-shadow respetaría la forma.
@generandociencia7578
@generandociencia7578 20 дней назад
Muy bonita solución.
@diego_lopezlopez1611
@diego_lopezlopez1611 25 дней назад
los videos de manz siempre logran ayudarme demasiado de verdad ;D
@omartinezgrassi
@omartinezgrassi 22 дня назад
Excelente efecto! Gracias Manz por compartir 🙌
@aprenderespoder6668
@aprenderespoder6668 25 дней назад
excelente como siempre en cada video aprendo algo nuevo
@emausdetiquicia6636
@emausdetiquicia6636 24 дня назад
Buenísimo el tutorial. Trataré de implementarlo con scss.
@lacevedovelez
@lacevedovelez 24 дня назад
Excelente video te felicito!
@christiansaavedra9471
@christiansaavedra9471 25 дней назад
Saludos Manz, eres un crack, son muy buenos estos videos, aprendo un monton... una recomendación, seria bueno un poco mas de zoom al codigo... Gracias por compartir tu conocimiento
@1Lyud0
@1Lyud0 24 дня назад
Como siempre, un 10. Tome su like buen hombre!
@javaboy6581
@javaboy6581 22 дня назад
Eres grande grande grande!
@Carloxleyend97
@Carloxleyend97 23 дня назад
que bonito bro, super
@lusasaja7093
@lusasaja7093 25 дней назад
Muy Útil, eres grande
@1812F
@1812F 25 дней назад
Esto es demasiado bueno : O
@jomoju
@jomoju 23 дня назад
Genio , Manz siempre haciendo de las suyas
25 дней назад
Muy bueno!!!!!!!!!!!
@EinerH
@EinerH 25 дней назад
Maravilloso Manz. Eres el mejoor explicando, inflate del pecho muchacho. Gracias:) Saludos!
@ManzDevTV
@ManzDevTV 25 дней назад
¡Gracias Einer, abrazo! 🙌
@HeysonBetancourt
@HeysonBetancourt 25 дней назад
Me ha encantado
@aaronflorespezantes7051
@aaronflorespezantes7051 18 дней назад
Tremenda clase 🥵
@patricioavila5796
@patricioavila5796 25 дней назад
Que lindo quedo :D
@eidermoncayo2398
@eidermoncayo2398 25 дней назад
Gracias Manz
@anthonysirens3986
@anthonysirens3986 25 дней назад
Buen contenido nuevo sub
@robertostringa9254
@robertostringa9254 25 дней назад
Excelente !!
@joseadams
@joseadams 24 дня назад
Genial!
@jairocolondev
@jairocolondev 25 дней назад
Que crack 🚀🚀🚀
@JonasCanarias
@JonasCanarias 25 дней назад
Una maravilla
@imrdeveloper
@imrdeveloper 24 дня назад
Que si me gusto? ME ENCANTO MANZ ❤
@jesusserratoaguilar7105
@jesusserratoaguilar7105 20 дней назад
parecen mas burbujas que estrellas
@chanto5843
@chanto5843 25 дней назад
videaso
@SanchayanPackiyanathan
@SanchayanPackiyanathan 22 дня назад
genial..
@Leuter-dev
@Leuter-dev 25 дней назад
Epico
@alansosa2241
@alansosa2241 24 дня назад
subcriptor nro 900 jeje
@daniel18z16
@daniel18z16 24 дня назад
wow
@maximilianolencina8150
@maximilianolencina8150 23 дня назад
Increible. Voy a dejar ya mismo tailwindcss. Gracias manz
@enzomeneghini7813
@enzomeneghini7813 22 дня назад
Nicky Nicole si o no
Далее
Aprende conceptos antes que código
14:02
Просмотров 113 тыс.
ТУРНИР ЧАКА 2024 - ПЛЕЙ ОФФ - День 2
5:18:26
Kinoni bulg'ashda davom etasiz | Million jamoasi
00:47
Просмотров 583 тыс.
Grid CSS y Contadores CSS
19:13
Просмотров 1,8 тыс.
Javascript, how to get input text value while typing
0:43
ARRAYLIST VS LINKEDLIST
21:20
Просмотров 45 тыс.
¡Crea tu propia etiqueta HTML! ¡Con WebComponents!
15:19
Cómo hacer una BARRA DE PROGRESO animada desde cero
15:21
Fui el culpable de que Vercel añadiera esto
20:33
Просмотров 43 тыс.
Esta biblioteca de UI está en OTRO NIVEL (React JS)
5:22
What’s your charging level??
0:14
Просмотров 6 млн
Samsung or iPhone
0:19
Просмотров 8 млн