10 kreatywnych technik przy użyciu CSS3 Box Shadow

W ciągu ostatnich kilku lat zaobserwowaliśmy ogromną liczbę postępów w tworzeniu stron internetowych CSS3. Popularne witryny w całym Internecie zaczęły wprowadzać wiele unikalnych stylów, takich jak zaokrąglone rogi i zapytania multimedialne dostosowane do urządzeń mobilnych. Co ważniejsze, otworzyło to drogę do prototypowania kreatywnych interfejsów w ciągu kilku minut.

W tym artykule chcę się podzielić 10 fragmentów kodu odnoszących się do genialnych wzorów cieni pudełkowych CSS3. Wyjaśnię, jak działa kod i jak możesz zaimplementować każdy cień pudełka na swojej stronie internetowej.

Wszystkie te style są przypisywane świetnemu wpływowi designu z innych popularnych stron internetowych. Jest to świetny przykład tego, jak obecni programiści budują wpływowe trendy na przyszłość projektowania stron internetowych.

1. Naprawiono górny pasek narzędzi

Rumuński serwis społecznościowy Trilulilu korzysta z pływającego górnego paska narzędzi wokół całej witryny. Można to szybko utworzyć za pomocą pozycja: naprawiona; właściwość na dowolnym elemencie górnego paska. Ale ten dodatkowy cień pudła przenosi efekt na zupełnie nowy poziom.

#banner position: fixed; wysokość: 60px; szerokość: 100%; top: 0; po lewej: 0; border-top: 5px solid # a1cb2f; background: #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 line-height: 60px;

Zauważysz, że właściwość box-shadow jest właściwie skonfigurowana z dość prostą kombinacją wartości. Cień spadnie poniżej pudełka i rozmyje się o 3 piksele po obu stronach.

Możemy użyć rgba () metoda nakładania niewielkiego krycia na cień, więc element nie wydaje się zbyt ciemny. To subtelny dodatek, który z pewnością przyciągnie uwagę odwiedzających.

Próbny

2. Rozwijana sub-nawigacja

Oto kolejna metoda cienia kreatywnego zastosowana do podmenu skalarnego. Podobny efekt można zobaczyć na Entrepreneur, gdy najedziesz na każdy z głównych głównych łączy nawigacyjnych. Jest to zdecydowanie trudniejsze do skonfigurowania, ale warte cierpliwości.

#bar display: block; wysokość: 45px; tło: # 22385a; padding-top: 5px; margin-bottom: 150px; pozycja: względna;  #bar ul margin: 0px 15px; font-family: Candara, Calibri, „Segoe UI”, Segoe, Arial, sans-serif;  #bar ul li background: # 22385a; Blok wyświetlacza; rozmiar czcionki: 1.2em; pozycja: względna; float: left;  #bar ul li a display: block; kolor: # fffff7; line-height: 45px; waga czcionki: pogrubiona; padding: 0px 10px; dekoracja tekstowa: brak; z-index: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; background: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav display: block; left: 14px; top: 48px; z-index: -1; szerokość: 500px; pozycja: absolutna; wysokość: 90px; border: 1px solid # edf0f3; border-top: 0; padding: 10px 0 10px 10px; przepełnienie: ukryte; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -moz-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); box-shadow: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Siła = 3, Kierunek = 180, Kolor =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Siła = 3, Kierunek = 180, Kolor = "# 333333");

Linki nawigacyjne można stylizować, aby zmienić kolor po wybraniu lub najechaniu myszką. Dodaję również zaokrąglone obramowania do linków i rozwijanego menu. Daje to ładniejsze wrażenie niż twarde krawędzie dookoła. Dobrze wykorzystuję także -ms-filter i filtr właściwości, które są wyłącznie własnością Internet Explorer.

Jeśli skonfigurujesz pełny system nawigacji, będziesz mógł zmienić wyświetlanie na brak i ukryć menu po załadowaniu strony. Następnie za pomocą jQuery możesz kierować zdarzenie .hover () i wyświetlać pasek podrzędny ze zaktualizowaną treścią.

Próbny

3. Błyszczący przycisk cienia

Jest to prawdopodobnie jeden z moich ulubionych stylów do tworzenia tylko dlatego, że jest dynamiczny na stronie. Jeśli nie możesz powiedzieć, jest to mały niebieski przycisk znajdujący się na stronie głównej YouTube po pierwszym zalogowaniu.

