10 Tehnici creative folosind Shadow Box CSS3

Am văzut un număr extraordinar de progrese în dezvoltarea web CSS3 în ultimii ani. Site-urile populare din întreaga lume au început să încorporeze numeroase stiluri unice, cum ar fi colțurile rotunjite și interogările media receptive la dispozitive mobile. Dar chiar mai important, acest lucru a deschis ușa pentru ca interfețele creative să fie prototipate în câteva minute.

În acest articol vreau să împărtășesc 10 fragmente de cod referitoare la designul strălucitor al cutiilor CSS3. Voi explica modul în care funcționează codul și modul în care puteți implementa fiecare umbra de pe cutie în propriul site web.

Aceste stiluri sunt atribuite influenței de proiectare excelente de la alte site-uri populare. Acesta este un exemplu foarte bun pentru modul în care dezvoltatorii web actuali creează tendințe impresionante pentru viitorul designului web.

1. Bara de instrumente fixă de top

Serviciul social social român Trilulilu folosește o bară de instrumente în partea de sus a întregului site web. Acest lucru poate fi creat rapid folosind a pozitie: fixa; proprietăți pe orice element de bara de sus. Dar această umbră cutie suplimentară are efectul la un nivel complet nou.

#banner position: fixed; înălțime: 60px; lățime: 100%; top: 0; stânga: 0; frontieră-sus: 5px solid # a1cb2f; fundal: #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-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z-index: 999999;  #banner h1 linie-înălțime: 60px;

Veți observa că proprietatea shadow box este de fapt configurată cu o combinație de valori destul de simplă. Umbra va cădea sub cutie și se estompează cu 3px pe fiecare parte.

Putem folosi RGBA () metoda de aplicare a ușoară opacitate pe umbra, astfel încât elementul nu pare prea întuneric. Este un plus subtil care va atrage cu siguranță atenția vizitatorului dvs..

Demo

2. Dropdown sub-navigație

Aici este aplicată o altă metodă de umbră cutie de creatie aplicată pe un submeniu drop-down scalar. Un efect similar poate fi văzut pe Antreprenor pe măsură ce treceți peste fiecare din cele mai importante linkuri de navigare principale. Acest lucru este cu siguranță un pic mai dificil de configurat, dar merită răbdarea.

#bar display: block; înălțime: 45px; fundal: # 22385a; padding-top: 5px; margin-bottom: 150px; poziția: relativă;  #bar ul margine: 0px 15px; font-familie: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul ul li fundal: # 22385a; afișare: bloc; font-size: 1.2m; poziția: relativă; plutește la stânga;  #bar ul ul a afișare: bloc; culoare: # fffff7; linia-înălțime: 45px; font-weight: bold; padding: 0px 10px; text-decorare: nici unul; z-index: 9999;  #bar ul li: hover, #bar ul li a selectat culoare: # 365977; fundal: #fff; raza de pe raza de sus-stanga: 3 pixeli; raza de sus-dreapta-dreapta: 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: bloc; stânga: 14px; top: 48px; z-index: -1; lățime: 500px; poziția: absolută; înălțime: 90px; frontieră: 1px solid # edf0f3; vârf de frontieră: 0; umplutură: 10px 0 10px 10px; overflow: ascuns; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; raza de jos-dreapta-dreapta: 3px; raza de jos-dreapta-dreapta: 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-filtru: "progid: DXImageTransform.Microsoft.Shadow (Forță = 3, Direcție = 180, Culoare =" # 333333 ")"; filtru: progid: DXImageTransform.Microsoft.Shadow (Forța = 3, Direcție = 180, Culoare = "# 333333");

Linkurile nav pot fi redate pentru a schimba culoarea atunci când sunt selectate sau cu mouse-ul. Adăugăm, de asemenea, niște granițe rotunjite pe legături și în caseta cu meniu derulantă. Acest lucru oferă o senzație mai frumoasă, mai degrabă decât margini dure peste tot. De asemenea, folosesc bine -ms-filtru și filtru proprietăți care sunt exclusiv protejate de Internet Explorer.

Dacă configurați un sistem complet de navigare, veți putea modifica setul de afișare la nici unul și ascundeți meniul după încărcarea paginii. Apoi, folosind anumite jQuery, puteți viza evenimentul .hover () și afișa bara de subnav cu conținut actualizat.

