10 techniques de création utilisant CSS3 Box Shadow

Nous avons assisté à un grand nombre d'avancées dans le développement Web CSS3 au cours des dernières années. Les sites Web populaires à travers Internet ont commencé à incorporer de nombreux styles uniques, tels que les angles arrondis et les requêtes multimédia réactives aux appareils mobiles. Mais plus important encore, cela a ouvert la porte au prototypage d’interfaces créatives en quelques minutes seulement..

Dans cet article je veux partager 10 extraits de code relatifs aux brillants designs de shadow box CSS3. J'expliquerai comment le code fonctionne et comment vous pouvez implémenter chaque ombre de case dans votre propre site web.

Ces styles sont tous attribués à la forte influence de la conception d’autres sites Web populaires. C’est un excellent exemple de la façon dont les développeurs Web actuels créent des tendances percutantes pour l’avenir de la conception Web..

1. Barre d'outils supérieure fixe

Le service de médias sociaux roumain Trilulilu utilise une barre d’outils flottante autour de son site Web. Ceci peut être créé rapidement en utilisant un position: fixe; propriété sur n'importe quel élément de la barre supérieure. Mais cette ombre de boîte supplémentaire porte l’effet à un tout autre niveau..

#banner position: fixed; hauteur: 60px; largeur: 100%; en haut: 0; gauche: 0; border-top: 5px solid # a1cb2f; background: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); boîte-ombre: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-index: 999999;  #banner h1 line-height: 60px;

Vous remarquerez que la propriété box-shadow est en réalité configurée avec une combinaison de valeurs relativement simple. L'ombre tombera en dessous de la boîte et floutera de 3 pixels de chaque côté.

Nous pouvons utiliser le rgba () méthode permettant d’appliquer une légère opacité sur l’ombre, afin que l’élément n’apparaisse pas trop sombre. C'est un ajout subtil qui attirera sûrement l'attention de vos visiteurs.

Démo

2. Liste déroulante de sous-navigation

Voici une autre méthode d'ombre de zone de création appliquée à un sous-menu déroulant scalaire. Un effet similaire peut être observé sur l’entrepreneur lorsque vous survolez chacun des principaux liens de navigation. C'est certainement un peu plus délicat à configurer mais cela en vaut la peine.

#bar display: block; hauteur: 45px; arrière-plan: # 22385a; rembourrage en haut: 5px; marge inférieure: 150 pixels; position: relative;  #bar ul margin: 0px 15px; famille de polices: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li background: # 22385a; bloc de visualisation; taille de police: 1.2em; position: relative; float: gauche;  #bar ul li a display: block; couleur: # fffff7; hauteur de ligne: 45px; poids de police: gras; remplissage: 0px 10px; texte-décoration: aucun; z-index: 9999;  #bar ul li a: survolez, #bar ul li a.selected color: # 365977; background: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav display: block; à gauche: 14px; en haut: 48px; z-index: -1; largeur: 500px; position: absolue; hauteur: 90px; bordure: 1px solide # edf0f3; bordure supérieure: 0; remplissage: 10px 0 10px 10px; débordement caché; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bas-rayon-gauche: 3px; -webkit-border-bas-rayon-droit: 3px; border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -moz-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); box-shadow: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Force = 3, Direction = 180, Couleur = "# 333333");

Les liens de navigation peuvent être stylés pour changer de couleur lorsqu'ils sont sélectionnés ou en survol de la souris. J'ajoute également des bordures arrondies aux liens et au-dessus du menu déroulant. Cela donne une sensation plus agréable plutôt que des bords durs tout autour. Je fais aussi bon usage du -ms-filter et filtre propriétés qui sont la propriété exclusive d'Internet Explorer.

Si vous configurez un système de navigation complet, vous pourrez modifier le jeu d’affichage et masquer le menu une fois la page chargée. Puis, à l’aide de jQuery, vous pouvez cibler l’événement .hover () et afficher la barre de sous-navigation avec le contenu mis à jour..

Démo

3. Bouton ombré brillant

C’est peut-être l’un de mes styles préférés à créer en raison de la dynamique avec laquelle il apparaît sur la page. Si vous ne le savez pas, c'est le petit bouton bleu qui se trouve sur la page d'accueil de YouTube après votre première connexion..

