Style de bouton CSS3: utilisez la box-shadow pour créer des effets de bouton frais

Cet article explore deux fa?ons de créer des boutons en utilisant CSS3: Gradient CSS3 et Box-Shadow. Bien que les gradients CSS3 deviennent de plus en plus populaires dans les styles de bouton, soient faciles à configurer et peuvent évoluer avec les zones de boutons, leur support de navigateur est limité (principalement Firefox, Chrome et Safari), et la syntaxe est incohérente entre les différents navigateurs.

En revanche, en utilisant l'attribut Box-Shadow aux couches de couleurs de superposition, tout comme le peintre superpose des pigments, vous pouvez créer des boutons lisses sans image, zoomables et entièrement configurables. Bien que cette méthode puisse sembler compliquée pour superposer la couleur de la bo?te à bascule à première vue, elle est plus flexible.

étant donné que le support des gradients Pure CSS3 n'est pas parfait pour les éléments d'interface utilisateur importants et le manque de flexibilité des boutons basés sur l'image, il est crucial pour les concepteurs de sites Web pour ma?triser le moyen de créer des boutons à l'aide de gradients CSS3 et de propriétés de baril-shadow.

Méthode 1: Box-Shadow crée des effets multi-couches

Commen?ons par un bouton d'orange plat basique. Les étapes suivantes montrent étape par étape comment créer un effet de bouton brillant à l'aide de la box-shadow.

étape 1: Ajouter une ombre standard

La syntaxe de base de Box-Shadow est la suivante:

box-shadow: X偏移量 Y偏移量 模糊半徑 顏色

Nous pouvons superposer plusieurs ombres, séparées par des virgules. Par exemple:

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

La première ombre crée une ombre noire avec une transparence de 20%, décalée de 3 pixels en bas à droite, avec un rayon flou de 6 pixels. La deuxième ombre n'a pas de décalage, offrant une lueur sombre subtile qui rend le bouton plus texturé.

étape 2: Ajoutez la couleur sous-jacente

inset peut inverser les ombres pour appara?tre à l'intérieur du bouton. Nous pouvons l'utiliser pour créer la couleur sous-jacente:

inset 0px 25px 25px #930;

Cela laisse une zone orange légère douce dans la moitié inférieure du bouton, simulant la réflexion de la lumière sur la surface du verre.

étape 3: Ajouter la couleur de surbrillance

Ajoutez une ombre orange plus claire en haut du bouton avec un rayon flou plus petit pour créer un point culminant du bord dur:

inset 0px 20px 2px rgba(240, 150, 69, .5)

Notez que le nouveau box-shadow sera superposé sous l'ombre précédente, de sorte que la couleur de surbrillance doit être placée devant la couleur la plus foncée.

étape 4: Ajustez la réflexion

Pour rendre les reflets plus naturels, une ombre orange foncée floue floue peut être superposée en haut du bouton:

inset 0px 5px 12px #930

étape 5: Ajoutez un statut de survol

Lorsque la souris oscille, les paramètres de l'ombre peuvent être ajustés pour rendre le bouton plus tridimensionnel:

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

Compatibilité du navigateur

Cette méthode fonctionne parfaitement dans Safari et Chrome. La syntaxe CSS de Firefox est presque la même, remplacez simplement -webkit-box-shadow par -moz-box-shadow. Opera et IE9 prennent également en charge Box-Shadow, mais le préfixe -webkit- doit être supprimé. IE plus ancien ne prend pas en charge Box-Shadow.

Résumé

Bien que le bouton orange utilisé dans l'exemple puisse être un peu ringard, cette méthode d'utilisation de Box-Shadow pour superposer les couches de couleur est très pratique et peut créer une variété d'effets de bouton cool. Cette approche offre une meilleure compatibilité et flexibilité du navigateur par rapport aux gradients CSS3. J'espère que cet article pourra fournir de nouvelles idées pour votre conception de l'interface utilisateur.

(Les rendus des étapes 1 à 5 doivent être insérés ici, mais comme l'image ne peut pas être insérée directement, veuillez ajouter l'image en fonction de la description. Veuillez remplacer le lien photo par le lien d'image réel)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!