10 radošas metodes, izmantojot CSS3 Box Shadow

Pēdējos gados mēs esam pieredzējuši milzīgu progresu CSS3 tīmekļa izstrādē. Populārās tīmekļa vietnes visā internetā ir sākušās ar daudziem unikāliem stiliem, piemēram, noapaļotiem stūriem un mobilajiem tālruņiem. Bet vēl svarīgāk tas ir pavēris durvis, lai radošās saskarnes tiktu prototipētas dažu minūšu laikā.

Šajā rakstā es vēlos dalīties 10 koda fragmenti saistībā ar izciliem CSS3 kastes ēnu dizainiem. Es paskaidrošu, kā darbojas kods, un kā jūs varat īstenot katru kastes ēnu savā tīmekļa vietnē.

Šie stili ir saistīti ar lielisku dizaina ietekmi no citām populārām tīmekļa vietnēm. Tas ir lielisks piemērs tam, kā pašreizējie tīmekļa izstrādātāji veido ietekmīgas tendences web dizaina nākotnei.

1. Fiksētā Top rīkjosla

Rumānijas sociālo mediju pakalpojums Trilulilu izmanto peldošo augšējo rīkjoslu visā to tīmekļa vietnē. To var ātri izveidot, izmantojot a pozīcija: fiksēts; īpašums jebkurā augšējā joslas elementā. Bet šī papildu kaste ēna ņem efektu pilnīgi jaunā līmenī.

#banner pozīcija: fiksēts; augstums: 60px; platums: 100%; tops: 0; pa kreisi: 0; border-top: 5px ciets # a1cb2f; fons: #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); kastes ēna: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-indekss: 999999;  #banner h1 līnijas augstums: 60px;  

Jūs pamanīsiet, ka kastes ēna ir faktiski izveidota ar diezgan vienkāršu vērtību kombināciju. Ēna samazināsies zem kastes, un abās pusēs izplūdīs 3px.

Mēs varam izmantot rgba () metode nelielai dūmainībai uz ēnas, tāpēc elements nešķiet pārāk tumšs. Tas ir smalks papildinājums, kas noteikti piesaistīs jūsu apmeklētāja uzmanību.

• Demo

2. Sub-navigācijas nolaišanās

Šeit ir vēl viena radošās kastes ēnu metode, kas tiek izmantota skalāra nolaižamajā apakšizvēlnē. Līdzīgu efektu var redzēt arī uzņēmējam, kad jūs virzīsieties pāri katrai no galvenajām galvenajām navigācijas saitēm. Tas noteikti ir nedaudz sarežģītāk konfigurēt, bet ir vērts pacietību.

#bar displejs: bloks; augstums: 45px; fons: # 22385a; polsterējums: 5px; margas apakšā: 150px; pozīcija: relatīvais;  #bar ul starpība: 0px 15px; fontu saime: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serifs;  #bar ul li fons: # 22385a; displejs: bloks; fonta lielums: 1.2em; pozīcija: relatīvais; peldēt: pa kreisi;  #bar ul li a displejs: bloks; krāsa: # fffff7; līnijas augstums: 45px; font-weight: bold; polsterējums: 0px 10px; teksta apdare: nav; z-indekss: 9999;  #bar ul li a: hover, #bar ul li a.selected krāsa: # 365977; fons: #fff; augšējais kreisais rādiuss: 3px; augšējais labais rādiuss: 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 displejs: bloks; pa kreisi: 14px; tops: 48px; z-indekss: -1; platums: 500px; pozīcija: absolūta; augstums: 90px; robeža: 1px cietais # edf0f3; robeža: 0; polsterējums: 10px 0 10px 10px; pārplūde: slēpta; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-robežu apakšējā kreisā rādiuss: 3px; -webkit-robežu apakšējā labajā stūrī: 3px; robežu-apakšējo labo rādiusu: 3px; robežu-apakšējo labo rādiusu: 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); kastes ēna: 0px 2px 7px rgba (0,0,0,0,25); -ms-filtrs: "progid: DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color =" # 333333 ")"; filtrs: progid: DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color = "# 333333");  

