Los SVG son gráficos vectoriales redimensionables y lo soportan todos los navegadores modernos. En el artículo de hoy podrás ver como crear patrones SVG para fondos. Al ser vectores no pixelan, por lo que son ideales si vas a diseñar para pantallas retina.

PatternBold es una herramienta web, mediante la cual puedes escoger entre distintos fondos, cambiar el tamaño y seleccionar el color de fondo. Según eso  tendrás que insertar dentro del css y html un código u otro.

pattern-bold

 

¿Cómo lo insertas en tu web?

Dentro del head, va el siguiente código:

<link rel="stylesheet" href="css/patternbolt.css" />

 

Dentro del elemento que quieras que tenga ese fondo le añadirías por ejemplo:

class="ted pb-pattern o-lines-bold"

pero va a depender del tipo de fondo que quieras.

 

Dentro del archivo css tendrías que concretar el tamaño del fondo (si quieres que sea más grande…)

.ted:after { background-size: 40px ;}

y el color que quieras que tenga ese fondo:

.ted { background-color: #ffffff ;}

 

Entiendo que digas, vaya rollo, lo ideal es que mires la demo en esta web: http://buseca.github.io/patternbolt/  el código va a ir variando según lo que escojas.

Si eres de lo que nada de demo, prefieres descargarte los archivos y ver el código directamente, entonces la dirección a la que debes de ir es: https://github.com/buseca/patternbolt

Y, por último, si eres de los que te ha encantado el artículo, solo tienes que escribir dos palabrillas en comentarios y me alegrarás el día 🙂