Saviez-vous qu’il est possible avec du code CSS et sans utiliser d’image, de créer des motifs, voir des images pour vos pages HTML :
Cette technique utilise les fameux « radial-gradient » du CSS. Elle est donc compatible avec tous les navigateurs modernes : Firefox 3.6+, IE10+, Chrome, Safari 5.1, Opéra 11.10+
Avec un peu d’imagination, on peut faire de très jolis motifs ou dessins 😉
J’espère que jQuery UI va se mettre à les utiliser pour le rendu des ses boutons « X », car actuellement il utilise que des images avec une taille fixe, qui ne s’adapte pas à la résolution de l’écran (ça donne de petits boutons incliquables avec un doigt).
Vous trouverez une bibliothèque libre (en Anglais) de ces motifs CSS à l’adresse suivante :
http://lea.verou.me/css3patterns/
Pour faire le motif suivant dans le fond d’une page HTML je vous ai mis le code en suivant :
Super le motif d’arrière-plan !
que dû CSS, et pas d’image
Non ?
Tapez le code suivant dans un fichier « test.htm », puis ouvrez le fichier « test.htm » dans un butineur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body{
color: #000;
background : linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;
}
</style>
</head>
<body>
</body>
</html>