Nav saites var veidot, lai izvēlētos krāsu vai peles lidojumu. Es arī pievienoju dažas noapaļotas robežas uz saitēm un uz nolaižamās izvēlnes lodziņa. Tas dod patīkamāku sajūtu, nevis cietas malas. Es arī labi izmantoju -ms-filtrs un filtru īpašībām, kas pieder tikai Internet Explorer.

Ja iestatāt pilnu navigācijas sistēmu, varēsiet mainīt displeju uz nevienu un paslēpt izvēlni, kad lapa ir ielādēta. Pēc tam, izmantojot kādu no jQuery, jūs varat atlasīt notikumu .hover () notikumu un rādīt subnav joslu ar atjauninātu saturu.

• Demo

3. Spīdīga ēnu poga

Tas, iespējams, ir viens no maniem iecienītākajiem stiliem tikai tāpēc, ka lapā parādās dinamika. Ja nevarat pateikt, šī ir maza zila poga, kas atrodama YouTube sākumlapā pēc pirmās pieteikšanās.

blūza krāsa: #fff; platums: 190px; augstums: 35px; kursors: rādītājs; font-family: Arial, Tahoma, sans-serif; fonta lielums: 1.0em; font-weight: bold; -moz-border-rādiuss: 2px; -webkit-robežu rādiuss: 2px; robežu rādiuss: 2px; robežu platums: 1px; rāmja krāsa: # 0053a6 # 0053a6 # 000; fona krāsa: # 6891e7; fona attēls: -moz-lineārs gradients (augšā, # 4495e7 0, # 0053a6 100%); fona attēls: -ms-lineārs gradients (augšā, # 4495e7 0, # 0053a6 100%); fona attēls: -o-lineārs gradients (augšā, # 4495e7 0, # 0053a6 100%); fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0, # 4495e7), krāsu apstāšanās (100%, # 0053a6)); fona attēls: -webkit-lineārs gradients (augšā, # 4495e7 0, # 0053a6 100%); fona attēls: lineārs gradients (uz leju, # 4495e7 0, # 0053a6 100%); teksta ēna: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: ielikt 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: ielikt 0 1px 0 rgba (256, 256, 256, 35); -webkit-box-shadow: ielikt 0 1px 0 rgba (256, 256, 256, 35); box-shadow: ielikt 0 1px 0 rgba (256, 256, 256, .35); filtrs: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: ielikt 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); -ms-box-shadow: ielikt 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); -webkit-box-shadow: ielikt 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); box-shadow: ielikt 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 25); filtrs: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); fona attēls: -moz-lineārs gradients (augšā, # 3a8cdf 0, # 0053a6 100%); fona attēls: -ms-lineārs gradients (augšā, # 3a8cdf 0, # 0053a6 100%); fona attēls: -o-lineārs gradients (augšā, # 3a8cdf 0, # 0053a6 100%); fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0, # 3a8cdf), krāsu apstāšanās (100%, # 0053a6)); fona attēls: -webkit-lineārs gradients (augšā, # 3a8cdf 0, # 0053a6 100%); fona attēls: lineārs gradients (uz leju, # 3a8cdf 0, # 0053a6 100%);  .blues: aktīvā border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: ieliktnis 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #ff; -ms-box-shadow: ieliktnis 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #ff; -webkit-box-shadow: ieliktnis 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #ff; box-shadow: ieliktnis 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #ff; filtrs: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); fona attēls: -moz-lineārs gradients (augšā, # 005ab4 0, # 175ea6 100%); fona attēls: -ms-lineārs gradients (augšā, # 005ab4 0, # 175ea6 100%); fona attēls: -o-lineārs gradients (augšā, # 005ab4 0, # 175ea6 100%); fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0, # 005ab4), krāsu apstāšanās (100%, # 175ea6)); fona attēls: -webkit-lineārs gradients (augšā, # 005ab4 0, # 175ea6 100%); fona attēls: lineārs gradients (uz leju, # 005ab4 0, # 175ea6 100%);  