blues color: #fff; szerokość: 190px; wysokość: 35px; cursor: pointer; font-family: Arial, Tahoma, sans-serif; font-size: 1.0em; waga czcionki: pogrubiona; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-width: 1px; border-color: # 0053a6 # 0053a6 # 000; kolor tła: # 6891e7; background-image: -moz-linear-gradient (góra, # 4495e7 0, # 0053a6 100%); background-image: -ms-linear-gradient (góra, # 4495e7 0, # 0053a6 100%); background-image: -o-linear-gradient (góra, # 4495e7 0, # 0053a6 100%); background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0, # 4495e7), zatrzymanie koloru (100%, # 0053a6)); background-image: -webkit-linear-gradient (góra, # 4495e7 0, # 0053a6 100%); background-image: gradient liniowy (do dołu, # 4495e7 0, # 0053a6 100%); text-shadow: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: wstawka 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: wstawka 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); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: wstawka 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -ms-box-shadow: wstawka 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: wstawka 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); box-shadow: wstawka 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); background-image: -moz-linear-gradient (góra, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-linear-gradient (góra, # 3a8cdf 0, # 0053a6 100%); background-image: -o-linear-gradient (góra, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, kolor-stop (0, # 3a8cdf), zatrzymanie koloru (100%, # 0053a6)); background-image: -webkit-linear-gradient (góra, # 3a8cdf 0, # 0053a6 100%); background-image: gradient liniowy (do dołu, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: wstawka 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -ms-box-shadow: wstawka 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -webkit-box-shadow: wstawka 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; box-shadow: wstawka 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); background-image: -moz-linear-gradient (góra, # 005ab4 0, # 175ea6 100%); background-image: -ms-linear-gradient (góra, # 005ab4 0, # 175ea6 100%); background-image: -o-linear-gradient (góra, # 005ab4 0, # 175ea6 100%); background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, kolor-stop (0, # 005ab4), zatrzymanie koloru (100%, # 175ea6)); background-image: -webkit-linear-gradient (góra, # 005ab4 0, # 175ea6 100%); background-image: gradient liniowy (do dołu, # 005ab4 0, # 175ea6 100%);

Cały kod przycisku jest bardzo interesujący, ale próbujemy wspierać jak najwięcej przeglądarek. Istnieją cienie tekstowe i cienie skrzynek z towarzyszącym im wsparciem dla MS Internet Explorer 7+. Również ustawiamy zdjęcie w tle właściwość z gradientami CSS3 w wielu różnych prefiksach specyficznych dla dostawcy.

Ale jeśli kochasz ten styl projektowania, to uwaga i aktywne stany również przyciągną twoją uwagę. Zasadniczo aktualizujemy obramowanie, aby uwzględnić niektóre cienie wewnątrz, gdy naciskasz, aktualizując gradient tła, aby był nieco ciemniejszy.

Ponieważ na przycisku nie ma żadnych obrazów, możesz zaktualizować wartości heksadecymalne i przekształcić je, aby wtopić się w praktycznie dowolny schemat kolorów.

Próbny

4. Menu wysuwane powiadomień

Nie jestem wielkim użytkownikiem Facebooka, ale zauważyłem niektóre techniki interfejsu użytkownika z ich przeprojektowania. To menu wysuwane można porównać do wyskakujących powiadomień lub zapytań znajomych na stronie głównej.

.wysuwany szerokość: 310px; margines: 10px; rozmiar czcionki: 11px; pozycja: względna; font-family: „Lucida Grande”, Tahoma, Verdana, Arial, sans-serif; kolor tła: biały; padding: 9px 11px; tło: rgba (255, 255, 255, 0.9); border: 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; border-radius: 3px;  .flyout #tip background-image: url ('images / tip.png'); powtórz tło: nie powtarzaj; background-size: auto; wysokość: 11px; pozycja: absolutna; top: -11px; left: 25px; szerokość: 20px;  .flyout h2 text-transform: uppercase; kolor: # 666; rozmiar czcionki: 1.2em; padding-bottom: 5px; margin-bottom: 12px; border-bottom: 1px bryła #dcdbda;  .flyout p padding-bottom: 25px; font-size: 1.1em; kolor: # 222;

