10 Kreativtechniken mit CSS3 Box Shadow

Wir haben in den letzten Jahren eine enorme Anzahl von Fortschritten in der CSS3-Webentwicklung gesehen. Beliebte Websites im gesamten Internet haben viele einzigartige Stile wie abgerundete Ecken und auf mobile Medien reagierende Abfragen integriert. Noch wichtiger ist jedoch, dass kreative Schnittstellen innerhalb weniger Minuten prototypisiert werden können.

In diesem Artikel möchte ich teilen 10 Codeausschnitte für brillante CSS3-Boxschattenentwürfe. Ich werde erklären, wie der Code funktioniert und wie Sie jeden Box-Shadow in Ihre eigene Website implementieren können.

Alle diese Stile werden einem großen Einfluss auf das Design anderer populärer Websites zugeschrieben. Dies ist ein hervorragendes Beispiel dafür, wie aktuelle Webentwickler wirkungsvolle Trends für die Zukunft des Webdesigns entwickeln.

1. Feste Symbolleiste

Der rumänische Social Media-Dienst Trilulilu verwendet eine schwebende Symbolleiste für die gesamte Website. Dies kann mit a schnell erstellt werden Position: feststehend; Eigenschaft auf einem Topbar-Element. Dieser zusätzliche Boxschatten bringt den Effekt auf eine ganz neue Ebene.

#banner position: fixiert; Höhe: 60px; Breite: 100%; oben: 0; links: 0; border-top: 5px fest # a1cb2f; Hintergrund: #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); Box-Schatten: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-Index: 999999;  #banner h1 Zeilenhöhe: 60px;

Sie werden feststellen, dass die Box-Shadow-Eigenschaft mit einer relativ einfachen Wertekombination eingerichtet ist. Der Schatten fällt unter die Box und wird auf beiden Seiten um 3 Pixel unscharf.

Wir können das verwenden rgba () Methode zum Anwenden einer leichten Deckkraft auf den Schatten, damit das Element nicht zu dunkel erscheint. Es ist eine subtile Ergänzung, die die Aufmerksamkeit Ihres Besuchers sicher fesseln wird.

Demo

2. Subnavigation Dropdown

Hier ist eine weitere Kreativfeldschattenmethode, die auf ein Untermenü mit skalarem Dropdown angewendet wird. Ein ähnlicher Effekt ist auf Entrepreneur zu sehen, wenn Sie über die wichtigsten Hauptnavigationslinks fahren. Dies ist definitiv etwas schwieriger zu konfigurieren, aber die Geduld ist es wert.

#bar display: block; Höhe: 45px; Hintergrund: # 22385a; Polsterauflage: 5px; Rand unten: 150px; Position: relativ;  #bar ul margin: 0px 15px; Schriftfamilie: Candara, Calibri, "Segoe UI", Segoe, Arial, Serifenlos;  #bar ul li background: # 22385a; Bildschirmsperre; Schriftgröße: 1.2em; Position: relativ; Schwimmer: links;  #bar ul li a display: block; Farbe: # fffff7; Zeilenhöhe: 45px; Schriftdicke: fett; Auffüllen: 0px 10px; Textdekoration: keine; z-Index: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; Hintergrund: #fff; Rand oben links Radius: 3px; Rand oben rechts 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; links: 14px; oben: 48px; z-Index: -1; Breite: 500px; Position: absolut; Höhe: 90px; Rahmen: 1px fest # edf0f3; Border-Top: 0; Auffüllen: 10px 0 10px 10px; Überlauf versteckt; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; Rahmen unten rechts: 3px; Rahmen unten rechts: 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-Schatten: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "Progid: DXImageTransform.Microsoft.Shadow (Stärke = 3, Richtung = 180, Farbe =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Stärke = 3, Richtung = 180, Farbe = "# 333333");

Die Navigationslinks können so gestaltet werden, dass sie die Farbe ändern, wenn sie ausgewählt werden oder sich der Mauszeiger darüber befindet. Ich füge auch einige abgerundete Rahmen in die Links und über das Dropdown-Menü ein. Dies gibt ein besseres Gefühl als harte Kanten ringsum. Ich mache das auch gut aus -ms-filter und Filter Eigenschaften, die ausschließlich für Internet Explorer geschützt sind.