Viss pogas kods ir daudz ko apskatīt, bet mēs cenšamies atbalstīt pēc iespējas vairāk pārlūkprogrammu. MS Internet Explorer 7+ ir pieejamas teksta ēnas un kastes ēnas. Arī mēs iestatām fona attēls īpašums ar CSS3 gradientiem plašā piegādātāja specifisko prefiksu skaitā.

Bet, ja jums patīk šis dizaina stils, tad Hover un aktīvās valstis arī nozvejas jūsu uzmanību. Mēs būtībā atjauninām robežu, lai jūs, piespiežot uz leju, iekļautu dažas ēnas, atjauninot fona gradientu, lai parādītu nedaudz tumšāku.

Tā kā uz pogas nav neviena attēla, jūs varat atjaunināt hex vērtības un morph to, lai saplūstu praktiski jebkuru krāsu shēmu.

• Demo

4. Paziņojumi Flyout Menu

Es neesmu liels Facebook lietotājs, bet es esmu ievērojis dažus UI paņēmienus no to pārveidošanas. Šo lidojumu izvēlni var salīdzināt ar jūsu paziņojumiem vai drauga pieprasījumiem, kas atrodami mājaslapā.

.skrejceļš platums: 310px; margin-top: 10px; fonta lielums: 11px; pozīcija: relatīvais; font-family: “Lucida Grande”, Tahoma, Verdana, Arial, sans-serifs; fona krāsa: balta; polsterējums: 9px 11px; fons: rgba (255, 255, 255, 0,9); robeža: 1px cietais # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, 25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, 25); kastes ēna: 0 3px 8px rgba (0, 0, 0, 25); -webkit-robežu rādiuss: 3px; -moz-border-rādiuss: 3px; robežu rādiuss: 3px;  .flyout #tip fona attēls: url ('images / tip.png'); fona atkārtošana: nav atkārtota; fona izmērs: auto; augstums: 11px; pozīcija: absolūta; tops: -11px; pa kreisi: 25px; platums: 20px;  .flyout h2 text-transform: lielie burti; krāsa: # 666; fonta lielums: 1.2em; polsterējums-apakšā: 5px; margas apakšējā daļa: 12px; robežu apakšā: 1px cietais #dcdbda;  .flyout p polsterējums-apakšā: 25px; fonta lielums: 1.1em; krāsa: # 222;  

Šeit nav daudz jaunu domāšanas un locīšanas kodu. Es izmantoju mazu .gals klase ar iekšējo span elementu, lai pievienotu rīku padeves trijstūri. Ir iespējams izveidot tīras CSS3 trīsstūri, bet šī metode nav vienkārša, kā jūs varat iedomāties. Ja vēlaties izmantot šo metodi, var būt vērts kaut ko noķert kopā. Bet CSS3 rotācijas īpašības netiek atbalstītas visur; tikmēr attēliem nav nepieciešama rezerves metode.

• Demo

5. Apple lapas iesaiņotājs

Ir tik daudz iespaidīgu CSS3 kastes ēnu, kuras var atrast Apple oficiālajā tīmekļa vietnē. Šis piemērs ir mazs kastes konteiners ar dažām kolonnām. Aplūkojot Apple izkārtojumu, jūs pamanīsiet daudzas to lapas, kas sastāv no daudzām iesaiņojuma kastēm.

.applewrap platums: 100%; displejs: bloks; augstums: 150px; fons: balts; robeža: 1px ciets; rāmja krāsa: # e5e5e5 #dbdbdb # d2d2d2; -webkit-robežu rādiuss: 4px; -moz-border-rādiuss: 4px; robežu rādiuss: 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; kastes ēna: rgba (0, 0, 0, 0,3) 0 1px 3px;  .applewrap .col float: pa kreisi; kastes izmēri: robežkaste; platums: 250 pikseļi; augstums: 150px; polsterējums: 16px 7px 6px 22px; fonts: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serifs; krāsa: # 343434; labajā pusē: 1px ciets #dadada;  