blues color: #fff; largeur: 190px; hauteur: 35px; curseur: pointeur; font-family: Arial, Tahoma, sans serif; taille de police: 1.0em; poids de police: gras; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; largeur de la bordure: 1px; border-color: # 0053a6 # 0053a6 # 000; couleur de fond: # 6891e7; image d'arrière-plan: -moz-linear-gradient (en haut, # 4495e7 0, # 0053a6 100%); image d'arrière-plan: -ms-linear-gradient (en haut, # 4495e7 0, # 0053a6 100%); image d'arrière-plan: -o-linear-gradient (en haut, n ° 4495e7 0, n ° 0053a6 100%); background-image: -webkit-gradient (linéaire, gauche en haut, gauche en bas, arrêt de la couleur (0, # 4495e7), arrêt de la couleur (100%, # 0053a6)); background-image: -webkit-linear-gradient (haut, # 4495e7 0, # 0053a6 100%); image d'arrière-plan: dégradé linéaire (vers le bas, # 4495e7 0, # 0053a6 100%); ombre du texte: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: encart 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: encart 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: encart 0 1px 0 rgba (256, 256, 256, .35); box-shadow: encart 0 1 px 0 rgba (256, 256, 256, 0,35); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: encart 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -ms-box-shadow: encart 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: encart 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); box-shadow: encart 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); image d'arrière-plan: -moz-linear-gradient (haut, # 3a8cdf 0, # 0053a6 100%); image d'arrière-plan: -ms-linear-gradient (haut, # 3a8cdf 0, # 0053a6 100%); image d'arrière-plan: -o-linear-gradient (haut, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-gradient (linéaire, gauche haut, gauche bas, couleur-stop (0, # 3a8cdf), couleur-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (haut, # 3a8cdf 0, # 0053a6 100%); image d'arrière-plan: dégradé linéaire (jusqu'en bas, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: encart 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -ms-box-shadow: encart 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: encart 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: encart 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); image d'arrière-plan: -moz-linear-gradient (en haut, # 005ab4 0, # 175ea6 100%); image d'arrière-plan: -ms-linear-gradient (en haut, # 005ab4 0, # 175ea6 100%); image d'arrière-plan: -o-linear-gradient (en haut, # 005ab4 0, # 175ea6 100%); background-image: -webkit-gradient (linéaire, gauche en haut, gauche en bas, arrêt de la couleur (0, # 005ab4), arrêt de la couleur (100%, # 175ea6)); background-image: -webkit-linear-gradient (haut, # 005ab4 0, # 175ea6 100%); image d'arrière-plan: dégradé linéaire (vers le bas, # 005ab4 0, # 175ea6 100%);

Le code du bouton entier est beaucoup à regarder, mais nous essayons supporter autant de navigateurs que possible. Il existe des ombres de texte et des ombres de boîte accompagnées de la prise en charge de MS Internet Explorer 7+. Nous mettons aussi la image de fond propriété avec des gradients CSS3 sur un grand nombre de préfixes spécifiques au fournisseur.

Mais si vous aimez ce style, le le survol et les états actifs attireront également votre attention. Nous mettons essentiellement à jour la bordure pour inclure des ombres à l'intérieur lorsque vous appuyez, tout en mettant à jour le dégradé d'arrière-plan pour afficher un peu plus sombre..

Comme il n'y a pas d'images sur le bouton, vous pouvez mettre à jour les valeurs hexadécimales et les transformer pour les mélanger dans pratiquement n'importe quel jeu de couleurs..

Démo

4. Menu de suivi des notifications

Je ne suis pas un grand utilisateur de Facebook mais j'ai remarqué certaines techniques d'interface utilisateur lors de leur nouvelle conception. Ce menu instantané peut être comparé à votre notification popup ou à vos demandes d’amis, disponible sur la page d’accueil..

.dépliant largeur: 310px; marge supérieure: 10 px; taille de police: 11px; position: relative; famille de polices: «Lucida Grande», Tahoma, Verdana, Arial, sans-serif; couleur de fond: blanc; rembourrage: 9px 11px; arrière-plan: rgba (255, 255, 255, 0,9); bordure: 1px solide # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;  .flyout #tip background-image: url ('images / tip.png'); répétition de fond: non répétée; taille de l'arrière-plan: auto; hauteur: 11px; position: absolue; en haut: -11px; à gauche: 25px; largeur: 20px;  .flyout h2 text-transform: majuscule; couleur: # 666; taille de police: 1.2em; rembourrage en bas: 5px; marge inférieure: 12px; border-bottom: 1px solid #dcdbda;  .flyout p padding-bottom: 25px; taille de police: 1.1em; couleur: # 222;

