Retour vers le futur:
Dans cette section, nous allons créer de jolis boutons 3D pour la navigation; mais sans aucune image ou Java-Script quelconque; oui, oui, juste en CSS.
Pour cela, récupérons le travail réalisé précédemment, c'est à dire le site d'exemple.
Code HTML du site d'exemple:
Code CSS du style simple:
Voir le site d'exemple
Préparation:
Pour le moment, le menu de navigation est composé de bloc > menu et de bloc > sous-menu. Afin de rendre plus clair notre exercice, nous allons supprimer les blocs > sous-menu et nous travaillerons uniquement les blocs > menu. Pour cela nous allons aérer notre menu en augmentant le padding et rendre le fond transparent. Puis nous mettrons les blocs > menu en ligne grâce à un "display-inline-block" bien placé et séparerons ces blocs avec une marge à leur droite de 3%. Enfin nous rendrons les blocs > sous-menu invisible avec un [display:none]. Voici le code à modifier:
Voir le site préparé
Quelques propriétés de base:
Avant de venir à la pseudo 3D, donnons à nos blocs > menu un aspect convenable. Souvenez vous de la différence entre le bouton par lui-même > #menu ul li et le texte du bouton > #menu ul li a, certaines propriétés concernent le bouton, d'autres son texte. Nous commencerons par donner de l'espace entre les bords du bouton et le texte avec un padding de 5 pixels en bas et en haut et de 15 pixels à gauche et à droite. Puis nous affecterons au bouton une couleur bleue claire en rgba avec une opacité maxi. Nous modifierons la police de caractère, la taille et la couleur du texte. Voyez le code modifié:
Voir le site avec ces propriétés
Et maintenant la 3D:
Vous êtes prêt? Alors commençons par appliquer un dégradé de bleu au bouton. Malheureusement, parmi les navigateurs, les propriétés diffèrent; il faut écrire des lignes pour chacun d'eux [background:-moz-linear-gradient(top,rgba(122,188,255,1), rgba(11,123,234,1)); /* FF3.6+ */ background:-webkit-gradient(linear, left top, left bottom, color-stop (0%, rgba(122,188,255,1)), color-stop (100%, rgba(11,123,234,1))); /* Chrome,Safari4+ */ background: -o-linear-gradient (top, rgba(122,188,255,1), rgba(11,123,234,1)); /* Opera 11.10+ */].
Puis nous arrondiront les angles avec un border-radius simple [border-radius: 10px;],nous aurions pu modifier chaque angle séparément.
Maintenant, donnons à notre bouton une bordure plus claire... mais pas trop [border:1px outset rgba(173,214,255,.9);], puis une ombre extérieure plus foncée mais diffuse et une ombre intérieure plus claire [box-shadow:0 0 10px rgba(64,150,238,.7),0 -1px 0 rgba(122,188,255,.7) inset;].
Attends, c'est pas fini. Il nous faut encore donner une ombre au texte, celle-ci sera blanche et légèrement diffuse [text-shadow:-1px -1px 2px rgba(255,255,255,.6);]. Voyez le code à ajouter:
Survol de souris:
Mais c'est pas fini? Et bien non, il nous reste à modifier notre menu pour lui donner un aspect différent quand la souris passe au dessus d'un menu. Il nous faudra donc ajouter les classes > #menu ul li:hover et > #menu ul li a:hover
Là, je ne vous donne pas tous les détails; mais le boulot consiste à éclaircir légèrement toutes les couleurs pour donner l'impression d'un bouton enfoncé. Voyez les modifications:
Et IE 6/7/8/9/10 arriva:
Et Internet Explorer dans tout cela? Vous voyez dans le code des lignes spécifiques pour Firefox, Chrome, Safari, Opéra, mais pas pour le navigateur de Microsoft. Tout simplement parce que, après de longues et multiples recherches, et en attendant la version 10, et même en ajoutant des filtres maisons; cela ne fonctionne pas correctement. Il est possible d'obtenir un dégradé à peu près correct; mais dans ce cas, les arrondis laissent apparaître une couleur de fond ce qui détruit l'aspect des boutons. J'ai donc choisi d'oublier le dégradé pour IE qui se contente d'une couleur de fond standard avec et sans survol de la souris.
Si vous avez bien bossé et complété le CSS à chaque étape, vous devez vous retrouver avec de jolis boutons bleus en fausse 3D.
Voir le site avec les boutons 3D