Jūs varētu salikt līdzīgu lapu, kas sadalīta pa dažādiem platuma un augstuma satura lodziņiem. Lai gan šajā demonstrācijā esmu ievietojis dažas kolonnas, tas nekādā veidā nav nepieciešams formatēšanas paņēmiens. Kastes ēna vislabāk atbilst baltajam / pelēkajam fonam. Bet es domāju, ka attēlošana virs jebkuras gaismas krāsas izskatās diezgan laba.

• Demo

6. Apple satura lodziņš

Šis cits satura stila lodziņš Apple vietnē tiek izmantots galvenokārt kolonnu dizainā. Tie galvenokārt ir lapas apakšdaļā, kas parāda darījumus un citu saistītu informāciju. Tas ir pilnīgi atšķirīgs dizaina stils ar kastes ēnu, kas redzama iekšpusē no augšas uz leju.

.applebox platums: auto; augstums: 85px; kastes izmēri: robežkaste; fons: # f5f5f5; polsterējums: 20px 20px 10px; starpība: 10px 0 20px; robeža: 1px cietais #ccc; robežu rādiuss: 4px; -webkit-robežu rādiuss: 4px; -moz-border-rādiuss: 4px; -o-robežu rādiuss: 4px; -webkit-box-shadow: ielikt 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: ieliktnis 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: ieliktnis 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col platums: 140px; peldēt: pa kreisi; starpība: 0 0 0 30px;  

Es nedomāju, ka šim kodam ir jābūt pārāk sarežģītam, lai to varētu sekot un kopēt uz citu div konteineru. Tikai lietojamā kastes ēna izmanto ieliktnis ar rgba alfa caurspīdīgiem krāsu kodiem. Tātad, lai gan mums ir pilna ēna, kas ir tīra melnā krāsā, mēs redzam tikai aptuveni 30% necaurredzamību.

• Demo

7. Ieteicamās saites

Iespējams, tas ir manas iecienītākās kastes ēnu stils no Apple pašreizējās tīmekļa vietnes. ICloud lapā ir jāatrod šīs tehnikas tiešraides demonstrācijas stils ar virkni peldošu saišu kastes.

.applefeature augstums: 150px; starpība: 8px; vertikāli līdzīgs: augšā; displejs: inline-bloks;  .applefeature a displejs: bloks; platums: 168px; augstums: 140px; robeža: 1px cietais #ccc; krāsa: # 333; teksta apdare: nav; font-weight: bold; līnijas augstums: 1.3em; fons: # f7f7f7; -webkit-box-shadow: ielikt 0 1px 2x x rgba (0, 0, 0, .3); -moz-box-shadow: ieliktnis 0 1px 2px rgba (0, 0, 0, .3); box-shadow: ieliktnis 0 1px 2px rgba (0, 0, 0, .3); -webkit-robežu rādiuss: 4px; -moz-border-rādiuss: 4px; robežu rādiuss: 4px;  .applefeature a: lidināties fons: #fafafa; fons: -webkit-gradients (lineārs, 0% 0%, 0% 100%, no (#fff) līdz (# f7f7f7)); fons: -moz-lineārais gradients (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: ielikt 0 1px 2x x rgba (0,0,0, .3); -moz-box-shadow: ieliktnis 0 1px 2px rgba (0,0,0, .3); box-shadow: ieliktnis 0 1px 2px rgba (0,0,0, .3); -webkit-robežu rādiuss: 4px; -moz-border-rādiuss: 4px; robežu rādiuss: 4px;  .applefeature a img displejs: bloks; starpība: 26px auto 4px;  .applefeature a h4 displejs: bloks; platums: 160px; fonta lielums: 1.3em; font-family: Arial, Tahoma, sans-serif; krāsa: # 646464; teksta saskaņošana: centrs;  

