Cómo crear un reloj con HTML y CSS

5,9k

en HTML, CSS y JavaScript

Publicidad

Subido por matemundoarocena · hace 20 horas ·

¿Quieres crear un reloj decorativo solo con HTML y CSS? ⏰ En este vídeo aprenderás paso a paso cómo construir un reloj analógico estático usando pseudoelementos, gradientes y sombras para lograr un diseño visualmente atractivo sin una sola línea de JavaScript.

👨‍💻 ¿Qué aprenderás?
Cómo usar ::before y ::after para crear manecillas.
Técnicas de centrado absoluto en CSS.
Cómo combinar radial-gradient y linear-gradient para simular una carátula de reloj.
Aplicación de sombras (box-shadow) para dar efecto 3D.

🎯 Ideal para quienes están aprendiendo diseño web, efectos visuales en CSS o buscan inspiración creativa para proyectos sin JavaScript.

🕹️ ¿Te gusta este tipo de contenido? Dale like, suscríbete y activa la campanita para no perderte más diseños creativos en CSS.

🎥 Vídeo completo:

🔗 Código HTML:

🔗 Código CSS: 📢 Sígueme en todas las redes para no perderte nada:
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

¿Quieres crear un reloj decorativo solo con HTML y CSS? ⏰ En este vídeo aprenderás paso a paso cómo construir un reloj analógico estático usando pseudoelementos, gradientes y sombras para lograr un diseño visualmente atractivo sin una sola línea de JavaScript.

👨‍💻 ¿Qué aprenderás?
Cómo usar ::before y ::after para crear manecillas.
Técnicas de centrado absoluto en CSS.
Cómo combinar radial-gradient y linear-gradient para simular una carátula de reloj.
Aplicación de sombras (box-shadow) para dar efecto 3D.

🎯 Ideal para quienes están aprendiendo diseño web, efectos visuales en CSS o buscan inspiración creativa para proyectos sin JavaScript.

🕹️ ¿Te gusta este tipo de contenido? Dale like, suscríbete y activa la campanita para no perderte más diseños creativos en CSS.

🎥 Vídeo completo:

🔗 Código HTML:

🔗 Código CSS: 📢 Sígueme en todas las redes para no perderte nada:
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

Ciencia

Sígueme en mis redes sociales

Twitter

Instagram

YouTube

Comentarios

Usuario

Necesitas estar logueado para poder realizar la acción

Usuarios de Tokyvideo registrados

Has intentado realizar una acción que solo está permitida para usuarios registrados. Crea una cuenta gratis y disfruta de todos los beneficios de ser un usuario registrado de Tokyvideo.

Crea tu cuenta ¿Ya registrado? Inicia sesión

Reportar este vídeo

Publicidad

Copyright © Tokyvideo – All Rights Reserved

Contactar | Términos y Condiciones | Aviso Legal | Aviso Legal Antipiratería | Política de Privacidad | Política de Cookies | DMCA

Padresprotegen.com Crea un ambiente digital apropiado para tus hijos mediante el filtrado de contenido digital. | AEPD