Il n'y a pas beaucoup de nouveau code hallucinant à afficher ici. J'utilise un petit .pointe classe avec un élément span interne pour ajouter le triangle d'info-bulle. Il est possible de créer des triangles CSS3 purs, mais cette méthode n’est pas facile, comme vous pouvez l’imaginer. Si vous préférez cette méthode, il peut être intéressant de pirater quelque chose ensemble. Mais les propriétés de rotation CSS3 ne sont pas prises en charge partout. pendant ce temps, les images ne nécessitent aucune méthode de secours.

Démo

5. Enveloppeur de pages Apple

Il y a tellement d'ombres de boîtes CSS3 impressionnantes que vous pouvez trouver sur le site officiel d'Apple. Cet exemple ci-dessous est un conteneur de petite taille avec quelques colonnes. Lorsque vous regardez par-dessus la mise en page d’Apple, vous remarquerez que beaucoup de leurs pages se composent de nombreuses boîtes d’emballage..

.applewrap largeur: 100%; bloc de visualisation; hauteur: 150px; fond blanc; bordure: 1px solide; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0.3) 0 1 pixels 3 pixels; -moz-box-shadow: rgba (0,0,0,0,3) 0 1px 3px; box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: left; taille de la boîte: boîte-frontière; largeur: 250px; hauteur: 150px; remplissage: 16px 7px 6px 22px; police: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans serif; couleur: # 343434; border-right: 1px solide #dadada;

Vous pouvez créer une page similaire divisée en zones de contenu de différentes largeurs et hauteurs. Bien que j'aie mis quelques colonnes dans cette démo, ce n'est pas une technique de formatage nécessaire. L'ombre de la boîte ira mieux sur un fond blanc / gris. Mais je pense que l'affichage au-dessus de n'importe quelle couleur claire serait très bien.

Démo

6. Boîte de contenu Apple

Cet autre style de contenu sur le site Web d’Apple est principalement utilisé pour la conception de colonnes. Celles-ci se trouvent principalement au bas de la page, présentant les offres et autres informations connexes. C'est un style de design totalement différent avec l'ombre de la boîte qui s'affiche de haut en bas.

.applebox width: auto; hauteur: 85px; taille de la boîte: boîte-frontière; arrière-plan: # f5f5f5; rembourrage: 20px 20px 10px; marge: 10px 0 20px; bordure: 1px solide #ccc; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: encart 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: encart 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: incrément 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; float: gauche; marge: 0 0 0 30px;

Je ne pense pas que ce code devrait être trop difficile à suivre et à copier sur un autre conteneur div. La seule boîte-ombre que nous appliquons utilise encart avec les codes de couleur rgba alpha-transparent. Ainsi, bien que nous ayons l’ombre portée réglée sur du noir pur, nous n’affiche qu’une opacité de 30% environ..

Démo

7. Liens recommandés

C'est probablement mon style d'ombre de boîte préféré du site Web actuel d'Apple. Vous devriez trouver un style de démonstration en direct de cette technique sur la page iCloud avec une série de boîtes de liens flottants..

.pommefeature hauteur: 150px; marge: 8px; alignement vertical: en haut; affichage: inline-block;  .applefeature a display: block; largeur: 168px; hauteur: 140px; bordure: 1px solide #ccc; couleur: # 333; texte-décoration: aucun; poids de police: gras; hauteur de ligne: 1.3em; arrière-plan: # f7f7f7; -webkit-box-shadow: encart 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: encart 0 1px 2px rgba (0, 0, 0, .3); box-shadow: incrément 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  .applefeature a: hover background: #fafafa; arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (#fff) à (# f7f7f7)); arrière-plan: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: encart 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: encart 0 1px 2px rgba (0,0,0, 0,3); encadré-ombre: encart 0 1px 2px rgba (0,0,0, 0,3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  .applefeature une img display: block; marge: 26px auto 4px;  .applefeature a h4 display: block; largeur: 160px; taille de police: 1.3em; font-family: Arial, Tahoma, sans serif; couleur: # 646464; text-align: center;

Ces liens présentés ont une largeur fixe et comprennent une icône et un texte à afficher distincts. L'exemple d'Apple utilise une ombre de boîte similaire à celle décrite dans la zone de contenu précédente. toutefois l'ensemble de la boîte peut maintenant être activé en tant que lien qui comprend à la fois le :flotter et :actif États. Il y a beaucoup de flexibilité avec cette boîte de lien et vous devriez essayer de jouer avec le code source.

Il est possible de réduire la hauteur / largeur et de créer une liste de liens beaucoup plus petite. Il peut s'agir d'un ensemble de chapitres ou de pages d'un article, ou vous pouvez créer un sous-menu limité avec des icônes de liens. Honnêtement, c’est un formidable ensemble de nouvelles techniques CSS3 qui montrent toute la puissance dont vous disposez en tant que concepteur Web..

