Blog de diseño online
Diseño de una Landing: ¿Cómo Crear Páginas de Aterrizaje Efectivas?
¿Estás buscando una forma efectiva de captar la atención de tus visitantes y convertirlos en clientes potenciales? El diseño de una landing puede ser la respuesta que estás buscando. En este artículo, exploraremos los fundamentos del diseño de una landing y cómo puedes crear páginas de aterrizaje efectivas que impulsen el éxito de tu negocio en línea. ¿Qué es una Landing? Definición y Propósito de una Landing Una landing, también conocida como página de destino o página de aterrizaje, es una página web diseñada específicamente para captar la atención de los visitantes y convertirlos en...
Diseño web. Home Full Screen con flecha para continuar navegación.
En el diseño web, como en los demás diseños, las tendencias vienen y van. Sin embargo el Full Screen en diseño web se ha mantenido durante varios años, sigue siendo una apuesta segura. En este post, además de comentar algún aspecto de este tipo de diseños, os dejo el código explicado para que podáis hacer la vuestra. En las web full screen, el contenido llena toda la pantalla del navegador, independientemente de la resolución que estemos usando, son responsive. Son pantallas con un fuerte impacto visual, ideales para presentar un producto. El menú suele ser de hamburguesa y un icono en forma...
Alinear capas sin salto de línea con CSS
Existen varias maneras de alinear capas sin que se produzca salto de línea. Para mi esta es la más sencilla, y además es responsive, por lo que no tendrás ningún problema independientemente de la resolución de pantalla que esté usando el usuario de tu sitio. Este es el único código que tienes que usar en tu CSS en el contenedor que va a alojar las distintas capas, como verás es bien sencillo: .box {display: flex; align-items: stretch; flex-wrap: wrap;} Con esto ya estaría, pero vamos a darle un poco de estilo a las capas que van dentro, para que no quede feo: .uno, .dos, .tres, .cuatro,...
Centrar horizontal y verticalmente un texto sobre un div con background image
En numerosas ocasiones, centrar un texto dentro de un div, se convierte en una tarea complicada. En este post vamos a enseñarte a centrar el texto tanto horizontal como verticalmente y que además sea adaptativo. Vamos a ver cómo se hace este ejemplo; se trata de una capa que contiene un background-image y sobre la que hemos puesto un texto, que ha quedado centrado horizontal y verticalmente, independientemente del tamaño de la caja contenedora. GLOOBSDESIGN Vamos a ver cómo lo hemos hecho. Para empezar, definimos un contenedor con el tamaño que va a llevar el módulo, y le aplicamos...
Efectos sorprendentes sobre tus textos
Hoy traemos un efecto espectacular para tus textos, una composición retro, con luces de neón. Solo tienes que cambiar los textos y listo, Yoav Kadosh nos ha dejado todo preparado para que simplemente tengamos que copiar la CSS y poder usarlo. Se trata de puro CSS, con máscaras, inclinación de texto, efecto neón... Y además de ser compatible con Chrome, Edge, Firefox, Opera, Safari, es responsive, lo que significa que lo puedes usar en cualquier proyecto sin miedo a que no se vea en móvil. Échale un vistazo, cambia los textos en la parte html y sorpréndete !! [button...