Nie ma tu zbyt wiele nowego kodu do wyginania umysłu. Używam małego .Wskazówka klasa z wewnętrznym elementem zakresu, aby dodać trójkąt podpowiedzi. Możliwe jest tworzenie czystych trójkątów CSS3, ale ta metoda nie jest łatwa, jak można sobie wyobrazić. Jeśli wolisz tę metodę, być może warto hackować coś razem. Ale właściwości rotacji CSS3 nie są obsługiwane wszędzie; tymczasem obrazy nie wymagają żadnej metody awaryjnej.

Próbny

5. Owijarka Apple Page

Jest tak wiele imponujących cieni pudełek CSS3, jakie można znaleźć na oficjalnej stronie firmy Apple. Poniższy przykład to mały pojemnik z kilkoma rozpiętościami kolumn. Przeglądając układ Apple zauważysz, że wiele ich stron składa się z wielu pudełek.

.applewrap szerokość: 100%; Blok wyświetlacza; wysokość: 150px; tło: biały; border: 1px solid; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba (0,0,0,0,3) 0 1px 3px; box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: left; wielkość pudełka: obramowanie; szerokość: 250px; wysokość: 150px; dopełnienie: 16px 7px 6px 22px; czcionka: 12px / 18px „Lucida Grande”, „Lucida Sans Unicode”, Helvetica, Arial, Verdana, sans-serif; kolor: # 343434; border-right: 1px solid #dadada;

Można utworzyć podobną stronę podzieloną według pól zawartości o różnej szerokości i wysokości. Chociaż umieściłem kilka kolumn w tym demo, nie jest to żadna niezbędna technika formatowania. Cień pudełka najlepiej pasuje do białego / szarego tła. Ale myślę, że wyświetlanie na dowolnym jasnym kolorze wyglądałoby całkiem nieźle.

Próbny

6. Zawartość Apple Box

Ten inny styl zawartości strony internetowej firmy Apple jest używany głównie do projektowania kolumn. Są to przede wszystkim na dole strony prezentujące oferty i inne powiązane informacje. To zupełnie inny styl projektowania, ponieważ cień pudełka wyświetla się od góry do dołu.

.applebox width: auto; wysokość: 85px; wielkość pudełka: obramowanie; tło: # f5f5f5; dopełnienie: 20px 20px 10px; margin: 10px 0 20px; border: 1px solid #ccc; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: wstawka 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: wstawka 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: wstawka 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; float: left; margin: 0 0 0 30px;

Nie sądzę, aby ten kod był zbyt trudny do śledzenia i skopiuj go na inny kontener div. Jedynym cieniem pudełka, którego używamy, jest użycie wstawka z kolorowymi kodami rgba alpha-transparent. Tak więc, mimo że cień jest ustawiony na czystą czerń, wyświetlamy tylko krycie o 30%.

Próbny

7. Polecane linki

To jest prawdopodobnie mój ulubiony styl cieniowania pudełek z aktualnej strony Apple. Powinieneś znaleźć styl demonstracyjny tej techniki na stronie iCloud z serią pływających linków.

.applefeature height: 150px; margin: 8px; vertical-align: top; wyświetlacz: blok śródliniowy;  .applefeature a display: block; szerokość: 168px; wysokość: 140px; border: 1px solid #ccc; kolor: # 333; dekoracja tekstowa: brak; waga czcionki: pogrubiona; line-height: 1.3em; tło: # f7f7f7; -webkit-box-shadow: wstawka 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: wstawka 0 1px 2px rgba (0, 0, 0, .3); box-shadow: wstawka 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  .applefeature a: hover background: #fafafa; background: -webkit-gradient (liniowy, 0% 0%, 0% 100%, od (#fff), do (# f7f7f7)); tło: -moz-liniowy-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: wstawka 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: wstawka 0 1px 2px rgba (0,0,0, .3); box-shadow: wstawka 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  .applefeature a img display: block; margin: 26px auto 4px;  .applefeature a h4 display: block; szerokość: 160px; rozmiar czcionki: 1.3em; font-family: Arial, Tahoma, sans-serif; kolor: # 646464; wyrównywanie tekstu: środek;

Te polecane linki są ustawione na stałą szerokość i zawierają odrębną ikonę i wyświetlany tekst. Przykład Apple'a wykorzystuje podobny cień skrzynki, jak widzieliśmy w poprzednim polu zawartości. jednak całe pole można teraz aktywować jako link który obejmuje zarówno :wahać się i :aktywny stany. Pole to zapewnia dużą elastyczność i powinieneś spróbować pobawić się kodem źródłowym.