Démo

8. Images encadrées

J'ai ajouté un fond gris à cet exemple pour que vous puissiez voir plus clairement les styles d'ombre de la boîte. Cette zone est similaire aux aperçus présentés sur wordpress.com, sauf que j'ai ajouté un peu plus de profondeur au code source..

.wpframe background: #fff; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; rembourrage: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;

Étant donné que les images sont légèrement rembourrées de chaque côté, ce cadre apparaît sous la forme d'une large bordure blanche. Vous pouvez toujours mettre à jour la couleur d'arrière-plan, ou même ajouter une petite bordure externe pour séparer l'image de l'arrière-plan. Mais cet ensemble de styles assez simplistes peut être utilisé dans diverses techniques d’ombre de boîtes. Jouez avec le code et voyez comment vous pouvez améliorer la conception des images sur votre propre site web..

Démo

9. Champs d'entrée lumineux

J'ai eu cette idée après avoir visité la page de connexion Pinterest à quelques reprises. Leurs styles animés affichent des exemples éloquents de multiples ombres de boîtes en ligne, à la fois extérieures et incrustées..

.formwrap display: block; marge inférieure: 15 px;  .formwrap label display: inline-block; largeur: 80px; taille de police: 11px; poids de police: gras; couleur: # 444; font-family: Arial, Tahoma, sans serif;  .formwrap .shadowfield position: relative; largeur: 250px; taille de police: 17px; famille de fontes: "Helvetica Neue", Arial, sans-serif; poids de la police: normal; arrière-plan: # f7f8f8; couleur: # 7c7c7c; hauteur de ligne: 1,4; rembourrage: 6px 12px; contour: aucun; transition: tous les 0.2s à 0; -webkit-transition: tous les 0.2s à 0; -moz-transition: tous les 0.2s à 0; bordure: 1px solide # ad9c9c; border-radius: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0,2) en médaillon, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; background: #fff; couleur: # 5d5d5d; box-shadow: incrément 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 0 7px rgba (235, 82, 82, 0,5); -moz-box-shadow: encart 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 0 7px rgba (235, 82, 82, 0,5); -webkit-box-shadow: encart 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 0 7px rgba (235, 82, 82, 0,5);

Bien que les styles initiaux soient très attrayants, je suis attiré par la effets de transition lorsque vous vous concentrez sur chaque champ de saisie. Vous pouvez taper entre eux et voir la différence immédiate dans tant de propriétés. L'ombre du bloc lumineux externe est appliquée avec une ombre incrustée mise à jour. Également la couleur du texte devient plus claire à mesure que vous vous concentrez sur une entrée particulière, puis s'estompe lorsque vous vous déconcentrez.

Même copier un de ces effets améliorerait grandement l'expérience utilisateur de vos champs de formulaire. Assurez-vous de ne pas aller trop loin au-dessus du point où vos formulaires sont à peine utilisables. Cependant, la plupart des visiteurs apprécieront les effets esthétiques agréables, qui encouragent également les interactions et la participation accrue à votre site Web..

Démo

10. Boutons d'ombre élastiques

Ces boutons d'ombre uniques présentent une transition lente entre les états de survol et actifs. Vous pouvez trouver des exemples similaires sur la page d’accueil de Mozilla avec leur grande “Télécharger Firefox” bouton. Certains boîte ombre les propriétés combinent en réalité trois ombres différentes en une seule commande.

