Background images for css

Conocer el lenguaje CSS es un requisito crucial para aquellos que quieren convertirse en desarrollador. CSS, junto con HTML y JavaScript forman la base de todo sitio web, ya que con el primero puedes determinar el estilo y el diseño de la página, con el segundo defines la estructura de los contenidos y con JS puedes personalizar los contenidos haciendo ellos interactivos.

En particular, con CSS podemos generar efectos muy creativos, dando un estilo verdaderamente único a nuestra página web. Pero demos un paso atrás.

Css que es

El lenguaje CSS (Cascading Style Sheets) es un lenguaje de marcas compuesto por reglas que permiten crear páginas web de gran impacto estético, mediante la compilación de las llamadas hojas de estilo. Con CSS será posible personalizar diseños, fuentes, haciendo que la página se adapte a múltiples dispositivos.

Además, con este lenguaje es posible personalizar el fondo de tu página web. Tanto es así que está disponible la propiedad background CSS.

Si queremos obtener un efecto granulado de nuestro fondo, podemos adoptar diferentes soluciones, utilizando una imagen .PNG o mediante un SVG que podemos crear mediante código.

El primer enfoque consiste en buscar una imagen granulada o borrosa. Para hacer esto, es suficiente interactuar con el fondo CSS mencionado anteriormente. En particular, con background-image.

Empecemos descargando la imagen blurring.png. A continuación, debemos crear un documento HTML corto y un código CSS para dar un estilo al container.

 <section class="container noise">
 <h1>Background desenfocado vía PNG</h1>
 </section>

 .container{

     margin: 0 auto;
     display: flex;
     width: 100%;
     min-height: 33vh;
     justify-content: center;
     align-items: center;
 }
  
 .noise{
     background: rgb(182, 34, 58);
     background-image: url(/assets/desenfocado.png);
 }

Gracias a estas simples líneas de código conseguimos un fondo difuminado dentro de una página web.

El segundo método, a través de SVG, es un poco más complicado. Crearemos un archivo SVG que tendrá un efecto similar al PNG del tutorial anterior y lo utilizaremos, mediante HTML y CSS, para obtener un fondo difuminado.

 <!-- svg: first layer -->
 <svg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'>

   <filter id='noiseFilter'>
     <feTurbulence 
       type='fractalNoise' 
       baseFrequency='1' 
       numOctaves='3' 
       stitchTiles='stitch'/>
   </filter>   

   <rect width='100%' height='100%' filter='url(#noiseFilter)'/>
 </svg>

Podemos recuperar el primer bloque de código HTML del sitio web Grainy Gradient playground que nos permite crear un efecto granulado desde la estructura del background del sitio web.

El bloque feTurbulence no es más que un filtro que hace que el fondo sea granulado. Entonces, la página HTML mostrará un fondo "ruidoso".

SVG se crea básicamente a través de líneas de código. Para establecer este efecto como estilo de fondo de la página web, podemos crear un noise.svg para insertarlo en el proyecto.

 <section class="container noise2">
 <h1>Noise using SVG File</h1>
 </section>  
 .noise2{
     background: rgb(219, 255, 219);
     background-image: url(/assets/noise.svg);
 }

De esta forma tenemos un resultado muy similar al obtenido con el uso del PNG.

Si echamos un vistazo al Grainy Gradient playground mencionado anteriormente, veremos una tercera solución. Esta solución omite el uso de archivos dentro del proyecto. Usa degradados que van de opacos a transparentes para permitir que se vea el desenfoque. Puede obtener el mismo efecto en un fondo sólido repitiendo parte de nuestro código anterior.

Este tutorial demuestra la flexibilidad del lenguaje CSS, para que pueda aprovechar una variedad de oportunidades para personalizar mejor su sitio web. ¡Consulta nuestro artículo sobre ejercicios de CSS para familiarizarte con el lenguaje!

Además, si te apasiona el mundo del desarrollo web, puedes consultar nuestra guía completa sobre CSS, o puedes suscribirte a nuestra hackademy que incluye el curso de CSS y muchas otras tecnologías fundamentales para convertirte en desarrollador web. ¡Te estamos esperando!