L'une des avancées de CSS 3 est la possibilité d'appliquer plusieurs background différents à un même élément. Jusqu'ici, si on voulait avoir par exemple plusieurs lien avec le même background plus une icone propre à chaque lien, il fallait se taper une image différente pour chaque lien ou ajouter un élément vide de type span à qui on appliquerait le background de l'icone. Maintenant, il suffit d'appliquer la texture unique et l'icone. Mais là où ça devient particulièrement intéressant, c'est quand on veut jouer avec des textures colorées.

Prenons une image de texture en png transparent et en niveau de gris :

texture

Cette texture servira de masque à notre élément, puis on appliquera par dessus une couleur qui permettra de colorer l'élément. J'expliquerais éventuellement dans un autre article comment créer la texture avec Photoshop, c'est assez simple en fait.

Grâce aux propriétés suivantes :

  1. .textured {
  2. 	background: url('http://img.over-blog-kiwi.com/0/00/01/19/201204/1334685545.4222.png');
  3. }
  4. .textured.blue {
  5. 	background:
  6. 		url('http://img.over-blog-kiwi.com/0/00/01/19/201204/1334685545.4222.png'),
  7. 		blue;
  8. }
  9. .textured.red {
  10. 	background:
  11. 		url('http://img.over-blog-kiwi.com/0/00/01/19/201204/1334685545.4222.png'),
  12. 		red;
  13. }
  14. .textured.green {
  15. 	background-image:
  16. 		url('http://img.over-blog-kiwi.com/0/00/01/19/201204/1334685545.4222.png'),
  17. 		-webkit-gradient(
  18. 			linear,
  19. 			left bottom,
  20. 			right top,
  21. 			color-stop(0, rgb(195,255,173)),
  22. 			color-stop(1, rgb(29,143,0))
  23. 	);
  24. 	background-image:
  25. 		url('http://img.over-blog-kiwi.com/0/00/01/19/201204/1334685545.4222.png'),
  26. 		-moz-linear-gradient(
  27. 			left bottom,
  28. 			rgb(195,255,173) 0%,
  29. 			rgb(29,143,0) 100%
  30. 	);
  31. }
  32. .textured.yellow {
  33. 	background-image:
  34. 		url('http://img.over-blog-kiwi.com/0/00/01/19/201204/1334685545.4222.png'),
  35. 		-webkit-gradient(
  36. 			linear,
  37. 			left bottom,
  38. 			right top,
  39. 			color-stop(0, rgb(255,248,173)),
  40. 			color-stop(1, rgb(143,79,0))
  41. 	);
  42. 	background-image:
  43. 		url('http://img.over-blog-kiwi.com/0/00/01/19/201204/1334685545.4222.png'),
  44. 		-moz-linear-gradient(
  45. 			left bottom,
  46. 			rgb(255,248,173) 0%,
  47. 			rgb(143,79,0) 100%
  48. 	);
  49. }
  50. .textured.lsd {
  51. 	background-image:
  52. 		url('http://img.over-blog-kiwi.com/0/00/01/19/201204/1334685545.4222.png'),
  53. 		-webkit-gradient(
  54. 			linear,
  55. 			left bottom,
  56. 			right top,
  57. 			color-stop(0, rgb(255,0,0)),
  58. 			color-stop(0.1, rgb(255,153,0)),
  59. 			color-stop(0.2, rgb(255,242,0)),
  60. 			color-stop(0.3, rgb(68,255,0)),
  61. 			color-stop(0.4, rgb(0,255,183)),
  62. 			color-stop(0.5, rgb(0,98,255)),
  63. 			color-stop(0.6, rgb(60,0,255)),
  64. 			color-stop(0.7, rgb(213,0,255)),
  65. 			color-stop(0.8, rgb(255,0,102)),
  66. 			color-stop(0.9, rgb(0,0,0)),
  67. 			color-stop(1, rgb(255,255,255))
  68. 	);
  69. 	background-image:
  70. 		url('http://img.over-blog-kiwi.com/0/00/01/19/201204/1334685545.4222.png'),
  71. 		-moz-linear-gradient(
  72. 			left bottom,
  73. 			rgb(255,0,0) 0%,
  74. 			rgb(255,153,0) 10%,
  75. 			rgb(255,242,0) 20%,
  76. 			rgb(68,255,0) 30%,
  77. 			rgb(0,255,183) 40%,
  78. 			rgb(0,98,255) 50%,
  79. 			rgb(60,0,255) 60%,
  80. 			rgb(213,0,255) 70%,
  81. 			rgb(255,0,102) 80%,
  82. 			rgb(0,0,0) 90%,
  83. 			rgb(255,255,255) 100%
  84. 	);
  85. }

…appliquées aux élements suivants :

  1. <ul>
  2. 	<li class="textured">Texturé</li>
  3. 	<li class="textured blue">Texturé et bleu</li>
  4. 	<li class="textured red">Texturé et rouge</li>
  5. 	<li class="textured green">Texturé et dégradé vert</li>
  6. 	<li class="textured yellow">Texturé et jaune dégradé vert</li>
  7. 	<li class="textured lsd">Texturé et LSD</li>
  8. </ul>
  • Texturé
  • Texturé et bleu
  • Texturé et rouge
  • Texturé et dégradé vert
  • Texturé et jaune devant, marron derrière
  • Texturé et LSD

Pour les visiteurs avec de vieux browsers tels que IE cassez vous !, voici un aperçu de ce que vous verriez avec un navigateur à jour :

Preview CSS 3 multi background

Voilà, avec une texture plus jolie et mieux travaillée, on peut faire des trucs vraiment très intéressants et surtout, gagner du temps quand le client a finalement changé d'avis sur la couleur du bouton ;)