Šīs redzamās saites ir iestatītas uz fiksētu platumu un ietver atšķirīgu ikonu un displeja tekstu. Apple piemērs izmanto līdzīgu kastes ēnu, kā mēs redzējām iepriekšējā satura lodziņā. Tomēr tagad visu lodziņu var aktivizēt kā saiti kas ietver gan : lidināties un : aktīvs valstīm. Ar šo saiti ir daudz elastības, un jums vajadzētu mēģināt spēlēt apkārt ar pirmkodu.

Ir iespējams saīsināt augstumu / platumu un izveidot daudz mazāku saišu sarakstu. Tie varētu būt rakstu nodaļu vai lapu kopums, vai arī jūs varat izveidot apakšizvēlni ar saiknes ikonām. Tas ir godīgi liels jaunāku CSS3 metožu kopums, kas parāda, cik daudz enerģijas jums ir kā web dizainers.

• Demo

8. Ierāmēti attēli

Šajā piemērā esmu pievienojis pelēku fonu, lai skaidrāk varētu redzēt kastes ēnu stilu. Šis lodziņš ir līdzīgs redzamajiem priekšskatījuma kadriem WordPress.com, izņemot, ja es esmu pievienojis mazliet vairāk dziļuma avota kodam.

.wpframe fons: #fff; robežu rādiuss: 2px; -webkit-robežu rādiuss: 2px; -moz-border-rādiuss: 2px; polsterējums: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; kastes ēna: 1px 2px 1px # d1d1d1;  

Tā kā attēliem tiek piešķirts neliels polsterējums uz abām pusēm, šis rāmis parādās kā liels balts apmērs. Jūs vienmēr varat atjaunināt fona krāsu vai pat pievienot nelielu ārējo apmali, lai atdalītu attēlu no fona. Bet šo diezgan vienkāršoto stilu kopumu var manevrēt dažādās kastes ēnu metodēs. Atskaņojiet kodu un skatiet, kā jūs varat uzlabot attēlu dizainu savā tīmekļa vietnē.

• Demo

9. Kvēlojošs ievades lauks

Šo ideju pēc pāris reizēm apmeklēju Pinterest pieteikšanās lapu. Viņu animētie stili patiešām parāda dažus izteiksmīgus vairāku inline kastes ēnu piemērus, gan ārpus tām, gan ieliktņiem.

.formwrap display: block; margas apakšējā daļa: 15px;  .formformāta etiķete display: inline-block; platums: 80px; fonta lielums: 11px; font-weight: bold; krāsa: # 444; font-family: Arial, Tahoma, sans-serif;  .formwrap .shadowfield pozīcija: relatīvais; platums: 250 pikseļi; fonta lielums: 17px; font-family: "Helvetica Neue", Arial, sans-serifs; fontu svars: normāls; fons: # f7f8f8; krāsa: # 7c7c7c; līnijas augstums: 1.4; polsterējums: 6px 12px; izklāsts: nav; pāreja: visi 0.2s viegluma izejas 0s; -webkit-pāreja: visi 0.2s-in-out-0s; -moz-pāreja: visi 0.2s viegluma izejas 0s; robeža: 1px cietais # ad9c9c; robežu rādiuss: 6px 6px 6px 6px; kastes ēna: 0 1px rgba (34, 25, 25, 0,2) ieliktnis, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; fons: #fff; krāsa: # 5d5d5d; kastes ēna: ielikt 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5); -moz-box-shadow: ielikt 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5); -webkit-box-shadow: ielikt 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5);  

