
Le but de ce tutoriel est de réaliser un menu en utilisant au maximum les nouvelles possibilités de CSS3 afin de réduire au mieux l'utilisation d'images.
Ce tutoriel a été réalisé à partir de deux sources :
Du fait de la particularité du bouton d'accueil, j'ai choisi de le placer en dehors du <ul> afin de pouvoir le styler plus facilement. Pour le reste, c'est classique. Les <li> qui ont un sous-menu possèdent une classe "liSub" afin de les différencier.
Le sous-menu est placé dans une <div> que l'on cache par défaut. La catégorisation du sous-menu a été faite de façon à pouvoir afficher beaucoup de rubriques. Il est bien sûr possible de le simplifier en supprimant des <ul>.
La partie la plus intéressante du tutoriel réside dans la création de la plupart des éléments graphiques du menu avec l'utilisation des propriétés CSS3 qui permettent d'éviter l'accumulation d'images.
Pour ce menu, très peu d'images sont utilisées; cela permet d'optimiser le chargement de la page. En plus de cela, j'ai opté pour l'utilisation de sprite CSS. Pour ceux qui ne savent pas ce qu'est un sprite et à quoi ça sert, voici un petit schéma explicatif qui démontre l'intérêt de grouper ses images en une seule, surtout dans le cas ou elles sont quasiment identiques.
![]()
Les 5 autres images à droite sont les seules utilisées pour réaliser ce menu.
Je vais maintenant m'attarder sur l'utilisation des propriétés CSS3 qui ont permis d'obtenir un menu identique à sa version Photoshop.

La propriété text-shadow comporte 4 paramètres : décalage horizontal, décalage vertical, flou, couleur.
Ici, j'applique une ombre sur "TUTORIALS" qui est au même niveau horizontal et vertical, de couleur noir et de flou 2px.

Le sous-menu ainsi que le passage de la souris sur les éléments du menu ont des bords arrondis fait grâce à la propriété border-radius.

La div qui contient le sous-menu possède une ombre tout autour d'elle. La propriété CSS3 box-shadow permet d'obtenir cet effet qui utilise la même syntaxe que text-shadow.
Malheureusement, Internet Explorer ne supporte pas encore cette propriété dans ses versions actuelles du navigateur... Il faudra patienter jusqu'à la version 9 qui est actuellement en développement pour pouvoir utiliser toutes les propriétés CSS3.
Donc pour IE 8 et inférieur, j'ai juste utilisé un hack pour appliquer un background-color à la div.

Pour cet effet, le CSS a appliqué nécessite ici une syntaxe particulière en fonction des navigateurs :
Pour que le dégradé fonctionne sur Internet Explorer, il faut utiliser la propriété "filter". Là encore la syntaxe est un peu différente pour Firefox et pour les navigateurs sous Webkit.
Pour vous faciliter la tâche, voici un site bien conçu qui vous permet de générer des dégradés CSS3 de façon très intuitive et rapide. Voir le site
Au final, le CSS3 aura permis une nouvelle approche dans la création d'effets visuels sur des éléments qui auraient auparavant été automatiquement et par défaut des images.
Il est désormais possible de substituer les techniques habituelles d'intégration par les nouveautés apportées par le CSS3.
Malheureusement, ce menu ne va pas être visualisé de la même façon sur tous les navigateurs...
Il a le mérite de s'y afficher correctement, mais pour ce qui concerne Internet Explorer, voici les différences que l'on obtient :

Internet Explorer 8 et 7 ne s'en tirent pas très bien, ces deux versions du navigateurs ne possèdent pas le support complet du CSS3, mais ce n'est pas pour autant que le menu s'affiche mal, il est juste beaucoup plus carré et moins esthétique. Internet Explorer 9 va pouvoir devenir un vrai rival lorsqu'il remplacera la version 8 d'ici peu de temps on l'espère.
En ce qui concerne Opera, il est entre les deux car il ne supporte pas encore les dégradés.
Je pense que même si les propriétés CSS3 peuvent paraîtres encore expérimentales du fait de l'utilisation de différentes syntaxes pour chaque navigateur, il est néanmoins important de commencer à s'y intéresser.
J'espère que ce tutoriel vous aura fait découvrir les possibilités très étendues du CSS3. D'autres tutoriels suivront pour vous apprendre à maîtriser toutes ses facettes.