10 kreatívnych techník používajúcich stín CSS3 Box

V priebehu niekoľkých posledných rokov sme zaznamenali obrovský pokrok vo vývoji webových stránok CSS3. Populárne webové stránky po celom internete začali obsahovať mnoho jedinečných štýlov, ako sú zaoblené rohy a mediálne dopyty reagujúce na mobilné zariadenia. Ale ešte dôležitejšie to otvorilo dvere pre tvorivé rozhrania, ktoré majú byť prototypované za niekoľko minút.

V tomto článku by som sa chcel podeliť 10 úryvkov kódu týkajúcich sa brilantných návrhov tieňových skriniek CSS3. Vysvetlím, ako tento kód funguje a ako môžete implementovať každý stín na svoj vlastný web.

Tieto štýly sú pripisované veľkému dizajnu vplyvu z iných obľúbených webových stránok. Je to skvelý príklad toho, ako súčasní vývojári webu vytvárajú dôležité trendy pre budúcnosť webového dizajnu.

1. Pevná horná lišta s nástrojmi

Rumunská sociálna multimediálna služba Trilulilu používa na svojej webovej stránke plávajúcu hornú lištu nástrojov. Toto možno rýchlo vytvoriť pomocou tlačidla a pozícia: pevná; vlastnosť na ľubovoľnom prvku hornej lišty. Tento dodatočný tieň boxu však prinesie účinok na úplne novú úroveň.

#banner pozícia: opravená; výška: 60px; šírka: 100%; top: 0; vľavo: 0; hraničný vrchol: 5px solid # a1cb2f; pozadie: #fff; -moz-box-tieň: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-box-tieň: 0 2px 3px 0px rgba (0, 0, 0, 0.16); box-tieň: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z-index: 999999;  #banner h1 riadok-výška: 60px;

Všimnete si, že vlastnosť stínového boxu je vlastne nastavená pomerne jednoduchou kombináciou hodnôt. Stín padne pod rámček a rozmazaný o 3px na oboch stranách.

Môžeme použiť RGBA () spôsob aplikácie miernej nepriehľadnosti na tieň, takže prvok sa nezdá príliš tmavý. Je to jemný doplnok, ktorý určite zachyti pozornosť vášho návštevníka.

demonštrácie

2. Rozbaľovanie pod-navigácie

Tu je ďalšia kreatívna metóda tieňovej škatuľky aplikovaná na podskupinu skalárneho rozbaľovacieho okna. Podobný efekt je možné vidieť aj na Podnikateľovi, keď sa pohybujete nad každým z hlavných navigačných odkazov. To je určite o niečo zložitejšie nakonfigurovať, ale stojí za trpezlivosť.

#bar display: block; výška: 45px; pozadie: # 22385a; padding-top: 5px; margin-bottom: 150px; pozícia: relatívna;  #bar ul margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li pozadie: # 22385a; zobrazenie: blok; veľkosť písma: 1.2m; pozícia: relatívna; plavák: vľavo;  # bar ul li a zobrazenie: blok; farba: # fffff7; line-height: 45px; font-weight: tučné; polstrovanie: 0px 10px; textová výzdoba: žiadne; z-index: 9999;  #bar ul li a: vznášať, #bar ulli a.selected farba: # 365977; pozadie: #fff; okraj-horný-polomer: 3px; okraj vpravo-vpravo: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-okraj-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav zobrazenie: blok; vľavo: 14px; top: 48px; z-index: -1; šírka: 500px; poloha: absolútna; výška: 90px; okraj: 1px solídny # edf0f3; okraj: 0; polstrovanie: 10px 0 10px 10px; pretečenie: skryté; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; okraj spodného-pravého okraja: 3px; okraj spodného-pravého okraja: 3px; -moz-box-tieň: 0px 2px 7px rgba (0,0,0,0,25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); box-tieň: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Sila = 3, Smer = 180, Farba =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Sila = 3, Smer = 180, Farba = "# 333333");

Odkazy nav môžu byť navrhnuté tak, aby zmenili farbu pri výbere alebo na myši. Pridávam aj niekoľko zaoblených okrajov na odkazy a cez rozbaľovacie menu. To dáva skôr pekný pocit než tvrdé hrany. Taktiež dobre využívam -ms-filter a filter vlastnosti, ktoré sú výlučne proprietárne pre Internet Explorer.

