Comment faire pour créer élégant boutons de navigation avec CSS - Conception Vanseo
Tu es là:
Accueil / Blog / CSS / Comment faire pour créer des boutons avec style de navigation CSS
Finale Barre de navigation Aperçu
Avant de commencer nous allons jeter un coup d'oeil où nous allons. Voici une image de ce que notre dernière barre de navigation ressemblera ainsi qu'une image de la façon dont il se penchera sur l'un au survol des boutons.
Et voici une démo de la barre de navigation qui ouvrira ses portes dans une nouvelle fenêtre.
Même sans utiliser les images de la barre de navigation ci-dessus a une sensation 3D et donne l'impression que les boutons peuvent être pressé ou cliqué.
Je ne vais pas aller sur tout le code utilisé pour créer la barre de navigation dans ce poste comme je l'ai couvert la plupart avant dans mon post simple barre de navigation. Ce que je veux vous montrer aujourd'hui est la partie qui donne sur le bouton de l'effet 3D, bien que je vais donner tout le code pour créer la barre de navigation en bas de ce post.
Frontières CSS de donner une profondeur d'élément
L'astuce pour l'effet 3D, comme vous pouvez le deviner à partir du titre ci-dessus, est d'utiliser les frontières CSS pour transmettre un sentiment de profondeur à partir d'une source de lumière imaginaire. Il y a 3 pièces simples à cette technique.
Illustrons les trois étapes ci-dessus en utilisant une version en niveaux de gris de notre barre de navigation pour effectuer les changements de couleur plus facile.
Je l'ai utilisé # 555555 la couleur pour les boutons en niveaux de gris ci-dessus et nous supposons notre source de lumière brille à partir de la gauche. Cela signifie que les haut et à gauche du bouton devraient apparaître plus légers alors que les côtés de droite et en bas seront plus sombres.
Je l'ai utilisé une frontière 2px pour chaque côté et pour le haut et sur les côtés gauche utilisé une couleur de # 777777 ou deux tons plus clairs que le bouton couleur # 555555. Le côté droit obtient une couleur deux tons plus foncés à # 333333 et le fond je n'allé une nuance plus foncée avec # 444444.
En pratique, vous pouvez utiliser seulement une bordure 1px, mais j'utilisé 2px ici pour rendre l'effet plus évident. Aussi je vais tendance à jouer un peu avec les couleurs jusqu'à ce que je reçois quelque chose qui me plaît, bien que je commence habituellement en faisant toutes les valeurs hex un ou deux numéros plus ou moins foncées.
Avec le bouton de renversement du processus est similaire, sauf que maintenant les côtés supérieur et gauche seront plus sombres et les côtés droit et bas seront plus légers. Ici, j'ai utilisé une couleur # 999999 pour le bouton lui-même et pour les frontières du code est le suivant.
Encore une fois, il est le même que précédemment, sauf pour les côtés les plus sombres et plus légers étant inversés.
L'extension de la technique Border CSS
La technique ci-dessus est très simple, mais il n'y a aucune raison que vous ne pouvez pas étendre certaines des possibilités plus créatives. Vous pouvez modifier la largeur des différentes frontières ou jouer avec les couleurs pour la faire ressembler à la lumière a été jeté à travers un filtre. Au lieu de changer tous les 6 chiffres hexadécimaux, vous pouvez augmenter ou diminuer les valeurs que rouge ou vert tout en gardant la constante bleu.
Une chose que je vais parfois faire est de changer pas les couleurs de bordure supérieure et inférieure sur le roulement. Cela donnera l'impression que lorsque vous appuyez sur le bouton se trouve au même niveau que la page environnante, au lieu de se sentir un peu déprimé de la page comme indiqué ici.
Code utilisé pour créer la barre de navigation
Comme promis voici tout le code que j'utilisé pour créer la barre de navigation en haut de la page. Le code # nav-wrapper est là juste pour avoir une couleur qui montre ce qui se passe mieux que le blanc de la page. Il est présenté ici, mais pas nécessaire.