Demo

3. Buton de umbra lucioasă

Aceasta este probabil una dintre stilurile mele preferate de a crea doar din cauza modului în care aceasta apare pe pagină. Dacă nu puteți spune, acesta este butonul albastru mic găsit pe pagina principală a YouTube după ce v-ați conectat pentru prima oară.

blues culoare: #fff; lățime: 190px; înălțime: 35px; cursor: pointer; font-familie: Arial, Tahoma, sans-serif; font-size: 1.0; font-weight: bold; -moz-border-radius: 2px; -webkit-border-radius: 2px; raza de graniță: 2 pixeli; lățimea frontală: 1px; culoare frontală: # 0053a6 # 0053a6 # 000; fundal-culoare: # 6891e7; fundal-imagine: -moz-linear-gradient (sus, # 4495e7 0, # 0053a6 100%); fundal-imagine: -ms-linear-gradient (sus, # 4495e7 0, # 0053a6 100%); fundal-imagine: -o-linear-gradient (top, # 4495e7 0, # 0053a6 100%); fundal-imagine: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0, # 4495e7), stop color (100%, # 0053a6)); fundal-imagine: -webkit-gradient linear (top, # 4495e7 0, # 0053a6 100%); fundal-imagine: gradient linear (la fund, # 4495e7 0, # 0053a6 100%); text-shadow: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: inserție 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); filtru: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover limita-culoare: # 002d59 # 002d59 # 000; -moz-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); filtru: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); fundal-imagine: -moz-linear-gradient (top, # 3a8cdf 0, # 0053a6 100%); fundal-imagine: -ms-linear-gradient (top, # 3a8cdf 0, # 0053a6 100%); fundal-imagine: -o-linear-gradient (top, # 3a8cdf 0, # 0053a6 100%); fundal-imagine: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0, # 3a8cdf), oprire color (100%, # 0053a6)); fundal-imagine: -webkit-gradient linear (top, # 3a8cdf 0, # 0053a6 100%); fundal-imagine: gradient linear (la fund, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: inserție 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -ms-box-shadow: inserție 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -webkit-box-shadow: inserție 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; box-shadow: inset 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; filtru: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); fundal-imagine: -moz-linear-gradient (top, # 005ab4 0, # 175ea6 100%); fundal-imagine: -ms-linear-gradient (top, # 005ab4 0, # 175ea6 100%); fundal-imagine: -o-gradient linear (top, # 005ab4 0, # 175ea6 100%); fundal-imagine: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0, # 005ab4), oprire color (100%, # 175ea6)); fundal-imagine: -webkit-gradient liniar (top, # 005ab4 0, # 175ea6 100%); fundal-imagine: gradient linear (la fund, # 005ab4 0, # 175ea6 100%);

Întregul cod de buton este o mulțime de a privi, dar încercăm pentru a sprijini cât mai multe browsere posibil. Există umbre de text și umbre de cutie cu suport însoțitor pentru MS Internet Explorer 7+. De asemenea, punem la dispoziție imagine de fundal proprietate cu gradienți CSS3 pe un număr mare de prefixe specifice vânzătorului.

Dar dacă vă place acest stil de design, atunci hover și state active vă vor atrage atenția. În principal, actualizăm frontiera pentru a include unele umbre înăuntru când împingeți în jos, în timp ce actualizați gradientul de fundal pentru a vă arăta un pic mai întunecat.

Deoarece nu există imagini pe buton, puteți să actualizați valorile hex și să transformați acest lucru într-o combinație practic în orice schemă de culori.

Demo

4. Notificări Flyout Menu

Eu nu sunt un utilizator mare de Facebook, dar am observat unele tehnici UI de la redesign-urile lor. Acest meniu derulant poate fi comparat cu notificările sau cu popupurile de solicitări de prieteni găsite pe pagina principală.

.flyout width: 310px; margin-top: 10px; font-size: 11px; poziția: relativă; font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; fundal-culoare: alb; padding: 9px 11px; fundal: rgba (255, 255, 255, 0,9); frontieră: 1px solid # 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; raza de graniță: 3px;  .flyout #tip imagine-imagine: url ('images / tip.png'); fundal-repet: nu-repeta; dimensiune de fundal: auto; înălțime: 11px; poziția: absolută; top: -11px; stânga: 25px; lățime: 20px;  .flyout h2 text-transform: majusculă; culoare: # 666; font-size: 1.2m; padding-bottom: 5px; margin-bottom: 12px; frontieră-fund: 1px solid #dcdbda; . fluture p padding-bottom: 25px; font-size: 1.1; culoare: # 222;