Wenn Sie ein vollständiges Navigationssystem einrichten, können Sie die Anzeige auf "none" ändern und das Menü ausblenden, wenn die Seite geladen wird. Anschließend können Sie mithilfe von jQuery das Ereignis .hover () anvisieren und die Subnav-Leiste mit aktualisiertem Inhalt anzeigen.

Demo

3. Glänzender Schatten-Button

Dies ist möglicherweise einer meiner Lieblingsstile, nur weil er so dynamisch auf der Seite erscheint. Wenn Sie es nicht erkennen können, ist dies die kleine blaue Schaltfläche auf der Startseite von YouTube, nachdem Sie sich zum ersten Mal angemeldet haben.

Blues Farbe: #fff; Breite: 190px; Höhe: 35px; Cursor: Zeiger; Schriftfamilie: Arial, Tahoma, serifenlos; Schriftgröße: 1.0em; Schriftdicke: fett; -moz-border-radius: 2px; -webkit-border-radius: 2px; Grenzradius: 2px; Randbreite: 1px; Rahmenfarbe: # 0053a6 # 0053a6 # 000; Hintergrundfarbe: # 6891e7; Hintergrundbild: -moz-linearer Gradient (oben, # 4495e7 0, # 0053a6 100%); Hintergrundbild: -ms-linearer Gradient (oben, # 4495e7 0, # 0053a6 100%); Hintergrundbild: -o-linearer Gradient (oben, # 4495e7 0, # 0053a6 100%); Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (0, # 4495e7), Farbstopp (100%, # 0053a6)); Hintergrundbild: -webkit-linearer Gradient (oben, # 4495e7 0, # 0053a6 100%); Hintergrundbild: linearer Gradient (nach unten, # 4495e7 0, # 0053a6 100%); Text-Schatten: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: Einfügung 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: Einfügung 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: Einfügung 0 1px 0 rgba (256, 256, 256, .35); Box-Schatten: Einfügung 0 1px 0 rgba (256, 256, 256, .35); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: Einfügung 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -ms-box-shadow: Einfügung 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: Einfügung 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); Box-Schatten: Einfügung 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); Hintergrundbild: -moz-linearer Gradient (oben, # 3a8cdf 0, # 0053a6 100%); Hintergrundbild: -ms-linearer Gradient (oben, # 3a8cdf 0, # 0053a6 100%); Hintergrundbild: -o-linearer Gradient (oben, # 3a8cdf 0, # 0053a6 100%); Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (0, # 3a8cdf), Farbstopp (100%, # 0053a6)); Hintergrundbild: -webkit-linearer Gradient (oben, # 3a8cdf 0, # 0053a6 100%); Hintergrundbild: linearer Gradient (nach unten, # 3a8cdf 0, # 0053a6 100%);  .blues: aktiv border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: Einfügung 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: Einfügung 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: Einfügung 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; Box-Schatten: Einfügung 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); Hintergrundbild: -moz-linearer Gradient (oben, # 005ab4 0, # 175ea6 100%); Hintergrundbild: -ms-linearer Gradient (oben, # 005ab4 0, # 175ea6 100%); Hintergrundbild: -o-linearer Gradient (oben, # 005ab4 0, # 175ea6 100%); Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (0, # 005ab4), Farbstopp (100%, # 175ea6)); Hintergrundbild: -webkit-linearer Gradient (oben, # 005ab4 0, # 175ea6 100%); Hintergrundbild: linearer Gradient (nach unten, # 005ab4 0, # 175ea6 100%);

Der gesamte Tastencode ist viel zu sehen, aber wir versuchen es So viele Browser wie möglich unterstützen. Es gibt Text- und Boxschatten mit begleitender Unterstützung für MS Internet Explorer 7+. Auch setzen wir die Hintergrundbild Eigenschaft mit CSS3-Farbverläufen über eine große Anzahl von herstellerspezifischen Präfixen.

Aber wenn Sie diesen Designstil lieben, dann Schwebeflug und aktive Zustände werden auch Ihre Aufmerksamkeit erregen. Wir aktualisieren den Rand im Wesentlichen so, dass er beim Herunterdrücken einige Schatten enthält, während der Hintergrundverlauf aktualisiert wird, um ein wenig dunkler zu erscheinen.

Da sich auf der Schaltfläche keine Bilder befinden, können Sie die Hex-Werte aktualisieren und diese in praktisch jedes Farbschema überblenden.

Demo

4. Flyout-Menü für Benachrichtigungen