Ak nastavíte plný navigačný systém, nebudete môcť zmeniť zobrazenú hodnotu na žiadnu a skryť menu po načítaní stránky. Potom pomocou nejakého jQuery môžete zacieliť na udalosť .hover () a zobraziť panel podnázev s aktualizovaným obsahom.

demonštrácie

3. Glossy Shadow Button

To je pravdepodobne jeden z mojich obľúbených štýlov, ktoré vytvoriť práve kvôli tomu, ako sa dynamicky objavuje na stránke. Ak nemôžete povedať, toto je malé modré tlačidlo, ktoré ste našli na domovskej stránke YouTube po prvom prihlásení.

blues color: #fff; šírka: 190px; výška: 35px; kurzor: ukazovateľ; font-family: Arial, Tahoma, sans-serif; veľkosť písma: 1.0m; font-weight: tučné; -moz-okraj-polomer: 2px; -webkit-border-radius: 2px; okraj polomeru: 2px; šírka hranice: 1px; hraničná farba: # 0053a6 # 0053a6 # 000; farba pozadia: # 6891e7; obrázok-pozadie: -moz-linear-gradient (top, # 4495e7 0, # 0053a6 100%); obrázok-pozadie: -ms-lineárny gradient (top, # 4495e7 0, # 0053a6 100%); obrázok-pozadie: -o-lineárny gradient (hore, # 4495e7 0, # 0053a6 100%); pozadie-obrázok: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0, # 4495e7), farebný stop (100%, # 0053a6)); pozadie-obrázok: -webkit-lineárny gradient (hore, # 4495e7 0, # 0053a6 100%); obrázok na pozadí: lineárny gradient (dole, # 4495e7 0, # 0053a6 100%); textový tieň: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-tieň: vložka 0 1px 0 rgba (256, 256, 256, .35); -ms-box-tieň: vložka 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: vložka 0 1px 0 rgba (256, 256, 256, .35); box-tieň: vložený 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-tieň: vložka 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -ms-box-tieň: vložka 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: vložka 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); box-tieň: vloženie 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); pozadia-obrázok: -moz-lineárny gradient (vrchol, # 3a8cdf 0, # 0053a6 100%); obrázok na pozadí: -ms-lineárny gradient (vrchol, # 3a8cdf 0, # 0053a6 100%); obrázok na pozadí: -o-lineárny gradient (vrchol, # 3a8cdf 0, # 0053a6 100%); pozadie-obrázok: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0, # 3a8cdf), farebný stop (100%, # 0053a6)); pozadie-obrázok: -webkit-lineárny gradient (hore, # 3a8cdf 0, # 0053a6 100%); obrázok na pozadí: lineárny gradient (dole, # 3a8cdf 0, # 0053a6 100%);  .blues: aktívny border-color: # 000 # 002d59 # 002d59; -moz-box-tieň: vložka 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -ms-box-tieň: vložka 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -webkit-box-shadow: vložiť 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; box-tieň: vložený 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); obrázok-pozadie: -moz-lineárny gradient (top, # 005ab4 0, # 175ea6 100%); obrázok na pozadí: -ms-lineárny gradient (vrchol, # 005ab4 0, # 175ea6 100%); obrázok na pozadí: -o-lineárny gradient (vrchol, # 005ab4 0, # 175ea6 100%); pozadie-obrázok: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0, # 005ab4), farebný stop (100%, # 175ea6)); pozadie-obrázok: -webkit-lineárny gradient (top, # 005ab4 0, # 175ea6 100%); obrázok na pozadí: lineárny gradient (dole, # 005ab4 0, # 175ea6 100%);

Celý kód tlačidla je veľa, na čo sa pozrieme, ale snažíme sa na podporu čo najväčšieho počtu prehliadačov. K dispozícii sú textové tiene a tieňové skrinky so sprievodnou podporou pre MS Internet Explorer 7+. Taktiež nastavujeme background-image vlastnosť s gradientmi CSS3 na veľkom počte predpôn pre konkrétnych dodávateľov.

Ale ak máte radi tento dizajnový štýl, potom vznášajúci sa a aktívny stav vás tiež upútajú. V podstate aktualizujeme hranicu tak, že do nej vložíme tieň, ktoré stlačíte dolu, pričom aktualizujeme gradient pozadia, aby sme mali trochu tmavšie.

