10 Kreativní techniky pomocí CSS3 Box Shadow

Během posledních několika let jsme zaznamenali obrovský pokrok ve vývoji webu CSS3. Populární internetové stránky po celém internetu začaly začleňovat mnoho jedinečných stylů, jako jsou zaoblené rohy a mobilní citlivé dotazy. A co je ještě důležitější, otevřely se tak dveře pro kreativní rozhraní, která budou během několika minut prototypována.

V tomto článku chci sdílet 10 útržků kódu týkajících se brilantních návrhů stínu boxů CSS3. Vysvětlím vám, jak tento kód funguje a jak můžete každý boxový stín implementovat na své vlastní webové stránky.

Tyto styly jsou přisuzovány velkému vlivu designu z jiných populárních webových stránek. To je skvělý příklad toho, jak současní weboví vývojáři budují působivé trendy pro budoucnost webového designu.

1. Pevné horní panely nástrojů

Služba rumunských sociálních médií Trilulilu používá kolem svých webových stránek plovoucí panel nástrojů. To lze vytvořit rychle pomocí a poloha: pevná; vlastnost na horním prutu. Tento dodatečný stín boxu však působí na zcela novou úroveň.

#banner position: fixed; výška: 60px; šířka: 100%; nahoru: 0; vlevo: 0; border-top: 5px pevné # a1cb2f; pozadí: #ff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); -webk-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 line-height: 60px;

Všimnete si, že vlastnost box-shadow je ve skutečnosti nastavena na poměrně jednoduchou kombinaci hodnot. Stín bude spadat pod krabici a rozmazaný 3px na obou stranách.

Můžeme použít rgba () metoda pro použití mírné neprůhlednosti na stín, takže prvek není příliš tmavý. Je to subtilní doplněk, který jistě zaujme návštěvníka.

Demo

2. Dílčí navigace

Zde je další kreativní stín stínové metody aplikované na skalární rozbalovací dílčí nabídku. Podobný efekt lze pozorovat u Podnikatele, když se pohybujete nad každým z hlavních navigačních odkazů. To je určitě trochu složitější konfigurovat, ale stojí za to trpělivost.

#bar display: block; výška: 45px; pozadí: # 22385a; polstrování: 5x; spodní okraj: 150px; poloha: relativní;  #bar ul margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li background: # 22385a; zobrazení: blok; velikost písma: 1.2em; poloha: relativní; plavat vlevo;  #bar ul li a zobrazit: blok; barva: # fffff7; výška řádku: 45px; font-weight: tučné; polstrování: 0px 10px; text-decoration: žádný; z-index: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; pozadí: #ff; hrana-horní-levý rádius: 3px; hrana-horní-pravý-rádius: 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 zobrazit: blok; vlevo: 14x; nahoru: 48px; z-index: -1; šířka: 500px; pozice: absolutní; výška: 90px; ohraničení: 1px pevná # edf0f3; border-top: 0; polstrování: 10px 0 10px 10px; přetečení: skryté; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; hrana-dolní-pravý-rádius: 3px; hrana-dolní-pravý-rádius: 3px; -moz-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); -webk-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); box-shadow: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (síla = 3, směr = 180, barva =" # 333333 ")"; filtr: progid: DXImageTransform.Microsoft.Shadow (síla = 3, směr = 180, barva = "# 333333");

Linky nav mohou být stylizovány tak, aby se změnila barva, když jsou vybrána, nebo na myši. Přidávám také několik zaokrouhlených hranic na odkazy a přes rozbalovací nabídku. To dává lepší pocit než tvrdé hrany všude kolem. Také dobře využívám -ms-filtr a filtr vlastnosti, které jsou výhradně vlastnictvím aplikace Internet Explorer.

Pokud nastavíte celý navigační systém, budete moci změnit nastavení zobrazení na hodnotu Žádná a po načtení stránky nabídku skrýt. Pak pomocí některé jQuery můžete cílit na událost .hover () a zobrazit subnav bar s aktualizovaným obsahem.

Demo

3. Lesklé tlačítko Stín

Toto je možná jeden z mých oblíbených stylů, který chcete vytvořit právě kvůli tomu, jak se dynamicky zobrazuje na stránce. Pokud to nevíte, jedná se o malé modré tlačítko na domovské stránce YouTube po prvním přihlášení.