.blu-btn display: inline-block; -moz-border-radius: 0,25 em; border-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), encart 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), encart 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,0,1), encadré 0 -2px 0 0 rgba (0,0,0,0,2); couleur de fond: # 276195; image d'arrière-plan: -moz-linear-gradient (# 3c88cc, # 276195); image d'arrière-plan: -ms-linear-gradient (# 3c88cc, # 276195); background-image: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, stop de couleur (0%, # 3c88cc), stop de couleur (100%, # 276195)); image d'arrière-plan: -webkit-linear-gradient (# 3c88cc, # 276195); image d'arrière-plan: -o-linear-gradient (# 3c88cc, # 276195); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; image d'arrière-plan: gradient linéaire (# 3c88cc, # 276195); bordure: 0; curseur: pointeur; couleur: #fff; texte-décoration: aucun; text-align: center; taille de police: 16px; remplissage: 0px 20px; hauteur: 40px; hauteur de ligne: 40px; largeur minimale: 100px; ombre du texte: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans serif; -webkit-transition: tous linéaires .2s; -moz-transition: tout linéaire .2s; -o-transition: tout linéaire .2s; -ms-transition: tout linéaire .2s; transition: tous linéaires .2 .blu-btn: survol, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), encart 0 -2px 0 0 rgba (0,0,0,0,3), encadré 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), encart 0 -2px 0 0 rgba (0,0,0,0,3), encart 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), encart 0 -2px 0 0 rgba (0,0,0,0,3), encart 0 12px 20px 2px # 3089d8;  .blu-btn: actif -webkit-box-shadow: encart 0 2px 0 0 rgba (0,0,0,0.2), encart 0 12px 20px 6px rgba (0,0,0,0,2), encart 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: encart 0 2px 0 0 rgba (0,0,0,0.2), encart 0 12px 20px 6px rgba (0,0,0,0.2), encart 0 0 2px 2px rgba (0,0, 0,0,3); box-shadow: encart 0 2px 0 0 rgba (0,0,0,0,2), encart 0 12px 20px 6px rgba (0,0,0,0,2), encart 0 0 2px 2px rgba (0,0,0,0,0,3 )  .grn-btn display: inline-block; -moz-border-radius: 0,25 em; border-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), encart 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), encart 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,0,1), encadré 0 -2px 0 0 rgba (0,0,0,0,2); couleur de fond: # 659324; image d'arrière-plan: -moz-linear-gradient (# 81bc2e, # 659324); image d'arrière-plan: -ms-linear-gradient (# 81bc2e, # 659324); background-image: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, arrêt de couleur (0%, # 81bc2e), arrêt de couleur (100%, # 659324)); image d'arrière-plan: -webkit-linear-gradient (# 81bc2e, # 659324); image d'arrière-plan: -o-linear-gradient (# 81bc2e, # 659324); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; image d'arrière-plan: linear-gradient (# 81bc2e, # 659324); bordure: 0; curseur: pointeur; couleur: #fff; texte-décoration: aucun; text-align: center; taille de police: 16px; remplissage: 0px 20px; hauteur: 40px; hauteur de ligne: 40px; largeur minimale: 100px; ombre du texte: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans serif; -webkit-transition: tous linéaires .2s; -moz-transition: tout linéaire .2s; -o-transition: tout linéaire .2s; -ms-transition: tout linéaire .2s; transition: tout linéaire .2s;  .grn-btn: survol, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), encart 0 -2px 0 0 rgba (0,0,0 , 0,3), encart 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), encart 0 -2px 0 0 rgba (0,0,0,0,3), encart 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), encart 0 -2px 0 0 rgba (0,0,0,0.3), encart 0 12px 20px 2px # 85ca26;  .grn-btn: actif -webkit-box-shadow: encart 0 2px 0 0 rgba (0,0,0,0.2), encart 0 12px 20px 6px rgba (0,0,0,0,2), encart 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: encart 0 2px 0 0 rgba (0,0,0,0.2), encart 0 12px 20px 6px rgba (0,0,0,0.2), encart 0 0 2px 2px rgba (0,0, 0,0,3); box-shadow: encart 0 2px 0 0 rgba (0,0,0,0,2), encart 0 12px 20px 6px rgba (0,0,0,0,2), encart 0 0 2px 2px rgba (0,0,0,0,0,3 )

J'utilise des transitions complètes pendant 200 millisecondes sur les états de survol et de bouton actif. Ce qui est génial avec ces styles, c'est que vous pouvez les appliquer à presque n'importe quel élément cliquable. Boutons, liens d'ancrage, éléments de formulaire ou tout autre élément que vous jugez approprié - bien que ces styles doivent être utilisés avec parcimonie afin de ne pas surcharger votre conception.

Les boutons comme ceux-ci sont souvent mieux sauvegardés de la même manière que Mozilla les utilise. Associez ces styles à votre blog sur lequel vous avez des boutons pour les téléchargements gratuits, ou quelque chose de similaire.. Les utilisateurs aiment interagir avec des interfaces uniques et cela se traduit souvent par un pourcentage beaucoup plus élevé de votre classement par clic.

Démo

Dernières pensées

J'espère que vous pourrez tirer quelques leçons de cette collection de techniques d'ombre de boîtes. Vous pouvez vous concentrer sur de nombreux domaines, notamment les formulaires, les boîtes modales, les boutons, les barres d’outils et même la présentation complète du site Web..

N'hésitez pas à implémenter l'un de ces effets d'ombre dans des parties de votre propre site web. Il existe de nombreuses autres techniques, mais cette collection est parfaite pour les débutants et les développeurs avancés. Aussi, si vous avez des suggestions ou des questions sur l'article, vous pouvez les partager avec nous dans la zone de discussion ci-dessous.