Ich bin kein großer Benutzer von Facebook, aber ich habe einige UI-Techniken von deren Redesigns bemerkt. Dieses Flyout-Menü kann mit Ihren Benachrichtigungen oder Popup-Benachrichtigungen auf der Startseite verglichen werden.

.Flyout Breite: 310px; Rand oben: 10px; Schriftgröße: 11px; Position: relativ; Schriftfamilie: 'Lucida Grande', Tahoma, Verdana, Arial, serifenlos; Hintergrundfarbe: weiß; Polsterung: 9px 11px; Hintergrund: rgba (255, 255, 255, 0,9); Rahmen: 1px fest # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, 0,25); Box-Schatten: 0 3px 8px rgba (0, 0, 0, 0,25); -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px;  .flyout #tip Hintergrundbild: URL ('images / tip.png'); Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: Auto; Höhe: 11px; Position: absolut; oben: -11px; links: 25px; Breite: 20px;  .flyout h2 text-transform: Großbuchstaben; Farbe: # 666; Schriftgröße: 1.2em; Polsterung unten: 5px; Rand unten: 12px; Rahmen unten: 1px fest #dcdbda;  .flyout p padding-bottom: 25px; Schriftgröße: 1.1em; Farbe: # 222;

Es gibt nicht viele neue Mind-Bending-Codes, die hier angezeigt werden können. Ich benutze ein kleines .Spitze Klasse mit einem internen Spannelement zum Hinzufügen des Tooltip-Dreiecks. Es ist möglich, reine CSS3-Dreiecke zu erstellen, aber diese Methode ist nicht einfach, wie Sie sich vorstellen können. Wenn Sie diese Methode bevorzugen, kann es sinnvoll sein, gemeinsam etwas zu hacken. Die CSS3-Rotationseigenschaften werden jedoch nicht überall unterstützt. Inzwischen benötigen Bilder keine Rückfallmethode.

Demo

5. Apple Page Wrapper

Es gibt so viele beeindruckende CSS3-Box-Schatten, die Sie auf der offiziellen Website von Apple finden können. Dieses Beispiel zeigt einen kleinen Boxcontainer mit einigen Spaltenbereichen. Wenn Sie über Apples Layout schauen, werden Sie feststellen, dass viele Seiten aus zahlreichen Wrapper-Boxen bestehen.

.Apfelwickel Breite: 100%; Bildschirmsperre; Höhe: 150px; Hintergrund: weiß; Rand: 1px fest; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; Grenzradius: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba (0,0,0,0,3) 0 1px 3px; Box-Schatten: rgba (0, 0, 0, 0,3) 0 1px 3px;  .applewrap .col float: left; Box-Dimensionierung: Border-Box; Breite: 250px; Höhe: 150px; Polsterung: 16px 7px 6px 22px; Schrift: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, Serifenlos; Farbe: # 343434; Rand rechts: 1px fest #dadada;

Sie können eine ähnliche Seite zusammenstellen, die nach Inhaltsfeldern unterschiedlicher Breite und Höhe aufgeteilt ist. Obwohl ich einige Spalten in diese Demo eingefügt habe, ist dies keinesfalls eine notwendige Formatierungstechnik. Der Boxschatten passt am besten auf einen weißen / grauen Hintergrund. Aber ich denke, dass das Anzeigen über jeder Lichtfarbe ziemlich gut aussehen würde.

Demo

6. Apple Content Box

Dieses andere Inhaltsfeld auf der Website von Apple wird hauptsächlich für das Design von Spalten verwendet. Diese sind in erster Linie am unteren Rand der Seite mit Angeboten und anderen zugehörigen Informationen. Es ist ein völlig anderer Designstil, wobei der Box-Schatten von oben nach unten angezeigt wird.

.Apfelbox Breite: Auto; Höhe: 85px; Box-Dimensionierung: Border-Box; Hintergrund: # f5f5f5; Polsterung: 20px 20px 10px; Marge: 10px 0 20px; Rahmen: 1px fest #ccc; Grenzradius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: Einfügen von 0px 1px 1px rgba (0, 0, 0, .3); -Moz-Box-Schatten: Einfügen von 0px 1px 1px rgba (0, 0, 0, .3); Box-Schatten: Einfügung 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; Schwimmer: links; Marge: 0 0 0 30px;

Ich denke nicht, dass es zu schwierig sein sollte, diesem Code zu folgen und ihn in einen anderen div-Container zu kopieren. Der einzige Box-Schatten, den wir anwenden, ist Einsatz mit den rgba alpha-transparenten Farbcodes. Obwohl der Schatten auf rein schwarz eingestellt ist, zeigen wir nur eine Deckkraft von 30%.