Lai gan sākotnējie stili ir ļoti pievilcīgi, es esmu piesaistīts pārejas efektus, koncentrējoties uz katru ievades lauku. Jūs varat cilni starp tām un redzēt tūlītēju atšķirību tik daudzām īpašībām. Ārējā kvēlojošā kaste ēna tiek izmantota kopā ar atjauninātu ieliktņa ēnu. Arī Teksta krāsa kļūst gaišāka, kad jūs esat fokusējies uz konkrētu ieeju, tad izzūd, kad jūs fokusējat.

Pat kopēšana vairāk nekā vienā no šiem efektiem ievērojami uzlabotu veidlapu lauku lietotāju pieredzi. Pārliecinieties, ka jums nav pārāk tālu pār bortu līdz vietai, kur jūsu veidlapas ir tikko lietojamas. Tomēr lielākā daļa apmeklētāju baudīs patīkamu estētisko efektu, kas arī veicina mijiedarbību un turpmāku iesaistīšanos jūsu mājas lapā.

• Demo

10. Elastīgās ēnu pogas

Šīs unikālās ēnu pogas ir veidotas ar lēnu pāreju lidojuma un aktīvo valstu laikā. Līdzīgus piemērus var atrast Mozilla mājaslapā ar savu lielo “Lejupielādēt Firefox” poga. Daži no kastes ēna īpašības faktiski apvieno trīs dažādas ēnas vienā komandā.

.blu-btn display: inline-block; -moz-border-rādiuss: .25em; robežu rādiuss: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ielikt 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ielikt 0 -2px 0 0 rgba (0,0,0,0.2); kastes ēna: 0 2px 0 0 rgba (0,0,0,0.1), ieliktnis 0 -2px 0 0 rgba (0,0,0,0.2); fona krāsa: # 276195; fona attēls: -moz-lineārs gradients (# 3c88cc, # 276195); fona attēls: -ms-lineārais gradients (# 3c88cc, # 276195); fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0%, # 3c88cc), krāsu apstāšanās (100%, # 276195)); fona attēls: -webkit-lineārs gradients (# 3c88cc, # 276195); fona attēls: -o-lineārs gradients (# 3c88cc, # 276195); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; fona attēls: lineārs gradients (# 3c88cc, # 276195); robeža: 0; kursors: rādītājs; krāsa: #fff; teksta apdare: nav; teksta saskaņošana: centrs; fonta lielums: 16px; polsterējums: 0px 20px; augstums: 40px; līnijas augstums: 40px; min-platums: 100px; teksta ēna: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-pāreja: visi lineārie .2s; -moz-pāreja: visi lineārie .2s; -o-pāreja: visi lineārie .2s; -ms-pāreja: visi lineārie .2s; pāreja: visi lineārie .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ielikt 0 -2px 0 0 rgba (0,0,0,0,3), ieliktnis 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ieliktnis 0 -2px 0 0 rgba (0,0,0,0.3), ieliktnis 0 12px 20px 2px # 3089d8; kastes ēna: 0 2px 0 0 rgba (0,0,0,0.1), ieliktņa 0 -2px 0 0 rgba (0,0,0,0.3), ieliktnis 0 12px 20px 2px # 3089d8;  .blu-btn: aktīvs -webkit-box-shadow: ielikt 0 2px 0 0 rgba (0,0,0,0.2), ielikums 0 12px 20px 6px rgba (0,0,0,0.2), ielikt 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: ieliktnis 0 2px 0 0 rgba (0,0,0,0.2), ieliktnis 0 12px 20px 6px rgba (0,0,0,0.2), ieliktnis 0 0 2px 2px rgba (0,0, 0,0.3); kaste-ēna: ieliktnis 0 2px 0 0 rgba (0,0,0,0.2), ieliktnis 0 12px 20px 6px rgba (0,0,0,0.2), ieliktnis 0 0 2px 2px rgba (0,0,0,0.3 );  .grn-btn display: inline-block; -moz-border-rādiuss: .25em; robežu rādiuss: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ielikt 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ielikt 0 -2px 0 0 rgba (0,0,0,0.2); kastes ēna: 0 2px 0 0 rgba (0,0,0,0.1), ieliktnis 0 -2px 0 0 rgba (0,0,0,0.2); fona krāsa: # 659324; fona attēls: -moz-linear-gradient (# 81bc2e, # 659324); fona attēls: -ms-lineārs gradients (# 81bc2e, # 659324); fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0%, # 81bc2e), krāsu apstāšanās (100%, # 659324)); fona attēls: -webkit-lineārs gradients (# 81bc2e, # 659324); fona attēls: -o-lineārs gradients (# 81bc2e, # 659324); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; fona attēls: lineārs gradients (# 81bc2e, # 659324); robeža: 0; kursors: rādītājs; krāsa: #fff; teksta apdare: nav; teksta saskaņošana: centrs; fonta lielums: 16px; polsterējums: 0px 20px; augstums: 40px; līnijas augstums: 40px; min-platums: 100px; teksta ēna: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-pāreja: visi lineārie .2s; -moz-pāreja: visi lineārie .2s; -o-pāreja: visi lineārie .2s; -ms-pāreja: visi lineārie .2s; pāreja: visi lineārie .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ielikt 0 -2px 0 0 rgba (0,0,0 , 0,3), ielikt 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ieliktnis 0 -2px 0 0 rgba (0,0,0,0.3), ieliktnis 0 12px 20px 2px # 85ca26; kastes ēna: 0 2px 0 0 rgba (0,0,0,0.1), ieliktnis 0 -2px 0 0 rgba (0,0,0,0.3), ieliktnis 0 12px 20px 2px # 85ca26;  .grn-btn: aktīvs -webkit-box-shadow: ieliktnis 0 2px 0 0 rgba (0,0,0,0.2), ieliktnis 0 12px 20px 6px rgba (0,0,0,0.2), ielikt 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: ieliktnis 0 2px 0 0 rgba (0,0,0,0.2), ieliktnis 0 12px 20px 6px rgba (0,0,0,0.2), ieliktnis 0 0 2px 2px rgba (0,0, 0,0.3); kaste-ēna: ieliktnis 0 2px 0 0 rgba (0,0,0,0.2), ieliktnis 0 12px 20px 6px rgba (0,0,0,0.2), ieliktnis 0 0 2px 2px rgba (0,0,0,0.3 );  