Pretože na tlačidle nie sú žiadne obrázky, môžete aktualizovať hexadecimálne hodnoty a preformovať ich tak, aby sa zmiešali do prakticky ľubovoľnej farebnej schémy.

demonštrácie

4. Upozornenia Flyout Menu

Nie som veľkým používateľom Facebooku, ale som si všimol niektoré UI techniky z ich redesignov. Táto ponuka môžete porovnávať s vašimi upozorneniami alebo so žiadosťou o priateľstvo, ktoré sa nachádzajú na domovskej stránke.

.flyout width: 310px; margin-top: 10px; veľkosť písma: 11px; pozícia: relatívna; font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; farba pozadia: biela; polstrovanie: 9px 11px; pozadie: rgba (255, 255, 255, 0,9); hranica: 1px solid # c5c5c5; -webkit-box-tieň: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-tieň: 0 3px 8px rgba (0, 0, 0, .25); box-tieň: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-okraj-polomer: 3px; polomer okrajov: 3px; . flyout #tip pozadie-obrázok: url ('images / tip.png'); opakovanie pozadia: opakovanie; veľkosť pozadia: auto; výška: 11px; poloha: absolútna; top: -11px; vľavo: 25px; šírka: 20px; . flyout h2 text-transform: veľké; farba: # 666; veľkosť písma: 1.2m; padding-bottom: 5px; margin-bottom: 12px; border-bottom: 1px solid #dcdbda; . flyout p padding-bottom: 25px; veľkosť písma: 1.1m; farba: # 222;

Nie je tu veľa nových kódov na ohýbanie mysli, ktoré sa tu zobrazia. Používam malý .tip trieda s prvkom vnútorného rozpätia na pridanie trojuholníka nástroja. Je možné vytvoriť čisté CSS3 trojuholníky, ale táto metóda nie je jednoduchá, ako si viete predstaviť. Ak dávate prednosť tejto metóde, môže to stáť za to, že niečo spoločné. Ale rotačné vlastnosti CSS3 nie sú podporované všade; zatiaľ obrázky nevyžadujú žiadnu alternatívnu metódu.

demonštrácie

5. Zbaliť stránku Apple

Existuje toľko impozantných stíníc CSS3 boxov, ktoré nájdete na oficiálnych stránkach spoločnosti Apple. Tento príklad nižšie je malý kontajner s niekoľkými stĺpcami. Pri pohľade na rozloženie Apple si všimnete, že veľa z ich stránok pozostáva z mnohých balení.

.applewrap šírka: 100%; zobrazenie: blok; výška: 150px; pozadie: biela; hranica: 1px pevná; border-color: # e5e5e5 # dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-okraj-polomer: 4px; polomer okrajov: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0,3) 0 1px 3px; -moz-box-tieň: rgba (0,0,0,0,3) 0 1px 3px; box-tieň: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: vľavo; rozmery v políčku: okrajové pole; šírka: 250px; výška: 150px; polstrovanie: 16px 7px 6px 22px; písmo: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; farba: # 343434; border-right: 1px solid #dadada;

Mohli by ste dať dohromady podobnú stránku rozdelenú do rôznych obsahových rámčekov rôznej šírky a výšky. Aj keď som do tohto demo vložil niekoľko stĺpcov, v žiadnom prípade nie je potrebná technika formátovania. Štýl schránky sa najlepšie hodí na bielo-šedé pozadie. Ale myslím, že zobrazenie nad ľubovoľnou farbou svetla by vyzeralo celkom dobre.

demonštrácie

6. Apple Content Box

Tento ďalší štýl obsahového poľa na webových stránkach spoločnosti Apple sa používa väčšinou na návrhy stĺpcov. Sú to hlavne v spodnej časti stránky, ktorá zobrazuje obchody a ďalšie súvisiace informácie. Je to úplne iný dizajnový štýl, pričom stĺpec boxu sa zobrazuje zvnútra hore.

.applebox šírka: auto; výška: 85px; rozmery v políčku: okrajové pole; pozadie: # f5f5f5; polstrovanie: 20px 20px 10px; margin: 10px 0 20px; hranica: 1px pevná # ccc; polomer okrajov: 4px; -webkit-border-radius: 4px; -moz-okraj-polomer: 4px; -o-okraj-polomer: 4px; -webkit-box-shadow: vložiť 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-tieň: vložiť 0px 1px 1px rgba (0, 0, 0, .3); box-tieň: vložiť 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col šírka: 140px; plavák: vľavo; marža: 0 0 0 30px;

