Technologies Web

Patterns CSS en base64

Bonjour à tous. Par cette journée de vacances, je vais vous faire partager une ressource pour créer des patterns CSS basiques le tout encodés en base64.

Les images encodées en base64 sont directement ajoutées dans votre fichier CSS en texte. Ceci permet de n’avoir aucun chargement supplémentaires en plus de votre fichier CSS.

Mais qu’est-ce qu’un pattern ?

Un pattern en CSS, ou du moins dans notre exemple, correspond à une portion d’image répétée en X et en Y permettant de générer un motif comme, par exemple, un motif écossais, des stripes, …

Bien entendu, dans la ressource d’aujourd’hui, il va nous permettre de générer des motifs allant de 1px par 1px jusqu’à 10px par 10px. Ce qui restera assez limité si vous voulez reproduire un motif très complexe. Si vous êtes curieux, sachez que les stripes du header et du footer ont été générés avec cet outil.

L’outil en question s’appelle Patternify. Il s’agit d’un service web entièrement gratuit et permettant d’éditer pixel par pixel votre motif. Pour y accéder : http://www.patternify.com/

Maintenant vous pourrez créer des motifs sympas ne nécessitant aucun script JS ou autre image extérieure.