Comment créer des boutons 3D en utilisant le CSS ()
Boutons de texte qui ressemblent graphique Boutons 3D
Cascading Style Sheets ou CSS, peut être utilisé pour créer une grande variété d'effets visuels. Par exemple, il est possible de créer un bouton qui ressemble à trois dimensions (3D), mais est en fait du texte pur. L'effet 3D en saillie est produit en utilisant CSS. Cet article décrit deux façons dont vous pouvez produire un bouton de texte 3D en utilisant CSS, sans utiliser de graphiques.
Cet article suppose que vous avez une connaissance pratique de CSS. Vous ne devez pas être un gourou ou quelque chose comme ça, mais vous devez au moins avoir une compréhension de base de CSS, comment insérer le code CSS dans votre page Web et appliquer CSS à divers éléments HTML.
Façons de créer un bouton 3D avec effet CSS
Il y a probablement un certain nombre de façons que vous pouvez utiliser pour créer des boutons de texte qui ressemblent à elles sont des boutons 3D graphiques en utilisant CSS seul. Je vais décrire deux façons dans cet article.
En utilisant les « Encart » et « outset » Styles de bordure en CSS
La façon la plus simple de créer un effet 3D pour vos boutons est d'utiliser une installation fournie par CSS dans ce but. Prenez l'extrait suivant de code, généré par la barre de menu de navigation CSS Assistant Boutons. par exemple:
Regardez la ligne "border: 1px # départ b37d00;". Il précise que le bouton est à 1 pixel d'épaisseur, ont une valeur de couleur de « # b37d00 », et ont la propriété « début ». La propriété « départ » pour la frontière de style est ce qui rend le look bouton comme si elle dépasse du page Web. En d'autres termes, il fait le look de bloc comme il est un bouton qui peut être pressé.
CSS a également une autre propriété pour les bordures appelées « encart », qui comme son nom l'indique, fait paraître le bouton comme si elle est enfoncée.
Si vous disposez d'un navigateur web moderne, vous devriez être en mesure de voir l'effet de ces propriétés CSS sur les barres de menu Exemple de menu CSS page Assistant Bar. Si l'effet de la saillie ou la dépression n'est pas très évident dans l'assistant, il est probablement parce que je seulement 1 pixel pour la frontière. L'effet sera plus prononcé si vous utilisez une bordure plus épaisse (par exemple 2 pixels).
Comment créer un bouton avec le Encart ou Outset propriété
Il est très simple de créer un bouton 3D avec l'encart ou bien départ. Pour tout morceau de texte que vous voulez faire en un bouton, lui donner une couleur de fond et définir un style de frontière avec la propriété appropriée ( « encart » ou « départ »).
Disons que vous voulez rendre le texte « Home » dans un bouton. Dans le bloc tenant le texte, définissez les propriétés suivantes:
la couleur noire ;
background-color: # ffb200;
border: 1px # départ b37d00;
Pour le faire paraître visuellement comme un bouton, votre couleur de la bordure, # b37d00 dans l'exemple ci-dessus, devrait être une nuance de couleur d'arrière-plan plutôt que d'une autre couleur au hasard. La façon la plus simple de le faire est d'expérimenter avec différentes nuances de votre principale couleur de fond pour le départ. Navigateurs conformes aux standards calculeront les bonnes couleurs pour les différents côtés de votre bouton de la couleur que vous fournissez ici.
Création manuelle des 4 frontières d'un bouton pour créer un effet 3D Button
div.button couleur: noir;
background-color: # 9cf;
border-top: 1px solid # c0ffff;
border-right: 1px solid # 00F;
Border-bottom: 1px solid # 00F;
border-left: 1px solid # c0ffff;
>
Lorsque vous utilisez le style « encart » et « départ » pour vos frontières (comme mentionné dans l'étape précédente), le navigateur prend automatiquement en charge des couleurs correctes pour vous. Ici, cependant, vous faites tout manuellement, de sorte que vous aurez à comprendre les couleurs qui fonctionnent le mieux pour créer le genre de bouton que vous voulez pour votre page. Je suppose que les artistes talentueux graphiques peuvent probablement vous dire instinctivement quelles couleurs fonctionnent le mieux, mais si vous êtes comme moi, vous aurez juste à essayer différentes couleurs et vérifier l'effet sur votre page Web pour trouver la meilleure combinaison.
(Comme une note de côté, si vous voulez savoir comment faire la couleur de changement de bouton lorsque la souris survole, consultez l'article Comment faire vos liens Changer la couleur lorsque la souris passe dessus.)
Conclusion
Il apparaîtra sur votre page: