soy Kseso y esto EsCSS

Estudio de banner centrado, responsive y no intrusivo puro Css

Una demo de cómo situar un banner responsive y no intrusivo centrado en medio de un contenido variable en número y extensión.

Estudio de banner centrado, responsive y no intrusivo puro Css

·Por Kseso ✎ 0

La necesidad de integrar los banrers publicitarios en el contenido del sitio y hacerlo de tal forma que no sean percibidos por los usuarios como molestos o intrusivos es de vital importancia tanto para el dueño de la web como para sus visitantes.

No siempre es fácil de lograr dicha integración. Y hay circunstancias más problemáticas que otras. Una particularmente difícil sería el caso de tener un sólo bloque de contenido variable y pretender colocar el banner en medio de él sin que haya solapamientos.

Como por ejemplo la página de inicio de este blog.

Campo de juego

Origen imagen: Internet Archive Book Images

Definamos antes las premisas de este juego o case study:

  • Un elemento, como el resumen de un artículo, con su título y un contenido textual variable. En la demo son varios párrafos p variables en número y extensión de cada uno.
  • Nuestro banner publicitario que deberá colocarse centrado (en X e Y) respecto al contenido textual.
  • Dicho banner no puede desbordar ni solaparse con el texto.
  • Y claro, todo debe ajustarse en función de las dimensiones del viewport.

Todo lo anterior se comprende mejor jugando diréctamente con la demo. Redimensiona la ventana de tu navegador para ver su comportamiento.

Ver demo a full

Todo sería mucho más sencillo de poder contar con las regiones Css. Pero va a ser un recurso que se hará esperar y desear.

Así que el recurso css elegido será otro: multicolumnas Css, que su soporte puede decirse que es universal.

En primer lugar debemos crear las dos columnas y el hueco entre ellas para el banner. El tamaño de ambos será función de la ventana al usar la función Css calc() para el hueco y definir el número de columnas en vez de su anchura:

article { /*el hueco entre columnas */ column-gap: calc(100vw / 3.25); /* el número de columnas */ column-count: 2; }

Nuestro banner, medidas y colocación, que al igual que el espacio entre las columnas, estará en función del tamaño del viewport para mantener las proporciones de ambos:

.mecenas { background: #3ebb96; width: calc(100% / 3.8); min-height: 10px; height: 90%; position: absolute; top: 5%; left: 50%; transform: translatex(-50%); transform-origin: center center; transition: .5s; }

Como verás, lo hacemos ligéramente más pequeño que el hueco creado entre las columnas para dejar aire entre el texto y el banner en los laterales como en la parte superior e inferior.

Con esto ya sería funcional, pero en pantallas pequeñas serían antiestéticas y nada funcionales las tres columnas.

Así que sólo resta prevenir esa situación con ayuda de una @media query para reescribir las declaraciones oportunas:

@media only screen and (max-width:800px) { article { margin: 1rem; column-count: auto; column-gap: 0; } .mecenas { background: tomato; position: relative; top: auto; left: auto; transform: translateX(0); width: auto; min-height: 120px; } }

En este caso opto por usar column-count: auto; en vez de un valor numérico porque no había definido la anchura de cada columna column-width.

El resultado final, añadidas algunas reglas más para animar los cambios y estilizar la demo es el siguiente. Pero es mejor que lo veas a pantalla completa para poder modificar los tamaños de la ventana y así ver los cambios que se producen.

See the Pen Responsive non intrusive banner by Kseso (@Kseso) on CodePen.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso