Los acordeones son un patrón común en interfaces web para mostrar y ocultar información de manera interactiva. Tradicionalmente, se han implementado con JavaScript y CSS, pero HTML ofrece una alternativa nativa con la etiqueta details, simplificando su uso y mejorando la accesibilidad. Resultado Implementación con <details> El siguiente código muestra…
ImageOptim es una aplicación para macOS diseñada para reducir el tamaño de las imágenes sin perder calidad perceptible. Esto no solo mejora el tiempo de carga de los sitios web, sino que también ahorra espacio en disco y ancho de banda. Cómo descargar ImageOptim Cómo usar ImageOptim El uso de…
Quiero compartir un efecto visual que anima el espaciado de las letras al interactuar con los enlaces de una página web. Este efecto es sencillo de implementar y añade un toque de dinamismo a tus diseños. Código HTML La estructura HTML consta de varias secciones con un contenedor que incluye…
Algunas veces en diseños se necesitan textos flotantes que dependiendo del fondo se pueden perder, pero existe una opción con css para que estos objetos puedan ser siempre legibles. Por ejemplo cuando diseñamos una navegación en la web, a menudo enfrentamos el reto de asegurarnos que el texto sea legible…
Hoy quiero compartir una sección que hice para un sitio web: un carrusel infinito creado con Splide.js. Este carrusel destaca por las siguientes características: Código del Carrusel Asegúrate de incluir la librería Splide.js en tu proyecto. Ten en mente esto, se debe agregar tambien la extension austo scroll para que…
Hoy quiero compartir un sencillo y atractivo efecto de introducción que he creado para un sitio web. Utiliza el plugin Typed.js, ideal para simular una máquina de escribir que escribe y despliega textos dinámicamente. Este efecto es perfecto para capturar la atención de los usuarios en la página de inicio…
En este artículo, mostraré cómo lograr un efecto donde los títulos de una lista de proyectos permanecen «fijos ó «sticky» mientras están visibles en el viewport. Para esto, usaremos la poderosa librería GreenSock (GSAP) y su plugin ScrollTrigger. Este es ideal para resaltar información clave en tus desarrollos web. Ahora,…
Hace poco hice una web donde la primera sección tenía un texto horizontalmente largo y la idea era que para ver la siguiente sección se tuviera que recorrer todo ese texto. Gracias a la librería GSAP pude lograrlo, y quiero compartir el código por si alguien más lo necesita. Ejemplo…
Este código PHP sustituye la etiqueta predeterminada «Oferta» por el porcentaje de descuento aplicado al producto. Esto no solo mejora la apariencia de tu tienda, sino que también proporciona información clara a tus clientes sobre el ahorro que obtienen. Añade el siguiente snippet al archivo functions.php de tu tema activo…
Este snippet ocultará todos los métodos de envío cuando se cumple la opción de envío gratis (por ejemplo Una cantidad mínima de pedido). Añade el siguiente código al archivo functions.php de tu tema activo o utiliza un plugin de snippets para evitar modificar los archivos del tema directamente: ¿Cómo funciona?…