Możliwe jest skrócenie wysokości / szerokości i utworzenie znacznie mniejszej listy linków. Mogą to być zestawy rozdziałów lub stron w artykule lub możesz ograniczyć podmenu do ikon linków. To naprawdę świetny zestaw nowszych technik CSS3, które pokazują, jak dużą moc posiadasz jako projektant stron internetowych.

Próbny

8. Obrazy w ramkach

Dodałem szare tło na tym przykładzie, dzięki czemu można lepiej zobaczyć style cieni. To pole jest podobne do polecanych zdjęć podglądu na wordpress.com, z wyjątkiem tego, że dodałem nieco więcej głębi do kodu źródłowego.

.wpframe background: #fff; border-radius: 2px; -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;

Ponieważ obrazy mają małe wypełnienie po obu stronach, ta ramka pojawia się jako duża biała ramka. Zawsze możesz zaktualizować kolor tła, a nawet dodać małą zewnętrzną ramkę, aby oddzielić obraz od tła. Ale ten dość uproszczony zestaw stylów można wprowadzić w różne techniki cieniowania pudeł. Pobaw się kodem i zobacz, jak możesz ulepszyć projekty graficzne na własnej stronie internetowej.

Próbny

9. Świecące pola wejściowe

Mam ten pomysł po kilkukrotnym odwiedzeniu strony logowania Pinterest. Ich animowane style naprawdę pokazują niektóre wymowne przykłady wielu wbudowanych cieni pól, zarówno na zewnątrz, jak i wewnątrz.

.formwrap display: block; margin-bottom: 15px;  .formwrap etykieta display: inline-block; szerokość: 80px; rozmiar czcionki: 11px; waga czcionki: pogrubiona; kolor: # 444; font-family: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relative; szerokość: 250px; rozmiar czcionki: 17px; font-family: „Helvetica Neue”, Arial, sans-serif; waga czcionki: normalna; tło: # f7f8f8; kolor: # 7c7c7c; wysokość linii: 1.4; padding: 6px 12px; zarys: brak; przejście: wszystkie 0,2s łatwości wejścia 0s; -webkit-transition: wszystkie 0.2s łatwości wejścia 0s; -moz-transition: wszystkie 0.2s łatwości wejścia 0s; border: 1px solid # ad9c9c; border-radius: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0,2) wstawka, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; background: #fff; kolor: # 5d5d5d; box-shadow: wstawka 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: wstawka 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: wstawka 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);

Chociaż początkowe style są bardzo atrakcyjne, pociągają mnie efekty przejścia podczas skupiania się na każdym polu wprowadzania. Możesz przejść między nimi i zobaczyć natychmiastową różnicę w wielu właściwościach. Zewnętrzny cień świecącego pola jest stosowany wraz ze zaktualizowanym wstawionym cieniem. Również Kolor tekstu staje się jaśniejszy, gdy koncentrujesz się na określonym wejściu, a następnie zanika w miarę rozogniskowania.

Nawet kopiowanie jednego z tych efektów znacznie poprawiłoby wrażenia użytkownika z pól formularza. Upewnij się, że nie posuwasz się za daleko za burtę do punktu, w którym twoje formularze są ledwo użyteczne. Jednak większość odwiedzających będzie cieszyć się przyjemnymi efektami estetycznymi, które również zachęcają do interakcji i dalszego zaangażowania w Twoją stronę.

Próbny

10. Elastyczne przyciski Shadow

Te unikalne przyciski cieni są stylizowane z powolnym przejściem podczas zawisu i aktywnych stanów. Podobne przykłady można znaleźć na stronie głównej Mozilli z ich dużymi “Pobierz Firefoksa” przycisk. Niektórych box-shadow właściwości łączą trzy różne cienie w jedno polecenie.

