Codea con Horacio

🏎️❤️ Feliz Día de Hot Wheels | Un Viaje Hecho para Ti

🏎️❤️ Un universo de Hot Wheels hecho para dedicar.

Un pequeño detalle diferente, creado con código y mucho cariño. ✨

🎯 META: Si llegamos a 100 personas únicas comentando CODE o CÓDIGO, liberaré el repositorio completo en GitHub. 🚀

🌎 For everyone around the world: If we reach 100 unique people commenting CODE or CÓDIGO, I'll release the complete project repository on GitHub. 🏁

📚 ¿Qué encontrarás en el proyecto?

🎨 CSS avanzado: clip-path, gradientes, variables CSS y efectos Glow.

🎬 Animaciones 2D/3D: , perspective, transform y transiciones.

📱 Diseño Responsive: clamp(), vmin, vh, vw, Media Queries y orientación de pantalla.

✨ UI & FX: backdrop-filter, drop-shadow, box-shadow y efectos neón.

♿ Accesibilidad: soporte para prefers-reduced-motion y optimización para interacción táctil.

🚀 HTML5 + CSS + JavaScript + Swiper.js + FontAwesome + Google Fonts.

¿Llegamos a las 100? 👀🏁

HTML Input Types que debes conocer 💻 | 13 tipos de

¿Sabías que HTML5 incluye una gran variedad de inputs nativos sin necesidad de usar librerías externas? 🚀

En este Reel te muestro 13 tipos de de HTML que debes conocer: text, email, password, date, time, number, range, color, file, checkbox, radio, reset y submit.

Todo explicado de forma visual y rápida para que puedas entender cuándo usar cada uno. 💻

🔔 Suscríbete a Codea con Horacio para más trucos, animaciones web y desarrollo frontend.

📌 Guarda este Reel para tenerlo como referencia.

🌻 Flores Amarillas / Yellow Flowers 💛 (21 Sept)

🌻💛 Flores Amarillas en el Universo | Yellow Flowers 3D 💛🌻
Una galaxia creada con código para dedicar este 21 de septiembre. 🌌✨

🌌 ¿Qué hay dentro?
• Universo galáctico en 3D y esfera de cristal ámbar
• Dedicatorias escondidas y luces estelares
• Un viaje visual único para esa persona especial

💻 ¿Quieres el código fuente? / Want the source code?
🎯 META: 150 Comentarios
• Comenta CÓDIGO (Español)
• Comment CODE (English)
Cuando lleguemos a la meta, liberaré el código para que crees tu propia versión. 🔥

Gracias por apoyar Codea con Horacio ❤️🔥

🌻 Flores Amarillas para Dedicar | Galaxia 3D para el 21 de Septiembre 💛

Entra a una Galaxia creada especialmente para dedicar a esa persona especial en este 21 de septiembre. 🌌✨
Vive un pequeño viaje por el universo lleno de luz, mensajes de amor y detalles escondidos.

🌻 Explora un universo galáctico en 3D
💛 Descubre dedicatorias escondidas entre las espirales
✨ Viaja entre luces estelares antes de llegar al núcleo
🌻 Explora la esfera de cristal ámbar con girasoles ornamentales
💌 Encuentra mensajes especiales alrededor del cosmos
🖱️ Muévete, gira y haz zoom para explorar libremente
Ideal para sorprender este 21 de septiembre a esa persona especial. 💛🌻

💻 ¿Quieres el código?
🎯 META: 250 COMENTARIOS
Comenta CÓDIGO o CODE 💻🌻
Cuando lleguemos a 250 comentarios, liberaré el código fuente de este proyecto para que puedas verlo, estudiarlo y crear tu propia versión. 🔥

🇺🇸 ENGLISH
Want the source code? 💻🌻
Comment CODE.
When we reach 250 comments, I’ll release the source code of this project.

Gracias por apoyar Codea con Horacio ❤️🔥
Una galaxia creada con código para alguien único. 💛

¡Lleva tus botones al siguiente nivel con CSS y Web Audio API! 🗑️🔊

¡Crea una microinteracción UI nivel Pro sin librerías externas! 🚀🗑️

En este clip te muestro cómo animar un botón de DELETE usando HTML5, CSS3 y Vanilla JavaScript:

🔹 Efecto de vertido: Cada letra vuela hacia el tacho usando variables CSS (--fly-dist) y curvas cubic-bezier.
🔹 Efecto de líquido y física: Nivel reactivo con olas e impactos.
🔹 Audio 100% sintético: Efectos "plop" y chime de confirmación creados con Web Audio API (¡sin archivos .mp3!).
🔹 Transformación fluida: Transición de botón a círculo con aura 360°.

🔓 ¿QUIERES EL CÓDIGO Y EL TUTORIAL?

Comenta "CÓDIGO" o "TUTORIAL". Si llegamos a 50 comentarios, libero el repositorio en GitHub y subo el video explicado paso a paso línea por línea. 💻🔥

🎯🔥 ¡Meta cumplida! Gracias por apoyar este proyecto. ❤️

🎁 Como agradecimiento, estaré enviando el código por DM a quienes comentaron “CÓDIGO”, “CODE” o “TUTORIAL”. 📩

For everyone watching from other countries: I’ll also be sending the code by DM. 🌎❤️

💡 Guarda este video para cuando construyas tu próximo sistema de UI.
👉 Sígueme en para dominar CSS avanzado, animaciones y JS moderno.

9 Selectores CSS que DEBES Dominar 🚀 (Guía Rápida) | Codea con Horacio