Nemyslím si, že tento kód by mal byť príliš ťažký sledovať a kopírovať na iný kontajner div. Použijeme iba tieňové stíny, ktoré žiadame vložiť s alfa-transparentnými farebnými kódmi. Takže aj keď máme tieň štítu nastavenú na čierne čierne, zobrazujeme len 30% nepriehľadnosť.

demonštrácie

7. Vybrané odkazy

Toto je pravdepodobne môj obľúbený štýl štýlu boxov z aktuálneho webu spoločnosti Apple. Mali by ste nájsť živý ukážkový štýl tejto techniky na stránke iCloud s radom pohyblivých odkazov.

.applefeature výška: 150px; okraj: 8px; vertikálne zarovnanie: hore; zobrazenie: inline-block;  .applefeature a zobrazenie: blok; šírka: 168px; výška: 140px; hranica: 1px pevná # ccc; farba: # 333; textová výzdoba: žiadne; font-weight: tučné; line-height: 1,3m; pozadie: # f7f7f7; -webkit-box-shadow: vložiť 0 1px 2px rgba (0, 0, 0, .3); -moz-box-tieň: vložka 0 1px 2px rgba (0, 0, 0, .3); box-tieň: vložiť 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-okraj-polomer: 4px; polomer okrajov: 4px;  .applefeature a: vznášať sa background: #fafafa; pozadie: -webkit-gradient (lineárne, 0% 0%, 0% 100%, od (#fff) až po (# f7f7f7)); pozadie: -moz-lineárny gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: vložka 0 1px 2px rgba (0,0,0, .3); -moz-box-tieň: vložka 0 1px 2px rgba (0,0,0, .3); box-tieň: vložiť 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-okraj-polomer: 4px; polomer okrajov: 4px;  .applefeature a img display: block; okraj: 26 pixelov auto 4px;  .applefeature a h4 display: block; šírka: 160px; veľkosť písma: 1.3m; font-family: Arial, Tahoma, sans-serif; farba: # 646464; text-align: center;

Tieto odkazy sú nastavené na pevnú šírku a obsahujú odlišnú ikonu a text zobrazenia. Príklad spoločnosti Apple používa podobný stín, aký sme si všimli v predchádzajúcom poli s obsahom. však celé pole sa teraz môže aktivovať ako odkaz ktorá zahŕňa aj funkciu :vznášať sa a : aktívny stavy. V tejto linkovej karte je veľa flexibility a mali by ste sa pokúsiť hrať so zdrojovým kódom.

Je možné skrátiť výšku / šírku a vytvoriť oveľa menší zoznam odkazov. Mohlo by ísť o súbor kapitol alebo stránok v článku, alebo by ste mohli vytvoriť podmenu obmedzený ikonami odkazov. Je to čestne veľká séria novších techník CSS3, ktoré dokazujú, akú moc máte ako webový dizajnér.

demonštrácie

8. Framed Images

Na tento príklad som pridal sivé pozadie, aby ste videli tieňové štýly boxu jasnejšie. Toto pole je podobné zobrazeným náhľadom ukážky na stránke wordpress.com, okrem toho, že som do zdrojového kódu pridal trochu väčšiu hĺbku.

.wpframe background: #fff; okraj polomeru: 2px; -webkit-border-radius: 2px; -moz-okraj-polomer: 2px; polstrovanie: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-tieň: 1px 2px 1px # d1d1d1; box-tieň: 1px 2px 1px # d1d1d1;

Vzhľadom na to, že na obraze sú malé obloženia na oboch stranách, tento rám sa objaví ako veľký biely okraj. Vždy môžete aktualizovať farbu pozadia alebo dokonca pridať malý vonkajší okraj na oddelenie obrazu od pozadia. Ale táto pomerne zjednodušená sada štýlov môže byť manévrovaná do rôznych stínových techník. Prehrajte si s kódom a uvidíte, ako môžete vylepšiť vzory obrázkov na vlastnej webovej stránke.

demonštrácie

9. Svietivé vstupné polia