Demo

7. Ausgewählte Links

Dies ist wahrscheinlich mein Lieblingsfeldschattenstil von Apples aktueller Website. Sie sollten einen Live-Demo-Stil dieser Technik auf der iCloud-Seite mit einer Reihe von Floating-Link-Boxen finden.

.Apfelfeature Höhe: 150px; Marge: 8px; vertikal ausrichten: oben; Anzeige: Inline-Block;  .applefeature a display: block; Breite: 168px; Höhe: 140px; Rahmen: 1px fest #ccc; Farbe: # 333; Textdekoration: keine; Schriftdicke: fett; Zeilenhöhe: 1.3em; Hintergrund: # f7f7f7; -webkit-box-shadow: Einfügung 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: Einfügung 0 1px 2px rgba (0, 0, 0, .3); Box-Schatten: Einfügung 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; Grenzradius: 4px;  .applefeature a: hover background: #fafafa; Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (#fff) bis (# f7f7f7)); Hintergrund: -moz-linearer Gradient (100% 100% 90 Grad, # f7f7f7, #fff); -webkit-box-shadow: Einfügung 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: Einfügung 0 1px 2px rgba (0,0,0, .3); Box-Schatten: Einfügung 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; Grenzradius: 4px;  .applefeature a img display: block; Marge: 26px Auto 4px;  .applefeature a h4 display: block; Breite: 160px; Schriftgröße: 1.3em; Schriftfamilie: Arial, Tahoma, serifenlos; Farbe: # 646464; Text ausrichten: Mitte;

Diese vorgestellten Links haben eine feste Breite und enthalten ein eindeutiges Symbol und Anzeigetext. Apples Beispiel verwendet einen ähnlichen Boxschatten, wie wir im vorherigen Inhaltsfeld gesehen haben. jedoch Die gesamte Box kann jetzt als Link aktiviert werden was sowohl die :schweben und :aktiv Zustände. Diese Linkbox bietet viel Flexibilität und Sie sollten versuchen, mit dem Quellcode herumzuspielen.

Es ist möglich, die Höhe / Breite zu verkürzen und eine viel kleinere Liste von Links zu erstellen. Dies kann eine Reihe von Kapiteln oder Seiten in einem Artikel sein, oder Sie können ein Untermenü mit Link-Symbolen erstellen. Es ist ehrlich gesagt ein großartiger Satz neuerer CSS3-Techniken, die zeigen, wie viel Leistung Sie als Webdesigner haben.

Demo

8. Gerahmte Bilder

Ich habe diesem Beispiel einen grauen Hintergrund hinzugefügt, damit Sie die Schattenstile des Kastens klarer sehen können. Dieses Feld ähnelt den auf WordPress.com gezeigten Vorschaubildern, außer dass ich dem Quellcode ein wenig mehr Tiefe hinzugefügt habe.

.wpframe background: #fff; Grenzradius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; Polsterung: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; Box-Schatten: 1px 2px 1px # d1d1d1;

Da die Bilder auf beiden Seiten mit einem kleinen Abstand versehen sind, erscheint dieser Rahmen als großer weißer Rand. Sie können jederzeit die Hintergrundfarbe aktualisieren oder sogar einen kleinen äußeren Rand hinzufügen, um das Bild vom Hintergrund zu trennen. Diese recht simplen Stile lassen sich jedoch in verschiedene Box-Shadow-Techniken manövrieren. Spielen Sie mit dem Code und sehen Sie, wie Sie das Design Ihrer eigenen Website verbessern können.

Demo

9. Leuchtende Eingabefelder

Ich hatte diese Idee, nachdem ich die Pinterest-Login-Seite mehrmals besucht hatte. Ihre animierten Stile zeigen einige eloquente Beispiele für mehrere Inline-Box-Schatten, sowohl außerhalb als auch in der Einfügung.