Nu există o mulțime de coduri noi de înclinare a minții care să fie afișate aici. Eu folosesc un mic .bacsis clasa cu un element de span intern pentru a adăuga triunghiul tooltip. Este posibil să creați triunghiuri pure CSS3, dar această metodă nu este ușor, așa cum vă puteți imagina. Dacă preferați această metodă, este posibil să meritați să faceți ceva împreună. Dar proprietățile de rotație CSS3 nu sunt acceptate pretutindeni; între timp, imaginile nu necesită nici o metodă de rezervă.

Demo

5. Wrapper de pagină Apple

Există atât de multe umbre impresionante de cutie CSS3 pe care le puteți găsi pe site-ul oficial Apple. Acest exemplu de mai jos este un recipient cu cutie mică, cu câteva deschideri ale coloanelor. Când te uiți peste layout-ul Apple vei observa multe din paginile sale, alcătuite din numeroase cutii de ambalaj.

.applewrap lățime: 100%; afișare: bloc; înălțime: 150px; fundal: alb; frontieră: 1px solid; culoarea frontală: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; raza de graniță: 4 pixeli; -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; dimensiunea cutiei: caseta de margine; lățime: 250px; înălțime: 150px; umplutura: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; culoare: # 343434; frontieră-dreapta: 1px solid #dadada;

Puteți crea o pagină similară împărțită în cutii de conținut de diferite lățimi și înălțimi. Deși am pus câteva coloane în acest demo, nu este o tehnică necesară de formatare prin nici un mijloc. Umbra cutiei se va potrivi cel mai bine pe un fundal alb / gri. Dar cred că afișarea peste orice culoare deschisă ar arăta destul de bine.

Demo

6. Cutia de conținut Apple

Acest alt stil de casetă de conținut de pe site-ul Apple este folosit în cea mai mare parte pentru desenele de coloane. Acestea sunt în primul rând în partea de jos a paginii prezentând tranzacții și alte informații conexe. Este un stil de design cu totul diferit, cu umbra cutiei afișând înăuntru de sus în jos.

.carcasă width: auto; înălțime: 85px; dimensiunea cutiei: caseta de margine; fundal: # f5f5f5; zăpadă: 20px 20px 10px; margine: 10px 0 20px; frontieră: 1px solid #ccc; raza de graniță: 4 pixeli; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: inserție 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: inserție 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: inserție 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col lățime: 140px; plutește la stânga; margine: 0 0 0 30px;

Nu cred că acest cod ar trebui să fie prea greu de urmat și să copiați pe un alt container div. Singura umbra pe care o aplicăm este folosirea medalion cu codurile de culoare rgba alfa-transparente. Deși, deși avem umbra picăturii setată la negru pur, afișăm doar o opacitate de 30%.

Demo

7. Link-uri recomandate

Acesta este probabil stilul meu preferat de shadow box de pe site-ul curent al Apple. Ar trebui să găsești un stil live demo al acestei tehnici pe pagina iCloud cu o serie de cutii de legătură plutitoare.

.applefeature înălțime: 150px; margine: 8px; vertical-aliniere: partea de sus; afișare: inline-block;  .applefeature a display: bloc; lățime: 168px; înălțime: 140px; frontieră: 1px solid #ccc; culoare: # 333; text-decorare: nici unul; font-weight: bold; linia-înălțime: 1.3m; fundal: # f7f7f7; -webkit-box-shadow: inserție 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: inserție 0 1px 2px rgba (0, 0, 0, .3); box-shadow: inserție 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; raza de graniță: 4 pixeli;  .applefeature a: hover fundal: #fafafa; fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (#fff), până la (# f7f7f7)); fundal: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: inserție 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: inserție 0 1px 2px rgba (0,0,0, .3); box-shadow: inserție 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; raza de graniță: 4 pixeli;  .applefeature a img display: bloc; margine: 26 pixeli automat 4 pixeli;  .applefeature un h4 display: block; lățime: 160px; font-size: 1.3; font-familie: Arial, Tahoma, sans-serif; culoare: # 646464; text-align: centru;

