Diseño de Banner responsive con HTML y CSS

En este artículos vamos mostrar varias opciones para diseñar y maquetar en HTML y CSS un banner responsive, es decir, que se adapte a los diferentes anchos y altos que va a tener debido a las diversas resoluciones donde se va a mostrar dentro de una web con diseño responsive, consiguiendo una pieza de contenido fluida.

Para desarrollar esta demo hemos tomado como ejemplo la portada de SiloCreativo, donde existen algunos espacios reservados para insertar banners o piezas de contenido propio entre los articulos, como por ejemplo el formulario de suscripción o el banner que vamos a maquetar a continuación.

Los materiales que necesitaremos serán una imagen, en nuestro caso una captura de pantalla del showcase de sitios de usuarios usando nuestros temas WordPress, con formato PNG si vamos a aplicarle algún recorte previo y queremos mantener un área transparente o JPG si no vamos a necesitar transparencia. El resto de elementos los vamos a maquetar via HTML y CSS, por lo que no es necesario ningún asset adicional, desde el fondo degradado CSS3 hasta los círculos y sombras que aparecerán en el banner. Partimos de la base de los diseños de Ghani Pradita en Dribbble.

Ubicación Banner en SiloCreativo
Ubicación del banner entre contenidos y artículos en la página inicial y de categorías de SiloCreativo.com

Banner responsive usando Background CSS y Pseudo-elementos

En nuestro caso necesitamos un banner con unas proporciones cuadradas o verticales, ya que el área que va a ocupar, como has podido ver, mantiene la altura aproximada de los artículos, pero en este mismo artículos podrás ver la maquetación de un banner horizontal.

Diseño Banner web vertical
Este es el resultado del banner responsive diseñado usando degradados y pseudoelementos CSS. En nuestro caso necesitábamos que el banner fuese vertical y se adaptase a las diferentes anchos que pudiera tomar.

Hay tres opciones de trabajar con los elementos comentados. La primera, que es por la que hemos optado tiene el HTML más ligero, con una llamada a imagen para ubicarla en la parte superior y generar los círculos y sombreados mediante los pseudoelementos CSS ::after y ::before:

El HTML por lo tanto queda muy sencillo, con dos elementos span que llevarán los círculos sombreados y un img para la imagen:

<aside class="responsive-banner">
	<span class="circle-a"></span>
	<span class="circle-b"></span>
	<img src="image.png" />
	<div class="container-envelope">
		<p>Live Sites using our WordPress Themes</p>
		<a target="_blank" href="https://www.silocreativo.com/en/showcase/" class="more-link">Get inspired</a>
	</div>
</aside>

En el CSS simplemente resaltar la declaración del degradado lineal en el contenedor y los cuatro pseudo-elementos, dos ::after y dos ::before, parecido al uso que hacíamos en la demo se la animación del icono hamburguesa:

.responsive-banner {
	margin: 80px auto;
	width: 40%;
	min-width: 230px;
	max-width: 330px;
	position: relative;
	height: auto;
	min-height: 300px;
	max-height: 500px;
	border-radius: 10px;
	overflow: hidden;
	background-image: linear-gradient(to bottom right, #D45BA1, #A784E0);
}
.container-envelope {
	padding: 35px 15px;
	color: #fff;
}
img {
	max-width : 330px;
	width: 100%;
	position: relative;
}
span:after,
span:before {
	content: "";
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.1);
	width: 50px;
	height: 50px;
}
.circle-a:before {
	width: 500px;
	height: 500px;
	top: -300px; left: 52%;
	-webkit-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	transform: translate(-50%,0);
}
.circle-a:after {
	top: 160px;
	right: 10%;
}
.circle-b:before {
	top: 60%;
	left: -25px;
}
.circle-b:after {
	width: 150px;
	height: 150px;
	bottom: -70px;
	right: -70px;
}

Este es la opción que vamos a utilizar en nuestro site, debido principalmente a la orientación de banner, que es vertical y se adapta al espacio reservado para el mismo.

Banner responsive SVG en el HTML

Diseño de Banner web horizontal
Alternativas en el diseño del banner horizontal, con otros colores y degradados.

