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 este artículo podrás aprender trucos, utilidades… No es un tutorial de CSS al uso, sino ejemplos con CSS útiles y buenas prácticas para cualquier diseñador web. Podrás aprender como comprimir tu archivo css, diferenciar entre id y class que muchas veces se utilizan mal entre otras muchas cosas. Interesantes efectos css con fuentes Con
Tutorial de CSS con ejemplos Leer más »
Si no te gusta utilizar imágenes para insertar degradados en una página web, tienes la opción de hacerlo con CSS. A continuación te indico varias herramientas online que te ayudarán a crear los degradados en CSS fácilmente. Con estas herramientas online podrás crear tus degradados con CSS Ultimate CSS Gradient Generator Esta herramienta online trabaja
Crea degradados en CSS fácilmente y responsive Leer más »
Que interesante es aprender cosas nuevas y conseguir nuevos efectos para nuestras páginas webs. Hoy podrás encontrar en este artículo distintas animaciones con css3 simples y avanzadas. CSS Shake Básicamente consigues el efecto de temblar. Hay distintas variedades: suave, más agresivo, con una pequeña rotación,… La forma de integrarlo en una web es superfácil. En
Animaciones con CSS3 Leer más »
Un diseño currado atrae clientes y si una web vende todos ganan: el diseñador web y el cliente. En este artículo te propongo como personalizar el botón de subir archivos en una página web también conocido como input file. Conseguirás un diseño atractivo para este botón y otra cosa importante, lo podrás personalizar. Código html
CSS: Personaliza el botón de subir archivos Leer más »
El CSS3 unido con el HTML5 consigue efectos sorprendentes, creo que aún nos queda mucho que avanzar en este sentido. En el artículo de hoy podrás ver como crear fácilmente botones tipo on/off (de encendido/apagado) con CSS3. On/Off Flipswitch es una herramienta online con la que podrás ir configurando tus botones paso a paso. ¿Cómo
Como crear botones tipo on/off con CSS3 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 »
CSS3Ps es un plugin gratuito para Photoshop que convierte las capas que tu escojas de Photoshop en CSS3. A día de hoy soporta las siguientes características: capas de texto selección de múltiples capas sombras brillos radio del borde gradiente En la web del autor puedes ver un ejemplo con un archivo psd y el archivo
Transforma tus capas de Photoshop en CSS3 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 »