Aceste linkuri recomandate sunt setate la o lățime fixă și includ o pictogramă distinctă și un text afișat. Exemplul Apple folosește o umbră asemănătoare cu cea a cutiei, așa cum am văzut în caseta de conținut anterioară. in orice caz întreaga cutie poate fi acum activată ca o legătură care include atât :planare și :activ state. Există o mulțime de flexibilitate cu această casetă de legătură și ar trebui să încercați să jucați cu codul sursă.

Este posibil să scurtați înălțimea / lățimea și să creați o listă mult mai mică de linkuri. Acestea ar putea fi un set de capitole sau pagini dintr-un articol sau puteți face un submeniu limitat cu pictograme de legături. Este un set cinstit de tehnici CSS3 mai noi care demonstrează cât de multă putere aveți ca designer web.

Demo

8. Imaginile încadrate

Am adăugat un fundal gri pe acest exemplu, astfel încât să puteți vedea stilurile de umbră ale cutiilor mai clar. Această casetă este similară cu imaginile de previzualizare prezentate pe wordpress.com, cu excepția faptului că am adăugat un adânc mai mult codului sursă.

.wpframe background: #fff; raza de graniță: 2 pixeli; -webkit-border-radius: 2px; -moz-border-radius: 2px; padding: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;

Având în vedere că imaginile sunt date cu o mică căptușeală pe fiecare parte, acest cadru apare ca o margine albă mare. Puteți să actualizați întotdeauna culoarea de fundal sau chiar să adăugați un mic margine externă pentru a separa imaginea de fundal. Dar acest set destul de simplist de stiluri poate fi manevrat în diferite tehnici de umbră cutie. Redați-vă codul și vedeți cum puteți îmbunătăți imaginile pe site-ul dvs..

Demo

9. Câmpuri de intrare strălucitoare

Am primit această idee după ce am vizitat pagina de conectare Pinterest de câteva ori. Stilurile lor animate afișează cu adevărat câteva exemple elocvente de umbre multiple în cutie, atât în exterior, cât și în inset.

.formular display: bloc; margin-bottom: 15px; . etichetă de ambalaj display: inline-block; lățime: 80px; font-size: 11px; font-weight: bold; culoare: # 444; font-familie: Arial, Tahoma, sans-serif;  .format .shadowfield position: relative; lățime: 250px; font-size: 17px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: normal; fundal: # f7f8f8; culoare: # 7c7c7c; înălțimea liniei: 1,4; padding: 6px 12px; contur: nici unul; tranziție: toate 0,2 secunde ușoare în 0; -webkit-transition: toate 0.2s ușurință în out 0s; -moz-transition: toate 0.2s ușurință în out 0s; frontieră: 1px solid # ad9c9c; raza de graniță: 6px 6px 6px 6px; box-shadow: 0 1 pixel rgba (34, 25, 25, 0.2) inset, 0 1px #fff;  .furnizare formular .shadowfield: focalizare border-color: # 930; fundal: #fff; culoare: # 5d5d5d; 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); -moz-box-shadow: inserție 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82; -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);

Deși stilurile inițiale sunt foarte atractive, am atras atenția efecte de tranziție pe măsură ce vă concentrați pe fiecare câmp de intrare. Aveți posibilitatea să faceți o filă între ele și să vedeți diferența imediată în atât de multe proprietăți. Umbra cutie strălucitoare externă este aplicată împreună cu o umbră de inserție actualizată. De asemenea culoarea textului devine mai ușoară pe măsură ce vă concentrați asupra unei anumite intrări, apoi se estompează pe măsură ce defocalizați.

Chiar și copierea peste unul dintre aceste efecte ar îmbunătăți foarte mult experiența utilizatorilor din câmpurile formularului. Asigurați-vă că nu vă deplasați prea departe până la punctul în care formele dvs. sunt abia utilizabile. Cu toate acestea, majoritatea vizitatorilor se vor bucura de efectele estetice plăcute care încurajează, de asemenea, interacțiunea și implicarea în continuare cu site-ul dvs. Web.

Demo

10. Butoane elastice Shadow

Aceste butoane umbrite unice sunt decorate cu o tranziție lentă în timpul stării de hover și a stărilor active. Puteți găsi exemple similare pe pagina de pornire a site-ului Mozilla cu ajutorul aplicației lor mari “Descărcați Firefox” buton. Unele dintre box-shadow proprietățile combină efectiv trei umbre diferite într-o singură comandă.