.Formularumbruch Anzeige: Block; Rand unten: 15px;  .formwrap label display: Inline-Block; Breite: 80px; Schriftgröße: 11px; Schriftdicke: fett; Farbe: # 444; Schriftfamilie: Arial, Tahoma, serifenlos;  .formwrap .shadowfield position: relative; Breite: 250px; Schriftgröße: 17px; Schriftfamilie: "Helvetica Neue", Arial, serifenlos; Schriftgewicht: normal; Hintergrund: # f7f8f8; Farbe: # 7c7c7c; Zeilenhöhe: 1,4; Polsterung: 6px 12px; Umriss: keine; Übergang: alle 0,2-Sekunden-In-Out-0s; -webkit-Übergang: alle 0,2s-In-Out-0s; -Moz-Übergang: alle 0,2-Sekunden-In-Out-0s; Rahmen: 1px fest # ad9c9c; Grenzradius: 6px 6px 6px 6px; Box-Schatten: 0 1px rgba (34, 25, 25, 0.2) Einfügung, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; Hintergrund: #fff; Farbe: # 5d5d5d; Box-Schatten: Einfügung 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: Einfügung 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: Inset 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);

Obwohl die anfänglichen Stile sehr attraktiv sind, zieht es mich an Übergangseffekte, wenn Sie sich auf jedes Eingabefeld konzentrieren. Sie können zwischen ihnen wechseln und den unmittelbaren Unterschied in so vielen Eigenschaften sehen. Der externe Leuchtfeldschatten wird zusammen mit einem aktualisierten Einfügungsschatten angewendet. Auch die Die Textfarbe wird heller, wenn Sie auf eine bestimmte Eingabe fokussieren, und erlischt dann, wenn Sie die Unschärfe einstellen.

Selbst das Kopieren über einen dieser Effekte würde die Benutzererfahrung Ihrer Formularfelder erheblich verbessern. Stellen Sie sicher, dass Sie nicht zu weit über Bord gehen, sodass Ihre Formulare kaum verwendet werden können. Die meisten Besucher werden jedoch die angenehmen ästhetischen Effekte genießen, die auch die Interaktion und die weitere Einbindung Ihrer Website fördern.

Demo

10. Elastische Schattenknöpfe

Diese einzigartigen Schattenschaltflächen sind im Hover- und aktiven Zustand mit einem langsamen Übergang gestaltet. Ähnliche Beispiele finden Sie auf der Mozilla-Homepage “Laden Sie Firefox herunter” Taste. Einige der Box Schatten Eigenschaften kombinieren tatsächlich drei verschiedene Schatten zu einem Befehl.