blues color: #fff; šířka: 190px; výška: 35px; kurzor: ukazatel; font-family: Arial, Tahoma, sans-serif; velikost písma: 1.0em; font-weight: tučné; -moz-border-radius: 2px; -webk-border-radius: 2px; hraniční rádius: 2px; border-width: 1px; border-color: # 0053a6 # 0053a6 # 000; barva pozadí: # 6891e7; pozadí-obraz: -moz-lineární gradient (top, # 4495e7, # 0053a6 100%); pozadí-obraz: -ms-lineární gradient (top, # 4495e7, # 0053a6 100%); pozadí-obraz: -o-lineární gradient (top, # 4495e7, # 0053a6 100%); pozadí-obraz: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (0, # 4495e7), barevný doraz (100%, # 0053a6)); pozadí-obraz: -webk-lineární gradient (top, # 4495e7, # 0053a6 100%); pozadí-obraz: lineární gradient (ke dnu, # 4495e7, # 0053a6 100%); text-shadow: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: inset 0 1px0 rgba (256, 256, 256, .35); -ms-box-shadow: inset 0 1 x x rgba (256, 256, 256, 35); -webk-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); filtr: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: inset 0 1px0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -ms-box-shadow: inset 0 1px0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webk-box-shadow: inset 0 1px0 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, 0,25); filtr: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); pozadí-obraz: -moz-lineární gradient (horní, # 3a8cdf 0, # 0053a6 100%); pozadí-obraz: -ms-lineární gradient (horní, # 3a8cdf 0, # 0053a6 100%); pozadí-obraz: -o-lineární gradient (horní, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-gradient (lineární, levý horní, levý dolní, barevný stop (0, # 3a8cdf), barevný stop (100%, # 0053a6)); pozadí-obraz: -webkit-lineární gradient (horní, # 3a8cdf 0, # 0053a6 100%); background-image: lineární gradient (na dno, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: inset 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; filtr: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); pozadí-obraz: -moz-lineární gradient (horní, # 005ab4 0, # 175ea6 100%); pozadí-obraz: -ms-lineární gradient (top, # 005ab4 0, # 175ea6 100%); pozadí-obraz: -o-lineární gradient (horní, # 005ab4 0, # 175ea6 100%); pozadí-obraz: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (0, # 005ab4), barevný doraz (100%, # 175ea6)); pozadí-obraz: -webk-lineární gradient (horní, # 005ab4 0, # 175ea6 100%); pozadí-obraz: lineární gradient (ke dnu, # 005ab4 0, # 175ea6 100%);

Celý kód tlačítka je hodně na co se podívat, ale snažíme se podporovat co nejvíce prohlížečů. K dispozici jsou textové stíny a stíny s doprovodnou podporou pro MS Internet Explorer 7+. Také nastavujeme pozadí Vlastnost s přechody CSS3 přes velký počet předpon specifických pro dodavatele.

Ale pokud máte rádi tento design styl pak vznášející se a aktivní stavy vás také zaujmou. V podstatě aktualizujeme ohraničení tak, aby zahrnovaly několik stínů uvnitř, když tlačíte dolů, a aktualizujte gradient pozadí tak, aby se zobrazoval o něco tmavší.

Vzhledem k tomu, že na tlačítku nejsou žádné obrázky, můžete aktualizovat hexadecimální hodnoty a morfovat tak, aby se prolínaly do prakticky libovolného barevného schématu.

Demo

4. Oznámení Flyout Menu

Nejsem velký uživatel Facebooku, ale z jejich redesignů jsem si všiml některých UI technik. Toto menu může být porovnáno s vašimi oznámeními nebo vyskakovacími nabídkami přátel na domovské stránce.

.flyout width: 310px; okraj: 10px; velikost písma: 11px; poloha: relativní; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; barva pozadí: bílá; polstrování: 9px 11px; pozadí: rgba (255, 255, 255, 0,9); ohraničení: 1px pevné # c5c5c5; -webk-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); -webk-border-radius: 3px; -moz-border-radius: 3px; hraniční rádius: 3px;  .flyout #tip background-image: url ('images / tip.png'); background-repeat: no-repeat; velikost pozadí: auto; výška: 11px; pozice: absolutní; nahoru: -11px; vlevo: 25x; šířka: 20px;  .flyout h2 text-transform: velká písmena; barva: # 666; velikost písma: 1.2em; polstrování: 5px; spodní okraj: 12px; border-bottom: 1px pevná #dcdbda;  .flyout p padding-bottom: 25px; velikost písma: 1.1em; barva: # 222;

Není zde spousta nových kódů, které by se daly ohlédnout do mysli. Používám malé .tip třídy s interním span elementem pro přidání trojúhelníku tooltipu. Je možné vytvořit čisté CSS3 trojúhelníky, ale tato metoda není snadná, jak si můžete představit. Pokud dáváte přednost této metodě, možná stojí za to hackovat něco dohromady. Vlastnosti rotace CSS3 však nejsou všude podporovány; obrázky zatím nevyžadují žádnou záložní metodu.

Demo

5. Stránka Apple Wrapper

Existuje tolik impozantních stínů CSS3 boxů, které najdete na oficiálních stránkách společnosti Apple. Tento příklad je malý krabicový kontejner s několika sloupci rozpětí. Při pohledu přes rozložení Apple si všimnete, mnoho z jejich stránek tvořených mnoha krabic.

.applewrap width: 100%; zobrazení: blok; výška: 150px; pozadí: bílá; okraj: 1px pevná látka; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; hraniční rádius: 4px; -webk-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; velikost krabice: rámeček; šířka: 250x; výška: 150px; polstrování: 16px 7px 6px 22px; písmo: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; barva: # 343434; border-right: 1px pevná #dadada;

Mohli byste sestavit podobnou stránku rozdělenou podle obsahových polí různých šířek a výšek. I když jsem do tohoto dema vložil několik sloupců, není to nezbytná technika formátování. Stín boxu se nejlépe hodí na bílé / šedé pozadí. Ale myslím, že zobrazení nad jakoukoliv světlou barvou by vypadalo docela dobře.

Demo

6. Apple Content Box

Tento jiný styl obsahu boxu na internetových stránkách Apple se používá především pro návrhy sloupců. Jsou to především v dolní části stránky, kde se zobrazují nabídky a další související informace. Je to naprosto odlišný designový styl, kdy se stín boxu zobrazuje shora dolů.

.applebox width: auto; výška: 85px; velikost krabice: rámeček; pozadí: # f5f5f5; polstrování: 20px 20px 10px; okraj: 10px 0 20px; hranice: 1px pevná #ccc; hraniční rádius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; plavat vlevo; marže: 0 0 0 30px;

Nemyslím si, že tento kód by měl být příliš obtížný sledovat a kopírovat na jinou nádobu div. Jediný box-stín, který používáme, je vložka s alfa-transparentními barevnými kódy rgba. Takže i když máme stínu nastavenou na čistě černou, zobrazujeme pouze asi 30% krytí.

Demo

7. Doporučené odkazy

Toto je pravděpodobně můj nejoblíbenější styl stínu boxů z aktuální webové stránky společnosti Apple. Živý demo styl této techniky byste měli najít na stránce iCloud s řadou polí s plovoucími linkami.

.applefeature výška: 150px; marže: 8px; svislé zarovnání: horní; displej: inline-block;  .applefeature a display: block; šířka: 168px; výška: 140px; hranice: 1px pevná #ccc; barva: # 333; text-decoration: žádný; font-weight: tučné; line-height: 1.3em; pozadí: # f7f7f7; -webk-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; hraniční rádius: 4px;  .applefeature a: hover pozadí: #fafafa; pozadí: -webk-gradient (lineární, 0% 0%, 0% 100%, od (#ff), do (# f7f7f7)); pozadí: -moz-lineární gradient (100% 100% 90deg, # f7f7f7, #fff); -webk-box-shadow: inset 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: inset 0 1px 2px rgba (0,0,0, .3); box-shadow: inset 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; hraniční rádius: 4px;  .applefeature a img display: block; okraj: 26px auto 4px;  .applefeature a h4 display: block; šířka: 160px; velikost písma: 1.3em; font-family: Arial, Tahoma, sans-serif; barva: # 646464; zarovnání textu: střed;