Mám túto myšlienku po návšteve prihlasovacej stránky Pinterest niekoľkokrát. Ich animované štýly naozaj zobrazujú niektoré výrečné príklady viacerých stínov inline boxu, a to ako vonku, tak aj vloženého.

.formwrap zobrazenie: blok; margin-bottom: 15px;  .formalizovať štítok display: inline-block; šírka: 80px; veľkosť písma: 11px; font-weight: tučné; farba: # 444; font-family: Arial, Tahoma, sans-serif;  .formulácia .shadowfield pozícia: relatívna; šírka: 250px; veľkosť písma: 17px; font-family: "Helvetica Neue", Arial, sans-serif; veľkosť písma: normálna; pozadie: # f7f8f8; farba: # 7c7c7c; line-height: 1,4; polstrovanie: 6px 12px; obrys: žiadny; prechod: všetko 0,2s jednoduchosť-in-out 0s; -webkit-transition: všetky 0.2s easy-in-out 0s; -moz-transition: všetky 0.2s easy-in-out 0s; hranica: 1px pevná # ad9c9c; polomer okrajov: 6px 6px 6px 6px; box-tieň: 0 1px rgba (34, 25, 25, 0,2) vložka, 0 1px #fff;  .formulácia .shadowfield: zaostrenie border-color: # 930; pozadie: #fff; farba: # 5d5d5d; box-shadow: vložený 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: vložený 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: vložka 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);

Hoci pôvodné štýly sú veľmi atraktívne, priťahujem sa prechodové efekty, keď sa zameriavate na každé vstupné pole. Môžete medzi nimi nájsť kartu a vidieť okamžitý rozdiel v toľkých vlastnostiach. Tieň vonkajšieho žiariaceho boxu sa aplikuje spolu s aktualizovaným vloženým tieňom. Tiež farba textu sa zosvetlí, keď ste sa sústredili na konkrétny vstup, potom sa strácajú, keď oddeľujete.

Dokonca aj kopírovanie cez jeden z týchto efektov by výrazne zlepšilo užívateľskú skúsenosť s vašimi formulármi. Uistite sa, že nejdete príliš ďaleko cez palubu do miesta, kde sú vaše formy sotva použiteľné. Avšak väčšina návštevníkov bude mať potešujúce estetické efekty, ktoré podporia interakciu a ďalšie zapojenie sa do vašich webových stránok.

demonštrácie

10. Elastické tieňové gombíky

Tieto unikátne tieňové tlačidlá sú navrhnuté s pomalým prechodom počas aktivovania a aktívneho stavu. Podobné príklady nájdete na domovskej stránke Mozilla s ich veľkými “Stiahnuť Firefox” Tlačidlo. Niektoré z nich box-shadow Vlastnosti skombinujú tri rôzne tiene do jedného príkazu.