.blu-btn Anzeige: Inline-Block; -moz-border-radius: .25em; Grenzradius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), Einschub 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), Einschub 0 -2px 0 0 rgba (0,0,0,0,2); Box-Schatten: 0 2px 0 0 rgba (0,0,0,0,1), Einfügung 0 -2px 0 0 rgba (0,0,0,0,2); Hintergrundfarbe: # 276195; Hintergrundbild: -moz-linearer Gradient (# 3c88cc, # 276195); Hintergrundbild: -ms-linearer Gradient (# 3c88cc, # 276195); Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # 3c88cc), Farbstopp (100%, # 276195)); Hintergrundbild: -webkit-linearer Gradient (# 3c88cc, # 276195); Hintergrundbild: -o-linearer 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)"; Hintergrundbild: linearer Farbverlauf (# 3c88cc, # 276195); Grenze: 0; Cursor: Zeiger; Farbe: #fff; Textdekoration: keine; Text ausrichten: Mitte; Schriftgröße: 16px; Polsterung: 0px 20px; Höhe: 40px; Zeilenhöhe: 40px; min-Breite: 100px; Text-Schatten: 0 1px 0 rgba (0,0,0,0,35); Schriftfamilie: Arial, Tahoma, serifenlos; -webkit-Übergang: alle linearen .2s; -moz-Übergang: alle linearen .2s; -o-Übergang: alle linearen .2s; -ms-Übergang: alle linearen .2s; Übergang: alle linear .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), Einfügung 0 -2px 0 0 rgba (0,0,0,0,3), Einschub 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), Einfügung 0 -2px 0 0 rgba (0,0,0,0,3), Einfügung 0 12px 20px 2px # 3089d8; Box-Schatten: 0 2px 0 0 rgba (0,0,0,0,1), Einfügung 0 -2px 0 0 rgba (0,0,0,0,3), Einfügung 0 12px 20px 2px # 3089d8;  .blu-btn: aktiv -webkit-box-shadow: Einfügung 0 2px 0 0 rgba (0,0,0,0,2), Einfügung 0 12px 20px 6px rgba (0,0,0,0,2), Einfügung 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: Einfügung 0 2px 0 0 rgba (0,0,0,0,2), Einfügung 0 12px 20px 6px rgba (0,0,0,0,2), Einfügung 0 0 2px 2px rgba (0,0, 0,0,3); Box-Schatten: Einfügung 0 2px 0 0 rgba (0,0,0,0,2), Einfügung 0 12px 20px 6px rgba (0,0,0,0,2), Einfügung 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: Inline-Block; -moz-border-radius: .25em; Grenzradius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), Einschub 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), Einschub 0 -2px 0 0 rgba (0,0,0,0,2); Box-Schatten: 0 2px 0 0 rgba (0,0,0,0,1), Einfügung 0 -2px 0 0 rgba (0,0,0,0,2); Hintergrundfarbe: # 659324; Hintergrundbild: -moz-linearer Gradient (# 81bc2e, # 659324); Hintergrundbild: -ms-linearer Gradient (# 81bc2e, # 659324); Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # 81bc2e), Farbstopp (100%, # 659324)); Hintergrundbild: -webkit-linearer Farbverlauf (# 81bc2e, # 659324); Hintergrundbild: -o-linearer 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)"; Hintergrundbild: linearer Farbverlauf (# 81bc2e, # 659324); Grenze: 0; Cursor: Zeiger; Farbe: #fff; Textdekoration: keine; Text ausrichten: Mitte; Schriftgröße: 16px; Polsterung: 0px 20px; Höhe: 40px; Zeilenhöhe: 40px; min-Breite: 100px; Text-Schatten: 0 1px 0 rgba (0,0,0,0,35); Schriftfamilie: Arial, Tahoma, serifenlos; -webkit-Übergang: alle linearen .2s; -moz-Übergang: alle linearen .2s; -o-Übergang: alle linearen .2s; -ms-Übergang: alle linearen .2s; Übergang: alle linearen .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), Einschub 0 -2px 0 0 rgba (0,0,0 0,3), Einschub 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), Einfügung 0 -2px 0 0 rgba (0,0,0,0,3), Einfügung 0 12px 20px 2px # 85ca26; Box-Schatten: 0 2px 0 0 rgba (0,0,0,0,1), Einfügung 0 -2px 0 0 rgba (0,0,0,0,3), Einfügung 0 12px 20px 2px # 85ca26;  .grn-btn: aktiv -webkit-box-shadow: Einfügung 0 2px 0 0 rgba (0,0,0,0,2), Einfügung 0 12px 20px 6px rgba (0,0,0,0,2), Einfügung 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: Einfügung 0 2px 0 0 rgba (0,0,0,0,2), Einfügung 0 12px 20px 6px rgba (0,0,0,0,2), Einfügung 0 0 2px 2px rgba (0,0, 0,0,3); Box-Schatten: Einfügung 0 2px 0 0 rgba (0,0,0,0,2), Einfügung 0 12px 20px 6px rgba (0,0,0,0,2), Einfügung 0 0 2px 2px rgba (0,0,0,0,3 );

Ich verwende volle Übergänge für 200 Millisekunden bei Hover- und aktiven Schaltflächenstatus. Das Beste an diesen Stilen ist, dass Sie sie auf nahezu jedes anklickbare Element anwenden können. Schaltflächen, Ankerlinks, Formularelemente oder andere Elemente, die Sie für angemessen halten, sollten jedoch nur sparsam verwendet werden, um Ihr Design nicht zu überlasten.

Schaltflächen wie diese werden am besten auf dieselbe Weise wie Mozilla gespeichert. Hängen Sie diese Stile in Ihr Blog ein, wo Sie Schaltflächen für kostenlose Downloads oder ähnliches haben. Benutzer lieben es, mit einzigartigen Schnittstellen zu interagieren Dies führt oft zu einem viel höheren Prozentsatz für Ihre Klickrate.

Demo

Abschließende Gedanken

Ich hoffe, Sie können einige großartige Lektionen aus dieser Sammlung von Schattenkastentechniken mitnehmen. Es gibt viele verschiedene Bereiche, auf die Sie sich konzentrieren können, einschließlich Formulare, modale Felder, Schaltflächen, Symbolleisten und sogar vollständige Website-Layouts.

Sie können jeden dieser Schatteneffekte in Teilen Ihrer eigenen Website implementieren. Es gibt viele andere Techniken, aber diese Sammlung ist sowohl für Anfänger als auch für fortgeschrittene Entwickler geeignet. Wenn Sie Anregungen oder Fragen zu dem Artikel haben, können Sie uns dies im Diskussionsbereich für Kommentare mitteilen.