Explora el poder de CSS con la ruta completa. Desde conceptos básicos hasta técnicas avanzadas, descubre cómo dar estilo y diseño único a tus sitios web. ¡Optimiza la apariencia y la funcionalidad con CSS de manera eficiente y creativa!
Hay varias formas de ocultar un elemento con CSS, y no son intercambiables: cada una se comporta distinto con el espacio, los clics y el lector de pantalla. Te dejo las 5 con su código y, lo más importante, cuándo usar cada una para no meter la pata en accesibilidad. 1. display: none (oculta y
Ocultar un elemento con CSS: 5 formas (con código) Leer más »
Una línea del tiempo con HTML y CSS es uno de esos componentes que mejoran cualquier currículum web, página de historia de marca, roadmap de producto o cronología de eventos. En esta guía vas a construir tres variantes desde cero (vertical clásica, vertical alternada en zig-zag, y horizontal con scroll), con código copy-paste listo para
Línea del tiempo en HTML y CSS: 3 variantes con código (2026) Leer más »
Los bordes en CSS son de lo primero que se aprende y de lo que más se usa: enmarcar una caja, separar secciones o redondear un botón. Con la propiedad border controlas el ancho, el estilo y el color, y con border-radius los redondeas. Te lo explico todo con código listo para copiar. La forma
Bordes en CSS: border, color, ancho y radius (2026) Leer más »
En esta guía de CSS ejemplos aprendes lo esencial del CSS moderno con código copiable y probado. Nada de trucos viejos: te enseño el modelo de caja, unidades actuales, variables, Flexbox y Grid. Cada técnica va con un bloque que puedes pegar y adaptar hoy mismo. Mi consejo antes de empezar: no memorices propiedades. Entiende
CSS ejemplos: guía práctica con Flexbox, Grid y código copiable Leer más »
Un degradado en CSS se crea con una sola propiedad, sin imágenes ni herramientas externas. Aquí tienes la sintaxis para fondo, texto y botones, con ejemplos de código reales. Al final tienes también un par de generadores visuales, por si prefieres ajustarlo a golpe de clic. Degradado lineal para un fondo La función linear-gradient() crea
Degradado CSS: sintaxis y ejemplos para fondo o texto Leer más »
El input type=»file» por defecto es feo y cada navegador lo pinta a su manera. Y cuando intentas estilizarlo directo, no responde. Es uno de los controles más rebeldes del formulario. Aquí tienes el código listo para pegar para dejarlo a tu gusto. Te enseño dos técnicas para trabajar el css input file: la moderna
CSS input file: personaliza el botón de subir archivos Leer más »
Si necesitas botones on off en CSS con ese aspecto de interruptor tipo iOS, aquí tienes el código listo para pegar. Sin librerías. Sin JavaScript. Solo un checkbox y unas reglas CSS. Voy a mostrarte un toggle switch accesible de verdad: funciona con teclado, lo entienden los lectores de pantalla y respeta a quien prefiere
Cómo crear botones tipo on/off con CSS3 (toggle accesible 2026) Leer más »
Cambiar estilos de un select con CSS ha sido durante quince años el trabajo más frustrante de cualquier formulario. Le pones un borde bonito, y la flecha sigue siendo la del sistema. Intentas darle color a las opciones, y en Mac no pasa nada. Esa era la realidad, y desde 2025 ha cambiado de verdad.
Cambiar estilos de un select con CSS: la guía real (2026) Leer más »
Un banner animado con CSS pesa unos pocos kilobytes, se ve nítido en cualquier pantalla y no necesita ni una imagen. Frente a un GIF o un vídeo, la diferencia en tiempo de carga es enorme, y eso cuenta en tus Core Web Vitals. Aquí tienes el código completo de cinco banners, listo para copiar.
Banner animado con CSS y HTML: código para copiar Leer más »
Si buscas menús animados con CSS3 listos para copiar, aquí tienes cuatro ejemplos completos con su HTML y su CSS. Nada de librerías ni de plugins. Son menús animados CSS puros: un menú horizontal con subrayado al hover, un desplegable accesible, una hamburguesa responsive solo con CSS y un efecto de relleno deslizante. Todos respetan
Menús animados con CSS3: 4 ejemplos listos para copiar Leer más »
¿Quieres un slider en HTML5 y CSS3 que cargue rápido y no arrastre librerías pesadas? Aquí tienes uno moderno, hecho con scroll-snap, sin JavaScript y listo para copiar y pegar. He reescrito este tutorial de arriba abajo. La versión antigua montaba un slideshow a pantalla completa con @keyframes, una técnica de 2012 que ya no
Slider HTML5 y CSS3: carrusel sin JavaScript (2026) Leer más »
