10 Creatieve technieken met CSS3 Box Shadow

We hebben een enorme hoeveelheid vorderingen gezien in CSS3-webontwikkeling in de afgelopen paar jaar. Populaire websites overal op internet zijn begonnen met het opnemen van veel unieke stijlen, zoals afgeronde hoeken en op mobiel reagerende mediaquery's. Maar wat nog belangrijker is, dit heeft de deur geopend voor creatieve interfaces die binnen enkele minuten kunnen worden geprototypeerd.

In dit artikel wil ik delen 10 codefragmenten met betrekking tot briljante CSS3-doosschaduwontwerpen. Ik zal uitleggen hoe de code werkt en hoe je elke doosschaduw kunt implementeren in je eigen website.

Deze stijlen worden allemaal toegeschreven aan geweldige ontwerpinvloed van andere populaire websites. Dit is een goed voorbeeld van hoe huidige webontwikkelaars krachtige trends bouwen voor de toekomst van webdesign.

1. Fixed Top-werkbalk

De Roemeense sociale-mediaservice Trilulilu gebruikt een zwevende werkbalk boven hun gehele website. Dit kan snel worden gemaakt met behulp van een positie: vast; eigenschap op elk bovenste staafelement. Maar deze extra doosschaduw zorgt voor een geheel nieuw niveau.

#banner positie: vast; hoogte: 60 px; breedte: 100%; boven: 0; links: 0; border-top: 5px solid # a1cb2f; achtergrond: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-vak-schaduw: 0 2px 3px 0px rgba (0, 0, 0, 0.16); vakschaduw: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z-index: 999999;  #banner h1 line-height: 60px;

Je zult zien dat de eigenschap vak-schaduw eigenlijk is ingesteld met een vrij eenvoudige waardecombinatie. De schaduw valt onder de doos en vervaagt aan weerszijden met 3 px.

We kunnen de gebruiken RGBA () methode om lichte dekking op de schaduw toe te passen, zodat het element niet te donker lijkt. Het is een subtiele toevoeging die zeker de aandacht van uw bezoekers zal trekken.

demonstratie

2. Subnavigatie Dropdown

Hier is nog een creatieve doosschaduwmethode toegepast op een scalair dropdown-submenu. Een soortgelijk effect is te zien op Ondernemer terwijl u zweeft over elk van de bovenste hoofdnavigatielinks. Dit is zeker een beetje lastiger om te configureren, maar het geduld zeker waard.

#bar weergave: blok; hoogte: 45 px; achtergrond: # 22385a; padding-top: 5px; margin-bottom: 150px; positie: relatief;  #bar ul margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li background: # 22385a; weergave: blok; font-size: 1.2em; positie: relatief; zweven: links;  #bar ul li a display: block; kleur: # fffff7; regelhoogte: 45 px; lettertype: vet; opvulling: 0px 10px; tekstdecoratie: geen; z-index: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; achtergrond: #fff; grens-bovenkant-linker-straal: 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; links: 14px; boven: 48px; z-index: -1; breedte: 500 px; positie: absoluut; hoogte: 90 px; border: 1px solid # edf0f3; border-top: 0; opvulling: 10px 0 10px 10px; overloop verborgen; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 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); vakschaduw: 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 (Strength = 3, Direction = 180, Color = "# 333333");

De navigatielinks kunnen worden gestyled om van kleur te veranderen wanneer ze worden geselecteerd of met de muisaanwijzer. Ik voeg ook een aantal afgeronde randen toe aan de koppelingen en het vervolgkeuzemenu. Dit geeft een leuker gevoel in plaats van harde randen rondom. Ik maak ook goed gebruik van de -ms-filter en filter eigenschappen die uitsluitend eigendom zijn van Internet Explorer.

Als u een volledig navigatiesysteem instelt, kunt u het display instellen op none en het menu verbergen als de pagina wordt geladen. Vervolgens kunt u met behulp van sommige jQuery de gebeurtenis .hover () targeten en de subnavbalk met bijgewerkte inhoud weergeven.

demonstratie

3. Glanzende schaduwknop

Dit is mogelijk een van mijn favoriete stijlen om te maken, alleen vanwege de dynamiek die op de pagina wordt weergegeven. Als je het niet kunt zien, is dit de kleine blauwe knop op de startpagina van YouTube nadat je je voor het eerst hebt aangemeld.

blues color: #fff; breedte: 190 px; hoogte: 35 px; cursor: pointer; font-family: Arial, Tahoma, sans-serif; font-size: 1.0em; lettertype: vet; -moz-border-radius: 2px; -webkit-border-radius: 2px; grensradius: 2px; grensbreedte: 1px; randkleur: # 0053a6 # 0053a6 # 000; achtergrondkleur: # 6891e7; achtergrondafbeelding: -moz-lineaire gradiënt (bovenaan, # 4495e7 0, # 0053a6 100%); achtergrondafbeelding: -ms-lineair verloop (bovenaan, # 4495e7 0, # 0053a6 100%); achtergrondafbeelding: -o-lineaire gradiënt (boven, # 4495e7 0, # 0053a6 100%); achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleurstop (0, # 4495e7), kleurstop (100%, # 0053a6)); achtergrondafbeelding: -webkit-lineair verloop (bovenaan, # 4495e7 0, # 0053a6 100%); achtergrondafbeelding: lineair verloop (naar beneden, # 4495e7 0, # 0053a6 100%); text-shadow: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: inzet 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: inzet 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: inzet 0 1px 0 rgba (256, 256, 256, .35); box-shadow: inzet 0 1px 0 rgba (256, 256, 256, .35); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-colour: # 002d59 # 002d59 # 000; -moz-box-shadow: inzet 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: inzet 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-vak-schaduw: inzet 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); vakschaduw: inzet 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); achtergrondafbeelding: -moz-lineaire gradiënt (boven, # 3a8cdf 0, # 0053a6 100%); achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 3a8cdf 0, # 0053a6 100%); achtergrondafbeelding: -o-lineaire gradiënt (boven, # 3a8cdf 0, # 0053a6 100%); achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleurstop (0, # 3a8cdf), kleurstop (100%, # 0053a6)); achtergrondafbeelding: -webkit-lineaire gradiënt (bovenaan, # 3a8cdf 0, # 0053a6 100%); achtergrondafbeelding: lineair verloop (naar beneden, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-colour: # 000 # 002d59 # 002d59; -moz-box-shadow: inzet 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: inzet 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-vak-schaduw: inzet 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: inzet 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); achtergrondafbeelding: -moz-lineaire gradiënt (boven, # 005ab4 0, # 175ea6 100%); achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 005ab4 0, # 175ea6 100%); achtergrondafbeelding: -o-lineaire gradiënt (boven, # 005ab4 0, # 175ea6 100%); achtergrondafbeelding: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (0, # 005ab4), kleur-stop (100%, # 175ea6)); achtergrondafbeelding: -webkit-lineaire gradiënt (bovenaan, # 005ab4 0, # 175ea6 100%); achtergrondafbeelding: lineair verloop (naar beneden, # 005ab4 0, # 175ea6 100%);

De hele knopcode is veel om naar te kijken, maar we proberen het om zoveel mogelijk browsers te ondersteunen. Er zijn tekstschaduwen en doosschaduwen met bijbehorende ondersteuning voor MS Internet Explorer 7+. Ook stellen we de achtergrond afbeelding eigenschap met CSS3-gradiënten over een groot aantal leverancierspecifieke voorvoegsels.

Maar als je van deze stijl houdt, dan is de zweven en actieve staten zullen ook uw aandacht trekken. We zijn in feite bezig met het bijwerken van de rand om een paar schaduwen erin op te nemen terwijl je naar beneden duwt, terwijl je het achtergrondverloop bijwerkt om een beetje donkerder weer te geven.

Omdat er geen afbeeldingen op de knop staan, kunt u de hex-waarden bijwerken en deze laten overvloeien naar praktisch elk kleurenschema.

demonstratie

4. Meldingen Flyout-menu

Ik ben geen grote gebruiker van Facebook, maar ik heb sommige UI-technieken opgemerkt door hun nieuwe ontwerpen. Dit flyout-menu kan worden vergeleken met uw meldingen of vriendenverzoeken op de startpagina.

.flyout width: 310px; margin-top: 10px; font-size: 11px; positie: relatief; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; achtergrondkleur: wit; opvulling: 9px 11px; achtergrond: rgba (255, 255, 255, 0.9); rand: 1px vast # c5c5c5; -webkit-vak-schaduw: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); vakschaduw: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 3px;  .flyout #tip background-image: url ('images / tip.png'); achtergrondherhaling: geen herhaling; achtergrondformaat: auto; hoogte: 11 px; positie: absoluut; top: -11px; links: 25px; breedte: 20px;  .flyout h2 text-transform: hoofdletter; kleur: # 666; font-size: 1.2em; padding-bottom: 5px; margin-bottom: 12px; border-bottom: 1px solid #dcdbda;  .flyout p padding-bottom: 25px; font-size: 1.1em; kleur: # 222;

Er is niet veel nieuwe mind-bending code om hier te tonen. Ik gebruik een kleine .tip klasse met een intern spanelement om de tooltip-driehoek toe te voegen. Het is mogelijk om pure CSS3-driehoeken te maken, maar deze methode is niet gemakkelijk, zoals je je misschien kunt voorstellen. Als je deze methode verkiest, is het misschien de moeite waard om samen iets te hacken. Maar de CSS3-rotatie-eigenschappen worden niet overal ondersteund; ondertussen hebben afbeeldingen geen fallback-methode nodig.

demonstratie

5. Apple Page Wrapper

Er zijn zoveel indrukwekkende CSS3-vakschaduwen die je kunt vinden op de officiële website van Apple. Dit onderstaande voorbeeld is een kleine dooscontainer met een paar kolomoverspanningen. Als je kijkt naar de lay-out van Apple, zul je veel van hun pagina's zien die bestaan uit verschillende wrapper-boxen.

.applewrap breedte: 100%; weergave: blok; hoogte: 150 px; achtergrond: wit; rand: 1px vast; border-colour: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; grensradius: 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-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: left; box-sizing: border-box; breedte: 250 px; hoogte: 150 px; opvulling: 16px 7px 6px 22px; lettertype: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, schreefloos; kleur: # 343434; border-right: 1px solid #dadada;

U kunt een vergelijkbare pagina samenstellen opgesplitst per inhoudsvak van verschillende breedte en hoogte. Hoewel ik een paar kolommen in deze demo heb gestopt, is het op geen enkele manier een noodzakelijke opmaaktechniek. De doosschaduw past het best op een wit / grijze achtergrond. Maar ik denk dat het weergeven van elke lichte kleur er goed uitziet.

demonstratie

6. Apple Content Box

Deze andere stijl van inhoud op de Apple-website wordt meestal gebruikt voor kolomontwerpen. Deze staan voornamelijk onderaan de pagina met deals en andere gerelateerde informatie. Het is een totaal andere ontwerpstijl waarbij de doosschaduw van boven naar beneden wordt weergegeven.

.applebox width: auto; hoogte: 85 px; box-sizing: border-box; achtergrond: # f5f5f5; opvulling: 20px 20px 10px; marge: 10px 0 20px; border: 1px solid #ccc; grensradius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: inzet 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: inzet 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: inzet 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; zweven: links; marge: 0 0 0 30px;

Ik denk niet dat deze code te moeilijk moet zijn om te volgen en naar een andere div-container te kopiëren. De enige doosschaduw die we toepassen, gebruikt inzet met de rgba alpha-transparante kleurcodes. Dus hoewel we de slagschaduw hebben ingesteld op puur zwart, geven we alleen een dekking van 30% weer.

demonstratie

7. Uitgelichte koppelingen

Dit is waarschijnlijk mijn favoriete doosschaduwstijl van de huidige website van Apple. Je zou een live demostijl van deze techniek op de iCloud-pagina moeten vinden met een reeks zwevende link boxes.

.applefeature height: 150px; marge: 8px; vertical-align: top; weergave: inline-block;  .applefeature a display: block; breedte: 168 px; hoogte: 140 px; border: 1px solid #ccc; kleur: # 333; tekstdecoratie: geen; lettertype: vet; regelhoogte: 1.3em; achtergrond: # f7f7f7; -webkit-box-shadow: inzet 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: inzet 0 1px 2px rgba (0, 0, 0, .3); box-shadow: inzet 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; grensradius: 4px;  .applefeature a: hover background: #fafafa; achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (#fff), tot (# f7f7f7)); achtergrond: -moz-linear-gradient (100% 100% 90eg, # f7f7f7, #fff); -webkit-box-shadow: inzet 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: inzet 0 1px 2px rgba (0,0,0, .3); box-shadow: inzet 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; grensradius: 4px;  .applefeature a img display: block; marge: 26px auto 4px;  .applefeature a h4 display: block; breedte: 160 px; font-size: 1.3em; font-family: Arial, Tahoma, sans-serif; kleur: # 646464; text-align: center;

Deze gekenmerkte links zijn ingesteld op een vaste breedte en bevatten een duidelijk pictogram en displaytekst. Apple's voorbeeld maakt gebruik van een soortgelijke doosschaduw zoals we in het vorige inhoudsvak zagen. Echter de volledige box kan nu worden geactiveerd als een link die zowel de : hover en :actief staten. Er is veel flexibiliteit met deze link box en je zou eens moeten proberen met de broncode te spelen.

