Cómo crear una puesta de sol con HTML y CSS - Web development

¿Quieres aprender a crear un paisaje de atardecer usando únicamente HTML y CSS? 🌅 En este tutorial te muestro paso a paso cómo construir una escena visual con CSS, sin imágenes externas ni JavaScript.

En el proyecto crearemos un paisaje CSS formado por:

✨ Un cielo con degradado usando linear-gradient()
☀️ Un sol creado con un pseudo-elemento ::before y radial-gradient()
⛰️ Montañas dibujadas con CSS utilizando clip-path: polygon()
🎨 Colores, transparencias, sombras y degradados para conseguir un efecto de atardecer
📱 Un diseño responsive utilizando unidades vmin

También veremos cómo utilizar los pseudo-elementos ::before y ::after para crear elementos gráficos directamente con CSS.

Este ejercicio es perfecto si estás aprendiendo HTML y CSS, quieres practicar CSS Art o buscas ideas para crear ilustraciones y escenas sin utilizar imágenes.

📌 En este vídeo aprenderás:

Cómo crear un paisaje con HTML y CSS
Cómo utilizar linear-gradient() y radial-gradient()
Cómo crear formas con clip-path
Cómo trabajar con pseudo-elementos en CSS
Cómo hacer diseños responsive con vmin
Cómo crear un atardecer utilizando solamente código

💻 Tecnologías utilizadas:
HTML5 + CSS3

Si estás aprendiendo desarrollo web, suscríbete al canal para más tutoriales de HTML, CSS, JavaScript y proyectos prácticos.

🔗 Código HTML:

🔗 Código CSS:

🔍MENTES GEEKS🔍
¿Te apasionan las matemáticas, la informática y los rompecabezas? ¡Entonces este es el lugar perfecto para ti! 🌟

En este canal, desentrañamos los misterios de los números, exploramos el poder de la programación y nos sumergimos en los desafíos más intrigantes d 📢 Sígueme en todas las redes para no perderte nada:
Youtube: www.youtube.com/channel/UCW7d4aS6_M7YLmNnNi_L9zQ?sub_confirmation=1
Instagram: @mentesgeeks010
Twitter: @MundoMate13601
TikTok: @mentesgeeks10
Wuolah: wuolah.com/profile/MentesGeeks?referral=Sotsnia3
Blog: mentesgeeks10.blogspot.com
GitHub: github.com/mentesgeeks
Pinterest: ar.pinterest.com/mentesgeeks10/
Codepen: codepen.io/mentesgeeks

+ Leer más