.blu-btn display: inline-block; -moz-border-radius: .25em; granica-promień: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0,2); kolor tła: # 276195; background-image: -moz-linear-gradient (# 3c88cc, # 276195); background-image: -ms-linear-gradient (# 3c88cc, # 276195); background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, # 3c88cc), zatrzymanie koloru (100%, # 276195)); background-image: -webkit-linear-gradient (# 3c88cc, # 276195); background-image: -o-linear-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)"; background-image: linear-gradient (# 3c88cc, # 276195); granica: 0; cursor: pointer; kolor: #fff; dekoracja tekstowa: brak; wyrównywanie tekstu: środek; rozmiar czcionki: 16px; padding: 0px 20px; wysokość: 40px; line-height: 40px; min-width: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: wszystkie liniowe .2s; -moz-przejście: wszystkie liniowe .2s; -o-przejście: wszystkie liniowe .2s; -ms-przejście: wszystkie liniowe .2s; przejście: wszystkie liniowe .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0,3), wstawka 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0.3), wstawka 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0.3), wstawka 0 12px 20px 2px # 3089d8;  .blu-btn: active -webkit-box-shadow: wstawka 0 2px 0 0 rgba (0,0,0,0.2), wstawka 0 12px 20px 6px rgba (0,0,0,0,2), wstawka 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: wstawka 0 2px 0 0 rgba (0,0,0,0.2), wstawka 0 12px 20px 6px rgba (0,0,0,0,2), wstawka 0 0 2px 2px rgba (0,0, 0,0,3); box-shadow: wstawka 0 2px 0 0 rgba (0,0,0,0.2), wstawka 0 12px 20px 6px rgba (0,0,0,0,2), wstawka 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-border-radius: .25em; granica-promień: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0,2); kolor tła: # 659324; background-image: -moz-linear-gradient (# 81bc2e, # 659324); background-image: -ms-linear-gradient (# 81bc2e, # 659324); background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, # 81bc2e), zatrzymanie koloru (100%, # 659324)); background-image: -webkit-linear-gradient (# 81bc2e, # 659324); background-image: -o-linear-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)"; tło-obraz: gradient liniowy (# 81bc2e, # 659324); granica: 0; cursor: pointer; kolor: #fff; dekoracja tekstowa: brak; wyrównywanie tekstu: środek; rozmiar czcionki: 16px; padding: 0px 20px; wysokość: 40px; line-height: 40px; min-width: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: wszystkie liniowe .2s; -moz-przejście: wszystkie liniowe .2s; -o-przejście: wszystkie liniowe .2s; -ms-przejście: wszystkie liniowe .2s; przejście: wszystkie liniowe .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0 , 0,3), wstawka 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0.3), wstawka 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), wstawka 0 -2px 0 0 rgba (0,0,0,0.3), wstawka 0 12px 20px 2px # 85ca26;  .grn-btn: active -webkit-box-shadow: wstawka 0 2px 0 0 rgba (0,0,0,0.2), wstawka 0 12px 20px 6px rgba (0,0,0,0,2), wstawka 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: wstawka 0 2px 0 0 rgba (0,0,0,0.2), wstawka 0 12px 20px 6px rgba (0,0,0,0,2), wstawka 0 0 2px 2px rgba (0,0, 0,0,3); box-shadow: wstawka 0 2px 0 0 rgba (0,0,0,0.2), wstawka 0 12px 20px 6px rgba (0,0,0,0,2), wstawka 0 0 2px 2px rgba (0,0,0,0,3 );

Używam pełnych przejść przez 200 milisekund w stanach aktywacji i aktywacji przycisków. To, co jest tak wspaniałe w tych stylach, to możliwość zastosowania ich do prawie każdego elementu klikalnego. Przyciski, linki kotwiczne, elementy formularza lub cokolwiek innego, co uważasz za właściwe - chociaż te style powinny być używane rzadko, aby nie przeciążać projektu.

Takie przyciski są często zapisywane najlepiej w taki sam sposób, w jaki używa ich Mozilla. Dołącz te style do swojego bloga, w którym znajdują się przyciski do pobierania freebie lub coś podobnego. Użytkownicy uwielbiają interakcję z unikalnymi interfejsami i często przekłada się to na znacznie wyższy procent oceny klikalności.

Próbny

Końcowe przemyślenia

Mam nadzieję, że możesz zabrać kilka świetnych lekcji z tej kolekcji technik cieni pudełkowych. Istnieje wiele różnych obszarów, na których można skupić się, w tym formularze, pola modalne, przyciski, paski narzędzi, a nawet pełne układy witryn.

Zapraszam do wdrożenia dowolnego z tych efektów cienia na części własnej strony internetowej. Istnieje wiele innych technik, ale ta kolekcja jest idealna zarówno dla początkujących, jak i zaawansowanych programistów. Także jeśli masz jakieś sugestie lub pytania dotyczące artykułu, który możesz nam udostępnić w obszarze dyskusji poniżej.