Het is mogelijk om de hoogte / breedte in te korten en een veel kleinere lijst met links te maken. Dit kunnen een aantal hoofdstukken of pagina's in een artikel zijn, of u kunt een submenu beperkt maken met koppelingspictogrammen. Het is eerlijk gezegd een geweldige set nieuwe CSS3-technieken die laten zien hoeveel kracht je hebt als webdesigner.

demonstratie

8. Ingelijste afbeeldingen

Ik heb een grijze achtergrond toegevoegd aan dit voorbeeld, zodat u de doosschaduwstijlen duidelijker kunt zien. Dit vak lijkt op de aanbevolen voorbeeldshots op wordpress.com, behalve dat ik wat meer diepgang aan de broncode heb toegevoegd.

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

Aangezien de afbeeldingen aan beide kanten een kleine opvulling krijgen, wordt dit frame weergegeven als een grote witte rand. U kunt de achtergrondkleur altijd bijwerken of zelfs een kleine buitenrand toevoegen om de afbeelding van de achtergrond te scheiden. Maar deze vrij simplistische reeks stijlen kan worden gemanoeuvreerd in verschillende doosschaduwtechnieken. Speel rond met de code en kijk hoe je de afbeeldingontwerpen op je eigen website kunt verbeteren.

demonstratie

9. Gloeiende invoervelden

Ik kreeg dit idee na een paar keer op de inlogpagina van Pinterest te zijn geweest. Hun geanimeerde stijlen laten echt welsprekende voorbeelden zien van meerdere inline doosschaduwen, zowel aan de buitenkant als in de inzet.

.formwrap display: block; margin-bottom: 15px;  .formwrap label display: inline-block; breedte: 80px; font-size: 11px; lettertype: vet; kleur: # 444; font-family: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relative; breedte: 250 px; lettergrootte: 17px; font-family: "Helvetica Neue", Arial, sans-serif; font-gewicht: normaal; achtergrond: # f7f8f8; kleur: # 7c7c7c; regelhoogte: 1,4; opvulling: 6px 12px; overzicht: geen; overgang: alle 0.2s gemak-in-uit 0s; -webkit-overgang: alle 0s gemakkelijk in-uit 0s; -moz-overgang: alle 0,2s gemak-in-uit-0s; rand: 1px vast # ad9c9c; grensradius: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0.2) inzet, 0 1px #fff;  .formwrap .shadowfield: focus border-colour: # 930; achtergrond: #fff; kleur: # 5d5d5d; box-shadow: inzet 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: inzet 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-vak-schaduw: inzet 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);

Hoewel de oorspronkelijke stijlen zeer aantrekkelijk zijn, word ik aangetrokken door de overgangseffecten terwijl u zich richt op elk invoerveld. U kunt tussen de tabbladen schakelen en het directe verschil in zoveel eigenschappen zien. De externe gloeiende doosschaduw wordt toegepast samen met een bijgewerkte inzetschaduw. Ook de tekstkleur wordt lichter naarmate u zich op een bepaalde invoer richt en vervaagt vervolgens wanneer u onscherp wordt.

Zelfs kopiëren over een van deze effecten zou de gebruikerservaring van uw formuliervelden aanzienlijk verbeteren. Zorg ervoor dat je niet te ver overboord gaat en je formulieren nauwelijks bruikbaar zijn. De meeste bezoekers zullen echter genieten van de aangename esthetische effecten die ook de interactie en verdere betrokkenheid met uw website bevorderen.

demonstratie

10. Elastische schaduwknoppen

Deze unieke schaduwknoppen zijn gestileerd met een langzame overgang tijdens hover en actieve staten. U kunt vergelijkbare voorbeelden op de Mozilla-startpagina vinden met hun grote “Download Firefox” knop. Sommige van de box-shadow eigenschappen combineren in feite drie verschillende schaduwen in één opdracht.

