Cada vez es más común ver diseños en página web que se salen de lo convencional, es decir que no tiene la típica estructura cuadrada o de caja a la que estamos acostumbrados.
En esta ocasión veremos cómo crear fondos para páginas irregulares, estos son algunos ejemplos:
Como pueden observar el fondo agrega un efecto de fluidez mucho más dinámico que el que se obtiene con una estructura cuadrada; es decir no se sabe en dónde comienza o termina una sección, por lo que hace de la lectura (scroll) de la página sea más cómodo e incluso divertido.
Paso 1, crear nuestro fondo
Para crear nuestro fondo usaremos Adobe XD una herramienta muy útil para diseñar páginas web y aplicaciones móviles.
Con la herramienta Pen (P) dibujamos nuestro fondo.
Posterior a esto procedemos a exportar nuestro fondo como SVG.
Paso 2, crear el código para implementarlo en nuestra página
Usaremos una base hecha con Bootstrap 4; aunque esto puede funcionar con cualquier otro framework.
Si notamos tenemos una <section> y dentro tenemos un titulo <h1>, lo que haremos será añadirle un poco de HTML y CSS para ir componiendo nuestro diseño.
Vamos a colocar una imagen dentro de nuestra etiqueta <h1> para que herede las propiedades de texto centrado.
<section class="container-fluid position-relative">
<div class="row">
<div class="col-12">
<h1 class="text-center mt-50"><img class="img-fluid-height" src="https://i.imgur.com/bOLi3Ns.png" height="540px" /></h1>
</div>
</div>
</section>Lo que hicimos fue muy simple, colocamos una imagen y con la clase .text-center la centramos, además le asignamos una medida base y le colocamos la clase .img-fluid-height para hacer la altura responsiva, es decir que varíe dependiendo del tamaño del dispositivo con el cual se consulte el sitio.
También colocamos las clases .container-fluid y .position-relative a <section>, para los que no están familizarizados con bootstrap, lo que estas clases hacen es darle un ancho fluido con 15px de padding por lado y la segunda pues es bastante obvia, le da una posición relativa, esto permitirá que los hijos de este elemento sean relativos a él.Entonces lo que haremos para que el fondo quede debajo de nuestro contenido y además sea responsivo será lo siguiente. Crearemos un par de divs dentro de section queándonos así:
<section class="container-fluid position-relative"><div class="content-bg"></div><div class="row content">
<div class="col-12">
<h1 class="text-center mt-50"><img src="https://i.imgur.com/bOLi3Ns.png" height="540px" class="img-fluid-height"></h1>
</div>
</div></section>Como verán creamos dos clases para dos elementos nuevos .content-bg y .content, para ambas clases este es el siguiente CSS:
.content-bg { position: absolute; z-index: 1; left: 0; right: 0; top: 0;}.content-bg svg { width: 100%; height: auto;}
.content { position: relative; z-index: 2;}Lo que queremos es que todo lo que esté dentro de .content-bg quede por debajo de .content, es por eso que le asignamos un z-index menor .content-bg en relación a .content además de que ambos son relativos al padre.
También le dimos instrucciones a .content-bg de permanecer 0px en el tope superior de su padre así como 0px a ambos lados, esto le permitirá tener un ancho del 100% y su altura la determinará su contenido, como verán también le indicamos que todas las etiquetas svg deberán tener un ancho del 100% y una altura automática, claro que también puede funcionar con jpg y png; sin embargo svg tiene un mejor rendimiento además de que al ser una imagen escalable no se distorsiona.
Para colocar la imagen svg existen dos formas, una haciendo referencia con la etiqueta img como cualquier otra imagen:
<img src="ubicacion/de-tu-imagen.svg">
ó abriendo el archivo svg en un editor de texto y copiando el código para posteriormente pegarlo en tu documento html, lo que nos debería de resultar en algo así:
Amazon Auto Links: No products found.