Tyto odkazy jsou nastaveny na pevnou šířku a obsahují odlišnou ikonu a zobrazovaný text. Příklad společnosti Apple používá podobný stín boxu, jaký jsme viděli v předchozím poli obsahu. nicméně nyní lze jako odkaz aktivovat celý rámeček který zahrnuje jak :vznášet se a :aktivní států. Je zde mnoho flexibility s tímto odkazem box a měli byste zkusit hrát se zdrojovým kódem.

Je možné zkrátit výšku / šířku a vytvořit mnohem menší seznam odkazů. Mohlo by to být sada kapitol nebo stránek v článku, nebo můžete vytvořit podmenu s ikonami odkazů. Je to upřímně velký soubor novějších CSS3 technik, které ukazují, jak moc máte jako web designer.

Demo

8. Rámované obrazy

Přidal jsem do tohoto příkladu šedé pozadí, takže můžete vidět styly stínů boxů jasněji. Toto pole je podobné zobrazeným náhledovým snímkům na wordpress.com kromě toho, že jsem přidal trochu více do zdrojového kódu.

.wpframe background: #fff; hraniční rádius: 2px; -webk-border-radius: 2px; -moz-border-radius: 2px; polstrování: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;

Vzhledem k tomu, že obrazy mají na obou stranách malé polstrování, tento rámeček se jeví jako velký bílý okraj. Můžete vždy aktualizovat barvu pozadí, nebo dokonce přidat malý vnější okraj oddělit obraz od pozadí. Ale tento poměrně zjednodušující soubor stylů může být manévrován do různých boxových stínových technik. Hrajte si s kódem a uvidíte, jak můžete vylepšit návrhy obrázků na svých vlastních webových stránkách.

Demo

9. Zářící vstupní pole

Tento nápad jsem dostal několikrát po návštěvě přihlašovací stránky Pinterestu. Jejich animované styly skutečně zobrazují některé výmluvné příklady několika stinů inline boxu, a to jak vně, tak i uvnitř.

.formwrap display: block; spodní okraj: 15px;  .formwrap label display: inline-block; šířka: 80px; velikost písma: 11px; font-weight: tučné; barva: # 444; font-family: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relativní; šířka: 250x; velikost písma: 17px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: normální; pozadí: # f7f8f8; barva: # 7c7c7c; výška řádku: 1,4; polstrování: 6px 12px; obrys: žádný; přechod: všechny 0.2s snadné-in-out 0s; -webk-přechod: všechny 0.2s easy-in-out 0s; -moz-přechod: všechny 0.2s snadné-in-out 0s; okraj: 1px pevná # ad9c9c; hraniční hrana: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0,2) vložka, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; pozadí: #ff; barva: # 5d5d5d; box-shadow: vložka 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0,07px rgba (235, 82, 82, 0,5); -moz-box-shadow: inset 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0,07px rgba (235, 82, 82, 0,5); -webk-box-shadow: inset 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0,07px rgba (235, 82, 82, 0,5);

Ačkoli počáteční styly jsou velmi atraktivní, jsem přitahován k přechodových efektů při zaostřování na každé vstupní pole. Můžete mezi nimi tabulovat a vidět okamžitý rozdíl v mnoha vlastnostech. Stín externího zářícího boxu se použije spolu s aktualizovaným stínem. Také barva textu je světlejší, když se zaměřujete na určitý vstup, a pak se při rozostření rozplyne.

Dokonce i kopírování nad jedním z těchto efektů by výrazně zlepšilo uživatelský komfort vašich polí formuláře. Ujistěte se, že nejdete příliš daleko přes palubu do bodu, kdy jsou vaše formuláře sotva použitelné. Většina návštěvníků se však bude těšit z příjemných estetických efektů, které také podporují interakci a další zapojení vašich webových stránek.

Demo

10. Tlačítka elastického stínu

Tato jedinečná tlačítka stínů jsou navržena s pomalým přechodem během přechodu a aktivního stavu. Podobné příklady najdete na domovské stránce Mozilly s jejich velkými “Stáhnout Firefox” tlačítko. Některé z box-stín vlastnosti ve skutečnosti kombinují tři různé stíny dohromady do jednoho příkazu.