.blu-btn zobrazenie: inline-block; -moz-okraj-polomer: .25m; polomer okrajov: .25m; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-tieň: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,2); box-tieň: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,2); farba pozadia: # 276195; pozadia-obrázok: -moz-linear-gradient (# 3c88cc, # 276195); pozadie-obrázok: -ms-lineárny gradient (# 3c88cc, # 276195); pozadie-obrázok: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, # 3c88cc), farebný stop (100%, # 276195)); pozadie-obrázok: -webkit-lineárny gradient (# 3c88cc, # 276195); obrázok na pozadí: -o-lineárny 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)"; obrázok na pozadí: lineárny gradient (# 3c88cc, # 276195); hranica: 0; kurzor: ukazovateľ; farba: #fff; textová výzdoba: žiadne; text-align: center; veľkosť písma: 16px; polstrovanie: 0px 20px; výška: 40px; line-height: 40px; min-šírka: 100px; textový tieň: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: všetky lineárne .2s; -moz-transition: všetky lineárne .2s; -o-transition: všetky lineárne .2s; -ms-transition: všetky lineárne .2s; prechod: všetky lineárne .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), insert 0 -2px 0 0 rgba (0,0,0,0,3), Vložiť 0 12px 20px 2px # 3089d8; -moz-box-tieň: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,3), vložka 0 12px 20px 2px # 3089d8; box-tieň: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,3), vložka 0 12px 20px 2px # 3089d8;  .blu-btn: aktívna -webkit-box-shadow: vložka 0 2px 0 0 rgba (0,0,0,0,2), vložka 0 12px 20px 6px rgba (0,0,0,0,2), vložka 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: vložiť 0 2px 0 0 rgba (0,0,0,0,2), vložiť 0 12px 20px 6px rgba (0,0,0,0,2), vložiť 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: vložka 0 2px 0 0 rgba (0,0,0,0,2), vložka 0 12px 20px 6px rgba (0,0,0,0,2), vložka 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn zobrazenie: inline-block; -moz-okraj-polomer: .25m; polomer okrajov: .25m; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-tieň: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,2); box-tieň: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,2); farba pozadia: # 659324; obrázok-pozadie: -moz-linear-gradient (# 81bc2e, # 659324); obrázok na pozadí: -ms-line-gradient (# 81bc2e, # 659324); pozadie-obrázok: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, # 81bc2e), farebný stop (100%, # 659324)); pozadie-obrázok: -webkit-lineárny gradient (# 81bc2e, # 659324); pozadie-obrázok: -o-lineárny 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)"; obrázok na pozadí: lineárny gradient (# 81bc2e, # 659324); hranica: 0; kurzor: ukazovateľ; farba: #fff; textová výzdoba: žiadne; text-align: center; veľkosť písma: 16px; polstrovanie: 0px 20px; výška: 40px; line-height: 40px; min-šírka: 100px; textový tieň: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: všetky lineárne .2s; -moz-transition: všetky lineárne .2s; -o-transition: všetky lineárne .2s; -ms-transition: všetky lineárne .2s; prechod: všetky lineárne .2s;  .grn-btn: hover, .grn-btn: zaostrenie -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0 , 0,3), vložiť 0 12px 20px 2px # 85ca26; -moz-box-tieň: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,3), vložka 0 12px 20px 2px # 85ca26; box-tieň: 0 2px 0 0 rgba (0,0,0,0,1), vložka 0 -2px 0 0 rgba (0,0,0,0,3), vložka 0 12px 20px 2px # 85ca26;  .grn-btn: aktívny -webkit-box-shadow: vložiť 0 2px 0 0 rgba (0,0,0,0,2), vložiť 0 12px 20px 6px rgba (0,0,0,0,2), vložiť 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: vložiť 0 2px 0 0 rgba (0,0,0,0,2), vložiť 0 12px 20px 6px rgba (0,0,0,0,2), vložiť 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: vložka 0 2px 0 0 rgba (0,0,0,0,2), vložka 0 12px 20px 6px rgba (0,0,0,0,2), vložka 0 0 2px 2px rgba (0,0,0,0,3 );

Používam plné prechody po dobu 200 milisekúnd na stave stlačenia a aktívneho tlačidla. Čo je na týchto štýloch tak skvelé, je, že ich môžete aplikovať na takmer ľubovoľný prvok s možnosťou kliknutia. Tlačidlá, kotvové články, tvarové prvky alebo čokoľvek iného, čo si myslíte, že je vhodné - aj keď tieto štýly by sa mali používať riedko, aby nedošlo k preťaženiu dizajnu.

Takéto gombíky sú často najlepšie zachránené rovnakým spôsobom, ako ich Mozilla používa. Pripojte tieto štýly do svojho blogu, kde máte k dispozícii tlačidlá na prevzatie zadarmo alebo niečo podobné. Používatelia majú radi interakciu s jedinečnými rozhraniami a to sa často prejavuje v oveľa vyššom percentuálnom vyjadrení vašej miery prekliknutia.

demonštrácie

Záverečné myšlienky

Dúfam, že z tejto zbierky techniky stínových boxov odnesiete niekoľko skvelých ponaučení. Existuje veľa rôznych oblastí, na ktoré by ste sa mohli sústrediť vrátane formulárov, modálnych schránok, tlačidiel, panelov nástrojov a dokonca aj úplných rozvrhov webových stránok.

Neváhajte implementovať niektorý z týchto tieňových efektov na časti vašich vlastných webových stránok. Existuje mnoho ďalších techník, ale táto kolekcia je ideálna pre začiatočníkov aj pokročilých vývojárov. Ak máte akékoľvek návrhy alebo otázky týkajúce sa tohto článku, môžete sa s nami podeliť v oblasti diskusií o komentároch nižšie.