Barra de búsqueda responsive
Implementación de una barra de búsqueda adaptable para escritorio y móvil.
CSS
Descubre tutoriales y consejos sobre hojas de estilo en cascada (CSS) para diseñar y estilizar páginas web con elegancia y eficiencia.
Fuegos artificiales con CSS
Cómo crear un efecto visual de fuegos artificiales utilizando únicamente HTML y hojas de estilo CSS.
Efecto máscara gradiente en CSS
Usar mask-image con un gradiente lineal para crear un efecto visual que controle la visibilidad de un elemento HTML.
Cómo crear una cinta (ribbon) en CSS
Crear una cinta decorativa sólo con CSS parar destacar ofertas o mensajes en nuestra interfaz visual.
Control deslizante de comparación de imágenes
Implementar un comparador de imágenes deslizante usando HTML, CSS y JavaScript, ideal para mostrar diferencias entre dos imágenes superpuestas.
Crea una barra de progresión para indicar el porcentaje de scroll de una página
Cómo crear una barra en la parte superior de la web que indique el porcentaje de scroll avanzado en una página.
Centrar elementos con Flexbox
Cómo centrar elementos horizontal y verticalmente usando el patrón de diseño CSS Flexbox.
Especificidad en CSS
Entender el cálculo y la aplicación de la especificidad en hojas de estilo.
Crear un menú de navegación con un fondo deslizante
Barra de navegación elegante y moderna con un tema oscuro, esquinas redondeadas y un indicador deslizante animado con CSS.
Cumulative Layout Shift (CLS)
Evitar los desplazamientos de los componentes en el diseño y mejorar la estabilidad visual de una página.
Diseñar un componente tipo "Card"
Uso del patrón de diseño Card con HTML y CSS adaptable.
Layout Holy Grail en CSS
Layout de diseño CSS clásico que dispone un encabezamieto, barras laterales, contenido y pie de página de forma elegante.
BEM CSS: ejemplos y mejores prácticas
Aprende a organizar tu CSS con la metodología BEM y mejora la estructura de tus hojas de estilo.
Uso práctico de variables CSS
Usa variables CSS para personalizar y organizar tus estilos de forma escalable.
Pseudo-elementos ::before y ::after de CSS
Explicación y ejemplos de pseudo-elementos ::before y ::after en CSS.
Maquetar con CSS Box Model
Todo lo que hay que saber sobre el modelo caja (Box Model) y como estilizar cada parte con CSS.
Texto gradiente animado con CSS
Truco rápido para animar un texto con un gradiente animado usando reglas CSS.
La Ruleta de la Fortuna en JavaScript
Simulación de una ruleta en JavaScript, gira la ruleta hasta que pare en un número aleatorio.
Introducción a Web Components
Crea elementos HTML personalizables con su propia maquetación, estilos e interactividad.
Maquetación de notificaciones con CSS
Aprende cómo maquetar mensajes de alerta con HTML y CSS usando el modelo de diseño FlexBox.