En este Reel te muestro de forma visual y progresiva los 9 selectores CSS fundamentales que todo desarrollador frontend debe conocer para estructurar código limpio y eficiente:* — Selector Universal — Selector por ID .clase — Selector de Clase h1, h2 — Selector de Tipo / Etiqueta h1 + p — Hermano Adyacente ul > li — Selector de Hijo Directo h1 ~ p — Hermano General p a — Selector Descendiente div[data-tipo="oferta"] — Selector de Atributo 💬 ¿Cuántos de estos 9 selectores utilizas a diario en tus proyectos? ¡Déjalo en los comentarios!📌 Guarda esta chuleta para consultar la sintaxis cuando la necesites.🚀 Sígueme para más tips de CSS y desarrollo web.

CSS Selectors 🚀✨

¿Cuántos de estos 9 selectores CSS usas en tu día a día? 💻🔥

Repasa cada uno de los selectores esenciales que todo desarrollador web debe dominar:

* { } (Selector Universal): Selecciona todos los elementos.

-2 { } (Selector de ID): Selecciona un elemento único por su ID.
destacado { } (Selector de Clase): Selecciona elementos que comparten clase.

h1, h2 { } (Selector de Tipo): Selecciona elementos por su etiqueta HTML.

h1 + p { } (Hermano Adyacente): Selecciona el hermano inmediato posterior.

ul > li { } (Selector de Hijo): Selecciona hijos directos del contenedor.

h1 ~ p { } (Hermano General): Selecciona todos los hermanos posteriores.

p a { } (Selector Descendiente): Selecciona elementos dentro de otro antecesor.

div[data-tipo="oferta"] { } (Selector de Atributo): Selecciona por atributo específico.

Guarda este reel 📌 para repasar cuando lo necesites y compártelo con quien esté aprendiendo CSS. 🚀

backdrop-filter | Efecto Glassmorphism en 1 línea de CSS 🪟✨

Aprende cómo funciona backdrop-filter() en CSS y cómo aplicar efectos visuales (desenfoque, contraste, inversión y más) directamente al fondo que está detrás de un elemento.

Efectos mostrados en este clip:

backdrop-filter: none; — Sin efectos

backdrop-filter: blur(6px); — Efecto Glassmorphism / cristal 🪟



backdrop-filter: contrast(160%); — Resalta zonas claras y oscuras

backdrop-filter: grayscale(80%); — Desatura los colores del fondo

backdrop-filter: hue-rotate(120deg); — Rotación de tono vibrante 🌈

backdrop-filter: invert(80%); — Efecto en negativo

👇 Guardalo para tu próximo diseño web y sígueme para más tips rápidos.

¡Domina CSS mix-blend-mode en 20 segundos!

¿Sabías que puedes crear efectos de fusión de color en CSS como en Photoshop o Illustrator? La propiedad mix-blend-mode define cómo debe mezclarse el contenido visual de un elemento (o texto) con el fondo o los elementos que tiene exactamente detrás.

Aquí te explico qué hace cada valor de esta demostración:

normal: Es el valor por defecto. No aplica ninguna fusión; el color superior cubre completamente el fondo.

multiply: Multiplica los colores del elemento y del fondo. El resultado siempre es un tono más oscuro (el color blanco se vuelve completamente transparente).

screen: Invierte, multiplica e invierte los colores. El resultado siempre es un tono más claro (el color negro se vuelve transparente), ideal para luces y destellos.

overlay: Combina multiply y screen. Aumenta el contraste general conservando las altas luces y sombras del fondo según la intensidad del color.

difference: Resta el color más claro del más oscuro entre el elemento y el fondo. Produce efectos de inversión de color de alto impacto visual.

color-dodge: Aclara el color del fondo para reflejar el color del elemento frontal, creando efectos de brillo vívido e iluminación intensa.

Aprende desarrollo web paso a paso en Codea con Horacio. ¡Suscríbete para más tips rápidos de HTML, CSS y JavaScript! 🚀

CSS backdrop-filter explicado 🤯 | 6 efectos que debes conocer

¿Sabías que con CSS puedes modificar visualmente lo que está detrás de un elemento? 🤯

En este video te muestro `backdrop-filter`, una propiedad muy útil para crear efectos modernos como Glassmorphism y transformar el contenido que está detrás de una tarjeta, panel o elemento transparente.

Aquí tienes los efectos que aparecen en el video 👇

🔹 `backdrop-filter: none;`
No aplica ningún filtro al contenido que está detrás del elemento.

🔹 `backdrop-filter: blur(6px);`
Desenfoca el contenido que está detrás. Es uno de los efectos más utilizados para crear interfaces estilo Glassmorphism. 🪟

🔹 `backdrop-filter: contrast(160%);`
Aumenta el contraste del contenido que está detrás del elemento, haciendo que las diferencias entre zonas claras y oscuras sean más marcadas.

🔹 `backdrop-filter: grayscale(80%);`
Reduce la cantidad de color del contenido que está detrás, haciendo que se vea principalmente en tonos grises.

🔹 `backdrop-filter: hue-rotate(120deg);`
Cambia el tono de los colores del contenido que está detrás, creando una transformación de colores bastante llamativa. 🌈

🔹 `backdrop-filter: invert(80%);`
Invierte gran parte de los colores que están detrás del elemento, generando un efecto visual negativo.

💡 Importante: `backdrop-filter` afecta al contenido que está DETRÁS del elemento. Para que el efecto pueda apreciarse correctamente, normalmente necesitas que el elemento tenga cierta transparencia.

👨‍💻 Si estás aprendiendo HTML, CSS y JavaScript, sígueme en Codea con Horacio para más ejemplos visuales y prácticos.