.blu-btn display: inline-block; -moz-border-radius: .25em; raza de frontieră: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); fundal-culoare: # 276195; fundal-imagine: -moz-linear-gradient (# 3c88cc, # 276195); fundal-imagine: -ms-linear-gradient (# 3c88cc, # 276195); fundal-imagine: -webkit-gradient (liniar, stânga sus, jos stânga, oprire color (0%, # 3c88cc), oprire color (100%, # 276195)); fundal-imagine: -webkit-gradient linear (# 3c88cc, # 276195); fundal-imagine: -o-linear-gradient (# 3c88cc, # 276195); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; fundal-imagine: gradient linear (# 3c88cc, # 276195); frontieră: 0; cursor: pointer; culoare: #fff; text-decorare: nici unul; text-align: centru; font-size: 16px; padding: 0px 20px; înălțime: 40px; linia-înălțime: 40px; min-lățime: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-familie: Arial, Tahoma, sans-serif; -webkit-transition: toate liniile .2s; -moz-tranziție: toate liniile .2s; -o-tranziție: toate liniile .2s; -ms-tranziție: toate liniile .2s; tranziție: toate liniile .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,3), inset 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,3), inset 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,3), inset 0 12px 20px 2px # 3089d8;  .blu-btn: activă -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), inset 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), inset 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), inset 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0,0,0,3) );  .grn-btn display: inline-block; -moz-border-radius: .25em; raza de frontieră: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); fundal-culoare: # 659324; fundal-imagine: -moz-linear-gradient (# 81bc2e, # 659324); fundal-imagine: -ms-linear-gradient (# 81bc2e, # 659324); fundal-imagine: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0%, # 81bc2e), stop color (100%, # 659324)); fundal-imagine: -webkit-linear-gradient (# 81bc2e, # 659324); fundal-imagine: -o-linear-gradient (# 81bc2e, # 659324); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; fundal-imagine: gradient linear (# 81bc2e, # 659324); frontieră: 0; cursor: pointer; culoare: #fff; text-decorare: nici unul; text-align: centru; font-size: 16px; padding: 0px 20px; înălțime: 40px; linia-înălțime: 40px; min-lățime: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-familie: Arial, Tahoma, sans-serif; -webkit-transition: toate liniile .2s; -moz-tranziție: toate liniile .2s; -o-tranziție: toate liniile .2s; -ms-tranziție: toate liniile .2s; tranziție: toate liniile .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba , 0,3), inset 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,3), inset 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,3), inset 0 12px 20px 2px # 85ca26;  .grn-btn: activă -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), inset 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), inset 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), inset 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0,0,0,3) );

Folosesc tranziții complete pentru 200 de milisecunde pe stările cu butonul activ și cu butonul activ. Ce este atât de grozav despre aceste stiluri este că le puteți aplica aproape oricăror elemente pe care să le poți da clic. Butoanele, legăturile de ancorare, elementele de formă sau orice altceva care credeți că este potrivit - deși aceste stiluri ar trebui folosite cu ușurință pentru a nu supraîncărca designul.

Butoanele ca acestea sunt adesea salvate cel mai bine în același mod în care Mozilla le folosește. Atașați aceste stiluri în blogul dvs. unde aveți butoane pentru descărcări gratuite sau ceva similar. Utilizatorii iubesc să interacționeze cu interfețe unice iar acest lucru se traduce adesea într-un procent mult mai mare pentru evaluarea dvs. prin clicuri.

Demo

Gândurile finale

Sper că puteți să luați câteva lecții minunate din această colecție de tehnici de umbră cutie. Există multe domenii diferite pe care le puteți concentra pe includerea formularelor, cutiilor modale, butoanelor, barelor de instrumente și chiar și aranjamentelor complete ale site-urilor web.

Simțiți-vă liber să implementați oricare dintre aceste efecte de umbră în porțiuni ale propriului dvs. site web. Există o mulțime de alte tehnici acolo, dar această colecție este perfectă atât pentru începători, cât și pentru dezvoltatori avansați. De asemenea, dacă aveți sugestii sau întrebări cu privire la articol, puteți să ne distribuiți în zona de discuții a comentariilor de mai jos.