Es izmantoju pilnas pārejas uz 200 milisekundēm hover un aktīvās pogas stāvoklī. Tas, kas ir tik liels par šiem stiliem, ir tas, ka jūs varat tos piemērot gandrīz jebkuram klikšķināmam elementam. Pogas, enkura saites, veidlapas elementi vai kaut kas cits, ko jūs domājat, ir piemēroti - lai gan šie stili ir jāizmanto retos gadījumos, lai netiktu pārslogoti jūsu dizains.

Šādas pogas bieži tiek saglabātas vislabāk tādā pašā veidā, kā Mozilla tās izmanto. Pievienojiet šos stilus savā emuārā, kur jums ir pogas, lai lejupielādētu bezmaksas spēles, vai kaut ko līdzīgu. Lietotāji patīk sadarboties ar unikālām saskarnēm un tas bieži izpaužas kā daudz augstāks procentuālais daudzums jūsu klikšķu vērtējumam.

• Demo

Galīgās domas

Es ceru, ka jūs varat noņemt dažas lielas mācības no šīs kastes ēnu tehnikas kolekcijas. Ir daudz dažādu jomu, uz kurām var vērst uzmanību, iekļaujot veidlapas, modālu kastes, pogas, rīkjoslas un pat pilnu vietnes izkārtojumu.

Jūtieties brīvi, lai īstenotu kādu no šiem ēnu efektiem savā tīmekļa vietnē. Ir daudz citu metožu, taču šī kolekcija ir ideāli piemērota gan iesācējiem, gan progresīviem izstrādātājiem. Arī tad, ja jums ir kādi ieteikumi vai jautājumi par rakstu, kuru varat kopīgot ar mums komentāru diskusiju zonā.