Cómo crear patrones CSS fácilmente en menos de un minuto

Hoy te muestro un recurso con el que crear patrones CSS con los que conseguir diseños espectaculares rápidamente.

¿Qué es un patrón?

Un patrón no es más que un elemento, que se repite muchas veces. Si hablamos de patrones CSS, en este caso nos referimos a elementos que van a dar estilo a nuestra página web. Una forma bastante habitual de usar estos patrones, es creando fondos visualmente impactantes. Aunque se pueden utilizar en multitud de sitios, como banners, cabeceras, anuncios, etc.

En este caso vamos a crear un mosaico, como fondo de una web sin necesidad de utilizar las nuevas características de CSS3.

Creando un patrón de fondo con CSS

Para este fin, voy a utilizar Patternify, una sencilla utilidad que permite generar el código en Base64 del patrón diseñado. Esto te va a permitir usarlo sin necesidad de subir una imagen a un servidor web, así se simplica aún más su uso.

Como puedes ver en la imagen superior, he decidido crear un marcianito, para usarlo como ejemplo de patrones CSS. Esta herramienta también me muestra la manera de integrar esta creación en mi web, proporcionándome el código CSS para tal fin.

Animando un patrón con CSS3

Una vez que ya tienes tu patrón creado, ahora sí puedes sacar partido de las novedades de CSS3 y por ejemplo, animar tu patrón. Para ello puedes consultar la documentación detallada de este conjunto de propiedades. En mi caso, he decido utilizar una sencilla animación que mueve el elemento de derecha a izquierda.

Para ello he usado el siguiente código:

#example2{
  height: 150px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAMUlEQVQYlWNgIBUY/2f4T7Q4uiBORdgwVkX42DhNwjAZXTc2q0lTiMuXuIILqwSyGABfemTPpRb6lQAAAABJRU5ErkJggg==) repeat;
  animation-duration: 3s;
  animation-name: invadermove;
  animation-iteration-count: infinite
}

@keyframes invadermove{
  from{
    margin-left: 100%;
  }
}

Espero que este artículo te resulte interesante, tanto para conocer cómo crear patrones con CSS fácilmente, como para ver cómo sacarle partido a algunas de las características de CSS3.