.blu-btn display: inline-block; -moz-border-radius: .25em; grensradius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.2); achtergrondkleur: # 276195; achtergrondafbeelding: -moz-lineaire gradiënt (# 3c88cc, # 276195); achtergrondafbeelding: -ms-lineaire gradiënt (# 3c88cc, # 276195); achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleurstop (0%, # 3c88cc), kleurstop (100%, # 276195)); achtergrondafbeelding: -webkit-lineair verloop (# 3c88cc, # 276195); achtergrondafbeelding: -o-lineaire gradiënt (# 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)"; achtergrondafbeelding: lineair verloop (# 3c88cc, # 276195); rand: 0; cursor: pointer; kleur: #fff; tekstdecoratie: geen; text-align: center; lettergrootte: 16px; opvulling: 0px 20px; hoogte: 40px; regelhoogte: 40 px; minimale breedte: 100 px; text-shadow: 0 1px 0 rgba (0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-overgang: alle lineaire .2s; -moz-overgang: alle lineaire .2s; -o-overgang: alle lineaire .2s; -ms-overgang: alle lineaire .2s; overgang: alle lineaire .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.3), inzet 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.3), inzet 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.3), inzet 0 12px 20px 2px # 3089d8;  .blu-btn: active -webkit-box-shadow: inzet 0 2px 0 0 rgba (0,0,0,0.2), inzet 0 12px 20px 6px rgba (0,0,0,0.2), inzet 0 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow: inzet 0 2px 0 0 rgba (0,0,0,0.2), inzet 0 12px 20px 6px rgba (0,0,0,0.2), inzet 0 0 2px 2px rgba (0,0, 0,0.3); vakschaduw: inzet 0 2px 0 0 rgba (0,0,0,0.2), inzet 0 12px 20px 6px rgba (0,0,0,0.2), inzet 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-border-radius: .25em; grensradius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.2); achtergrondkleur: # 659324; achtergrondafbeelding: -moz-lineaire gradiënt (# 81bc2e, # 659324); achtergrondafbeelding: -ms-lineaire gradiënt (# 81bc2e, # 659324); achtergrondafbeelding: -webkit-gradiënt (lineair, linksboven, linksonder, kleur-stop (0%, # 81bc2e), kleur-stop (100%, # 659324)); achtergrondafbeelding: -webkit-lineaire gradiënt (# 81bc2e, # 659324); achtergrondafbeelding: -o-lineaire gradiënt (# 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)"; achtergrondafbeelding: lineair verloop (# 81bc2e, # 659324); rand: 0; cursor: pointer; kleur: #fff; tekstdecoratie: geen; text-align: center; lettergrootte: 16px; opvulling: 0px 20px; hoogte: 40px; regelhoogte: 40 px; minimale breedte: 100 px; text-shadow: 0 1px 0 rgba (0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-overgang: alle lineaire .2s; -moz-overgang: alle lineaire .2s; -o-overgang: alle lineaire .2s; -ms-overgang: alle lineaire .2s; overgang: alle lineaire .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0 , 0,3), inzet 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.3), inzet 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inzet 0 -2px 0 0 rgba (0,0,0,0.3), inzet 0 12px 20px 2px # 85ca26;  .grn-btn: active -webkit-box-shadow: inzet 0 2px 0 0 rgba (0,0,0,0.2), inzet 0 12px 20px 6px rgba (0,0,0,0.2), inzet 0 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow: inzet 0 2px 0 0 rgba (0,0,0,0.2), inzet 0 12px 20px 6px rgba (0,0,0,0.2), inzet 0 0 2px 2px rgba (0,0, 0,0.3); vakschaduw: inzet 0 2px 0 0 rgba (0,0,0,0.2), inzet 0 12px 20px 6px rgba (0,0,0,0.2), inzet 0 0 2px 2px rgba (0,0,0,0,3 );

Ik gebruik volledige overgangen gedurende 200 milliseconden bij zwevende en actieve knoptoestanden. Wat zo geweldig is aan deze stijlen is dat je ze kunt toepassen op vrijwel elk klikbaar element. Knoppen, verankeringskoppelingen, formulierelementen of iets anders dat u denkt dat geschikt is - hoewel deze stijlen slechts spaarzaam moeten worden gebruikt om uw ontwerp niet te overbelasten.

Dergelijke knoppen worden vaak het beste bewaard op dezelfde manier als Mozilla ze gebruikt. Koppel deze stijlen aan uw blog, waar u knoppen hebt voor gratis downloads of iets dergelijks. Gebruikers houden van interactie met unieke interfaces en dit vertaalt zich vaak in een veel hoger percentage voor uw klikfrequentie.

demonstratie

Laatste gedachten

Ik hoop dat je enkele geweldige lessen uit deze verzameling doosschaduwtechnieken kunt wegnemen. Er zijn veel verschillende gebieden waarop u zich zou kunnen concentreren, waaronder formulieren, modale vakken, knoppen, werkbalken en zelfs volledige website-indelingen.

Voel je vrij om een van deze schaduweffecten in delen van je eigen website te implementeren. Er zijn tal van andere technieken die er zijn, maar deze collectie is perfect voor zowel beginners als gevorderde ontwikkelaars. Ook als u suggesties of vragen heeft over het artikel dat u met ons kunt delen in het opmerkingendiscussiegedeelte hieronder.