.blu-btn display: inline-block; -moz-border-radius: .25em; hraniční rádius: .25em; -webk-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), vloženo 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), vložka 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), vložka 0 -2px 0 0 rgba (0,0,0,0.2); barva pozadí: # 276195; pozadí-obraz: -moz-lineární gradient (# 3c88cc, # 276195); pozadí-obraz: -ms-lineární gradient (# 3c88cc, # 276195); pozadí-obraz: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (0%, # 3c88cc), barevný doraz (100%, # 276195)); pozadí-obraz: -webk-lineární gradient (# 3c88cc, # 276195); pozadí-obraz: -o-lineární gradient (# 3c88cc, # 276195); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; pozadí-obraz: lineární gradient (# 3c88cc, # 276195); ohraničení: 0; kurzor: ukazatel; barva: #ff; text-decoration: žádný; zarovnání textu: střed; velikost písma: 16px; polstrování: 0px 20px; výška: 40px; line-height: 40px; min-width: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webk-přechod: všechny lineární .2s; -moz-přechod: všechny lineární .2s; -o-přechod: všechny lineární .2s; -ms-přechod: všechny lineární .2s; přechod: všechny lineární .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), vložený 0 -2px 0 0 rgba (0,0,0,0,3), vložka 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), vloženo 0 -2px 0 0 rgba (0,0,0,0,3), vloženo 0 12px 20px 2px # 3089d8; 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žka 0 12px 20px 2px # 3089d8;  .blu-btn: active -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), vloženo 0 12px 20px 6px rgba (0,0,0,0.2), vloženo 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: inset 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); 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 display: inline-block; -moz-border-radius: .25em; hraniční rádius: .25em; -webk-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), vloženo 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), vložka 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), vložka 0 -2px 0 0 rgba (0,0,0,0.2); barva pozadí: # 659324; pozadí-obraz: -moz-lineární gradient (# 81bc2e, # 659324); pozadí-obraz: -ms-lineární gradient (# 81bc2e, # 659324); pozadí-obraz: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (0%, # 81bc2e), barevný doraz (100%, # 659324)); pozadí-obraz: -webkit-lineární gradient (# 81bc2e, # 659324); pozadí-obraz: -o-lineární gradient (# 81bc2e, # 659324); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; pozadí-obraz: lineární gradient (# 81bc2e, # 659324); ohraničení: 0; kurzor: ukazatel; barva: #ff; text-decoration: žádný; zarovnání textu: střed; velikost písma: 16px; polstrování: 0px 20px; výška: 40px; line-height: 40px; min-width: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webk-přechod: všechny lineární .2s; -moz-přechod: všechny lineární .2s; -o-přechod: všechny lineární .2s; -ms-přechod: všechny lineární .2s; přechod: všechny lineární .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), vloženo 0 -2px 0 0 rgba (0,0,0 , 0,3), vložka 0 12px 20px 2px # 85ca26; -moz-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žka 0 12px 20px 2px # 85ca26; 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žka 0 12px 20px 2px # 85ca26;  .grn-btn: active -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), vloženo 0 12px 20px 6px rgba (0,0,0,0.2), vloženo 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: inset 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); 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žívám plné přechody po dobu 200 milisekund na stavech vznášedla a aktivního tlačítka. Co je na těchto stylech tak velké, je to, že je můžete použít na téměř jakýkoliv prvek, na který lze kliknout. Tlačítka, kotevní odkazy, prvky formuláře nebo cokoliv jiného, co považujete za vhodné - i když tyto styly by měly být používány řídce, aby nedošlo k přetížení vašeho návrhu.

Taková tlačítka jsou často ukládána nejlépe stejným způsobem, jakým je používá Mozilla. Připojte tyto styly do svého blogu, kde máte tlačítka ke stažení zdarma nebo něco podobného. Uživatelé milují interakci s jedinečnými rozhraními a to často znamená mnohem vyšší procento vašeho proklikového hodnocení.

Demo

Závěrečné myšlenky

Doufám, že si z této kolekce technik stínování boxů můžete odnést nějaké skvělé lekce. Existuje mnoho různých oblastí, na které byste se mohli zaměřit, včetně formulářů, modálních boxů, tlačítek, panelů nástrojů a dokonce i úplného rozvržení webových stránek.

Neváhejte implementovat některý z těchto stínových efektů do částí vlastního webu. Existuje spousta dalších technik, ale tato kolekce je ideální pro začátečníky i pokročilé vývojáře. Také pokud máte nějaké návrhy nebo dotazy týkající se článku, můžete se s námi podělit v níže uvedené oblasti pro komentáře.