La segunda opción consiste en sustituir los pseudo-elementos CSS por svg en el HTML y posicionarlos como absolute dentro del contenedor. El formato de los banners de esta demo va a ser horizontal, para que podamos ver otras opciones y comportamientos. Además, cambiamos los colores del gradiente para mostrar otros posibles resultados:

El HTML es muy similar, solo que ahora aparecen los SVGs, en concreto cuatro círculos de distindo diámetro:

<svg class="cirle-a" height="160" width="160">
	<circle cx="80" cy="80" r="80"/>
</svg>
<svg class="cirle-b" height="60" width="60">
	<circle cx="30" cy="30" r="30"/>
</svg>
<svg class="cirle-c" height="600" width="600">
	<circle cx="300" cy="300" r="300"/>
</svg>
<svg class="cirle-d" height="60" width="60">
	<circle cx="30" cy="30" r="30"/>
</svg>

Estos SVGs los posicionaremos por CSS como absolute, cada uno con sus coordenadas según el diseño y aplicaremos un fill con trasnparencia, para poder superponerlos y conseguir efectos de sombra y distintos tonos entre ellos:

svg {
	fill: rgba(0, 0, 0, 0.1);
	position: absolute;
}
.cirle-a {
	bottom: -80px;
	left: -80px;
}
.cirle-b {
	top: -30px;
	right: 70%;
}
.cirle-c {
	top: -330px;
	right: -300px;
}
.cirle-d {
	top: 195px;
	right: 145px;
}

La imagen en este ejemplo también cambia, pues necesitamos posicionarla de forma absoluta para que se ubique siempre desde la esquina superior derecha, o lo que es lo mismo, top: 0; y right: 0;. Si inspeccionas el código verás que el contenedor del texto tiene un ancho variable, definido por una mediaquery, para ocupar una parte del banner en resoluciones más generosas y cuando sea necesario y posible, llenar el 100% del ancho sin superponerse a la imagen.

Banner responsive con CSS background

Existe una tercera opción, muy útil si no tenemos acceso al HTML y donde usamos toda la potencia que nos permite la propiedad background en CSS3, pudiendo añadir múltiples declaraciones al mismo elemento. En nuestro caso, usaríamos lo siguiente:

.responsive-banner {
	background-image: linear-gradient(to bottom right, #D45BA1, #A784E0),
		url(circle.svg),
		url(circle.svg),
		url(circle.svg),
		url(circle.svg),
		url(image.png);
	background-repeat: no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat;
	background-position: center center,
		top right,
		top 40px,
		20% left,
		bottom center,
		top right;
}

Con una sola declaración llamamos a 6 elementos y los vamos ubicando según la posición que queramos. El orden es importante, pues los elementos se superpondrán, así que ubica en último lugar el elemento que quieres que se muestre sin filtros ni otros backgrounds por encima.

Como ves hemos creado un archivo SVG con el elemento círculo, para poder utilizarlo como fondo, consiguiendo el tamaño deseado (habría qu definir cada uno de ellos, pero al ser vectores, son fácilmente escalables sin que haya pixelación como pasaría con una imagen jpg o png.

Conclusión: Nuevos contenidos para nuevos formatos

En la era del diseño responsive y el mobile first no tiene sentido seguir trabajando con medidas de banners fijas, tipo 125×125 o 300×250, por mucho que la mayoría de plataformas de publicidad sigan manteniendo y demandando estos formatos. Esto unido a la tendencia en diseño web de la desaparición de la barra lateral marcan a media plazo, si no corto, un cambio radical en el diseño y maquetación de banners y espacios de publicidad.

La fexibilidad de los mismos y su integración dentro del contenido serán las referencias sobre las que empezar a diseñar y maquetar. Espero que estos ejemplos hayan servido para inspirarte o al menos como guía de iniciación en el diseño de banners responsive. Y tu, ¿qué opinas sobre el futuro de los banners?

Comentarios (4)

  1. Estoy de acuerdo, pero mientras las plataformas de publicidad online no hagan el cambio se seguirán usando banners estáticos ya que casi todo el mundo prefiere ingresos extra a través de dichas plataformas. Yo animo banners html a diario y ninguno es solicitado en formato responsive.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *