10 Творчески техники с използване на CSS3 Box Shadow

През последните няколко години видяхме огромен брой подобрения в уеб разработката на CSS3. Популярните уебсайтове из целия интернет започнаха да включват много уникални стилове, като заоблени ъгли и медийни заявки, отговарящи на мобилните устройства. Но още по-важно, това отвори вратата за прототипиране на творчески интерфейси за няколко минути.

В тази статия искам да споделя 10 кодови фрагмента, отнасящи се до брилянтния CSS3 дизайн на сянка. Ще ви обясня как работи кодът и как можете да приложите всяка сянка на полето в собствения си уебсайт.

Всички тези стилове се дължат на голямото дизайнерско влияние от други популярни сайтове. Това е чудесен пример за това как настоящите уеб разработчици изграждат впечатляващи тенденции за бъдещето на уеб дизайна.

1. Фиксирана горната лента с инструменти

Румънската служба за социални медии Trilulilu използва плаваща лента с инструменти за целия си уебсайт. Това може да се създаде бързо с помощта на a позиция: фиксирана; собственост върху всеки горен елемент на бара. Но тази допълнителна кутия сянка отнема ефекта на съвсем ново ниво.

#banner position: fixed; височина: 60px; ширина: 100%; отгоре: 0; наляво: 0; border-top: 5px твърдо # a1cb2f; фон: #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-индекс: 999999;  #banner h1 line-height: 60px;  

Ще забележите, че собствеността на box-shadow действително е създадена с доста проста комбинация от стойности. Сянката ще падне под кутията и ще се размаже от 3px от всяка страна.

Можем да използваме RGBA () метод за прилагане на лека непрозрачност върху сянката, така че елементът да не изглежда твърде тъмен. Това е фина добавка, която със сигурност ще привлече вниманието на посетителите ви.

• Демонстрация

2. Падащо под-навигационно падащо меню

Ето още един метод за сенки в творческото поле, приложен върху скаларно падащо подменю. Подобен ефект може да се види и при Предприемач, когато задържите курсора на мишката върху всяка от основните основни навигационни връзки. Това определено е малко по-трудно да се конфигурира, но си струва търпението.

#bar display: block; височина: 45px; фон: # 22385a; подложка: 5px; margin-bottom: 150px; позиция: относителна;  # bar ul margin: 0px 15px; семейство на шрифта: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li фон: # 22385a; дисплей: блок; размер на шрифта: 1.2em; позиция: относителна; поплавък: наляво;  #bar ul li a display: block; цвят: # fffff7; височина на линията: 45px; тегло на шрифта: удебелен; пълнеж: 0px 10px; текст-декорация: няма; z-индекс: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; фон: #fff; радиус: 3px; border-top-right-radius: 3px; -webkit-border-top-left-радиус: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav display: block; ляво: 14px; отгоре: 48px; z-индекс: -1; ширина: 500px; позиция: абсолютна; височина: 90px; граница: 1px твърдо # edf0f3; граница отгоре: 0; подложка: 10px 0 10px 10px; overflow: hidden; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-радиус: 3px; -webkit-border-bottom-right-radius: 3px; радиус на границата отдолу-надясно: 3px; радиус на границата отдолу-надясно: 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 (Сила = 3, Посока = 180, Цвят =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Сила = 3, Посока = 180, Цвят = "# 333333");  

Връзките за навигация могат да бъдат оформени така, че да променят цвета си, когато са избрани или на мишката. Освен това добавям закръглени граници към връзките и над падащото меню. Това дава по-хубаво усещане, отколкото твърди краища наоколо. Аз също използвам добре -MS-филтър и филтър свойства, които са единствено собственост на Internet Explorer.

Ако настроите пълна навигационна система, ще можете да промените настройката на дисплея на нищо и да скриете менюто, след като страницата се зареди. След това с помощта на някои jQuery можете да насочите събитие .hover () и да покажете поднавие с актуализирано съдържание.

• Демонстрация

3. Гланциран бутон на сенките

Вероятно това е един от любимите ми стилове, който трябва да създам само заради динамиката, която се появява на страницата. Ако не можете да кажете, това е малкият син бутон, който се намира на началната страница на YouTube след първото ви влизане.

блус цвят: #fff; ширина: 190px; височина: 35px; курсор: указател; фамилия: Arial, Tahoma, sans-serif; размер на шрифта: 1.0em; тегло на шрифта: удебелен; -moz-border-radius: 2px; -bubkit-border-radius: 2px; граничен радиус: 2px; border-width: 1px; border-color: # 0053a6 # 0053a6 # 000; фонов цвят: # 6891e7; background-image: -moz-линеен градиент (отгоре, # 4495e7 0, # 0053a6 100%); background-image: -ms-линеен градиент (отгоре, # 4495e7 0, # 0053a6 100%); background-image: -о-линеен градиент (отгоре, # 4495e7 0, # 0053a6 100%); background-image: -webkit-gradient (линеен, ляв отгоре, ляво долу, цветен стоп (0, # 4495e7), цветен стоп (100%, # 0053a6)); background-image: -webkit-линеен градиент (отгоре, # 4495e7 0, # 0053a6 100%); background-image: линеен градиент (до дъното, # 4495e7 0, # 0053a6 100%); текстова сянка: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: вмъкване 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: вмъкване 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: вмъкване 0 1px 0 rgba (256, 256, 256, .35); box-shadow: вмъкване 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: вмъкване 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: вмъкване 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: вмъкване 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); box-shadow: вмъкване 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); background-image: -moz-линеен градиент (отгоре, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-линеен градиент (отгоре, # 3a8cdf 0, # 0053a6 100%); background-image: -о-линеен градиент (отгоре, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-gradient (линеен, ляв отгоре, ляво долу, цветен стоп (0, # 3a8cdf), цветно-стоп (100%, # 0053a6)); background-image: -webkit-линеен градиент (отгоре, # 3a8cdf 0, # 0053a6 100%); background-image: линеен градиент (до дъното, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: вмъкване 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: вмъкване 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: вмъкване 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: вмъкване 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-линеен градиент (отгоре, # 005ab4 0, # 175ea6 100%); background-image: -ms-линеен градиент (отгоре, # 005ab4 0, # 175ea6 100%); background-image: -о-линеен градиент (отгоре, # 005ab4 0, # 175ea6 100%); background-image: -webkit-gradient (линейно, ляво отгоре, ляво дъно, цветно-стоп (0, # 005ab4), цветно спиране (100%, # 175ea6)); background-image: -webkit-линеен градиент (отгоре, # 005ab4 0, # 175ea6 100%); background-image: линеен градиент (до дъното, # 005ab4 0, # 175ea6 100%);  

Кодът на целия бутон е много за гледане, но се опитваме да поддържа възможно най-много браузъри. Има текстови сенки и сенки с придружаваща поддръжка за MS Internet Explorer 7+. Също така определяме фон изображение свойство с CSS3 градиенти над широк брой представки, специфични за производителя.

Но ако обичате този стил на дизайн тогава Hover и активните държави също ще привлекат вниманието ви. Ние основно актуализираме границата, за да включим някои сенки вътре, докато натискате надолу, докато актуализирате градиента на фона, за да се покаже по-тъмен.

Тъй като няма изображения на бутона, можете да актуализирате шестнадесетичните стойности и да преобразите това, за да се смеси с практически всяка цветова схема.

• Демонстрация

4. Известия Меню за разминаване

Аз не съм голям потребител на Facebook, но съм забелязал някои техники на потребителския интерфейс от техните редизайн. Това разгъващо се меню може да се сравни с изскачащите съобщения или заявки за приятели, които се намират на началната страница.

.flyout ширина: 310px; margin-top: 10px; размер на шрифта: 11px; позиция: относителна; семейство на шрифта: „Lucida Grande“, Tahoma, Verdana, Arial, sans-serif; фонов цвят: бял; пълнеж: 9px 11px; фон: rgba (255, 255, 255, 0.9); граница: 1px твърдо # 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); -bubkit-border-radius: 3px; -moz-border-radius: 3px; граничен радиус: 3px;  .flyout #tip background-image: url ('images / tip.png'); фон-повторение: не се повтаря; размер на фона: авто; височина: 11px; позиция: абсолютна; отгоре: -11px; наляво: 25px; ширина: 20px;  .flyout h2 text-transform: главни букви; цвят: # 666; размер на шрифта: 1.2em; подложка-дъно: 5px; margin-bottom: 12px; граница отдолу: 1px твърдо #dcdbda;  .flyout p padding-bottom: 25px; размер на шрифта: 1.1em; цвят: # 222;  

Тук няма много нов код, който да се превърне в ум. Използвам малък .бакшиш клас с вътрешен елемент на участък, за да добавите триъгълник подсказка. Възможно е да се създадат чисти триъгълници CSS3, но този метод не е лесен, както можете да си представите. Ако предпочитате този метод, може би си струва да хакнете нещо заедно. Но свойствата на ротация на CSS3 не се поддържат навсякъде; Междувременно изображенията не изискват никакъв резервен метод.

• Демонстрация

5. Apple Page Wrapper

Има толкова много впечатляващи CSS3 сенки, които можете да намерите на официалния сайт на Apple. Този пример по-долу е контейнер с малка кутия с няколко разстояния между колоните. Когато разглеждате оформлението на Apple, ще забележите много от техните страници, съставени от множество опаковъчни кутии.

.ябълкова обвивка ширина: 100%; дисплей: блок; височина: 150px; фон: бял; граница: 1px твърдо; border-color: # e5e5e5 #dbdbdb # d2d2d2; -bubkit-border-radius: 4px; -moz-border-radius: 4px; граничен радиус: 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; оразмеряване на кашони: гранична кутия; ширина: 250px; височина: 150px; пълнеж: 16px 7px 6px 22px; шрифт: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; цвят: # 343434; Граница вдясно: 1px твърдо # дадада;  

Можете да съберете подобна страница, разделена на полета със съдържание с различна ширина и височина. Въпреки че в тази демонстрация съм сложил няколко колони, това не е необходима техника за форматиране по какъвто и да е начин. Сянката на кутията ще се побере най-добре на бял / сив фон. Но мисля, че показването на някакъв светъл цвят ще изглежда доста добре.

• Демонстрация

6. Apple Content Box

Този друг стил на съдържание поле на уебсайта на Apple се използва най-вече за колони дизайн. Те са предимно в долната част на страницата, показващи сделки и друга свързана информация. Това е изцяло различен стил на дизайн, при който сянката на кутията се показва от горе надолу.

.applebox width: auto; височина: 85px; оразмеряване на кашони: гранична кутия; фон: # f5f5f5; подложка: 20px 20px 10px; марж: 10px 0 20px; граница: 1px твърдо #ccc; граничен радиус: 4px; -bubkit-border-radius: 4px; -moz-border-radius: 4px; -ограничен радиус: 4px; -webkit-box-shadow: вмъкване 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: вмъкване 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: вмъкване 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col ширина: 140px; поплавък: наляво; марж: 0 0 0 30px;  

Не мисля, че този код трябва да бъде твърде труден за проследяване и копиране в друг контейнер на div. Единствената сянка, която прилагаме, използва добавям с rgba алфа-прозрачни цветни кодове. Така че, макар че имаме капка сянка, зададена на чисто черно, показваме само около 30% непрозрачност.

• Демонстрация

7. Препоръчани връзки

Това е може би любимият ми стил на сянка от текущия уебсайт на Apple. Трябва да намерите стил на живо на тази техника на страницата на iCloud с поредица от плаващи кутии за връзки.

.applefeature височина: 150px; марж: 8 пиксела; вертикално подравняване: отгоре; дисплей: вграден блок;  .applefeature a display: block; ширина: 168px; височина: 140 пиксела; граница: 1px твърдо #ccc; цвят: # 333; текст-декорация: няма; тегло на шрифта: удебелен; line-height: 1.3em; фон: # f7f7f7; -webkit-box-shadow: вмъкване 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: вмъкване 0 1px 2px rgba (0, 0, 0, .3); box-shadow: вмъкване 0 1px 2px rgba (0, 0, 0, .3); -bubkit-border-radius: 4px; -moz-border-radius: 4px; граничен радиус: 4px;  .applefeature a: hover фон: #fafafa; фон: -webkit-градиент (линеен, 0% 0%, 0% 100%, от (#fff), до (# f7f7f7)); фон: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: вмъкване 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: вмъкване 0 1px 2px rgba (0,0,0, .3); box-shadow: вмъкване 0 1px 2px rgba (0,0,0, .3); -bubkit-border-radius: 4px; -moz-border-radius: 4px; граничен радиус: 4px;  .applefeature a img display: block; марж: 26px авто 4px;  .applefeature a h4 display: block; ширина: 160px; размер на шрифта: 1.3em; фамилия: Arial, Tahoma, sans-serif; цвят: # 646464; text-align: center;  

Тези включени връзки са с фиксирана ширина и включват отделна икона и текст на дисплея. Примерът на Apple използва подобна сянка на кутията, както видяхме в предишното поле за съдържание. въпреки това сега цялото поле може да бъде активирано като връзка която включва и двете : навъртам и :активен състояния. Има много гъвкавост с тази кутия за връзки и трябва да опитате да играете с изходния код.

Възможно е да се скъси височината / ширината и да се създаде много по-малък списък от връзки. Те могат да бъдат набор от глави или страници в статия или можете да направите подменюто ограничено с икони за връзки. Честно казано, това е голям набор от по-нови техники на CSS3, които показват колко сила имате като уеб дизайнер.

• Демонстрация

8. Рамкирани изображения

Добавих сив фон към този пример, за да можете по-ясно да виждате стиловете на сянка. Тази кутия е подобна на представените снимки за преглед на wordpress.com, освен че добавих малко повече дълбочина към изходния код.

.wpframe фон: #fff; граничен радиус: 2px; -bubkit-border-radius: 2px; -moz-border-radius: 2px; пълнеж: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;  

Тъй като на изображенията се дава малка подложка от двете страни, тази рамка се появява като голяма бяла рамка. Винаги можете да актуализирате цвета на фона или дори да добавите малка външна граница, за да разделите изображението от фона. Но този сравнително опростен набор от стилове може да се маневрира в различни техники на сянка. Играйте с кода и вижте как можете да подобрите дизайна на изображението на собствения си уебсайт.

• Демонстрация

9. Светещи полета за въвеждане

Получих тази идея след като няколко пъти посетих страницата за вход в Pinterest. Техните анимирани стилове наистина показват някои красноречиви примери за множество вградени сенки, както външни, така и вмъкнати.

.formwrap display: block; margin-bottom: 15px;  .formwrap етикет display: inline-block; ширина: 80px; размер на шрифта: 11px; тегло на шрифта: удебелен; цвят: # 444; фамилия: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relative; ширина: 250px; размер на шрифта: 17px; семейство шрифт: "Helvetica Neue", Arial, sans-serif; тегло на шрифта: нормално; фон: # f7f8f8; цвят: # 7c7c7c; линия-височина: 1.4; пълнеж: 6px 12px; контур: няма; преход: всички 0.2s са лесни за излизане; -webkit-transition: всички 0.2s са лесни за излизане; -moz-transition: всички 0.2s са лесни за излизане; граница: 1px солидна # ad9c9c; граничен радиус: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0.2), 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; фон: #fff; цвят: # 5d5d5d; box-shadow: вмъкване 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: вмъкване 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: вмъкване 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);  

Въпреки че първоначалните стилове са много привлекателни, аз съм привлечен от ефекти на прехода, докато фокусирате върху всяко поле за въвеждане. Можете да поставите между тях и да видите непосредствената разлика в толкова много свойства. Външната сянка на светещата кутия се прилага заедно с актуализирана вмъкната сянка. Също така Цветът на текста става по-светъл, когато сте фокусирани върху конкретен вход, след това избледнявате, когато се разфокусирате.

Дори копирането върху един от тези ефекти значително ще подобри потребителското изживяване на вашите формулярни полета. Бъдете сигурни, че не отидете твърде далеч зад борда до точката, където вашите форми са едва използваеми. Въпреки това повечето посетители ще се насладят на приятни естетически ефекти, които също насърчават взаимодействието и по-нататъшното участие в уебсайта ви.

• Демонстрация

10. Еластични сенчести бутони

Тези уникални сенки бутони са оформени с бавен преход по време на навъртане и активни състояния. Можете да намерите подобни примери на началната страница на Mozilla с техните големи “Изтеглете Firefox” бутон. Някои от кутия сянка свойствата всъщност комбинират три различни сенки заедно в една команда.

.blu-btn дисплей: вграден блок; -moz-border-radius: .25em; граничен радиус: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.2); фонов цвят: # 276195; background-image: -moz-линеен градиент (# 3c88cc, # 276195); background-image: -ms-линеен градиент (# 3c88cc, # 276195); background-image: -webkit-gradient (линейно, ляво отгоре, ляво долу, цветен стоп (0%, # 3c88cc), цветно спиране (100%, # 276195)); background-image: -webkit-линеен градиент (# 3c88cc, # 276195); background-image: -o-линеен градиент (# 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: линеен градиент (# 3c88cc, # 276195); граница: 0; курсор: указател; цвят: #fff; текст-декорация: няма; text-align: center; размер на шрифта: 16px; пълнеж: 0px 20px; височина: 40px; височина на линията: 40px; min-width: 100px; текстова сянка: 0 1px 0 rgba (0,0,0,0.35); фамилия: Arial, Tahoma, sans-serif; -webkit-transition: всички линейни .2s; -moz-transition: всички линейни .2s; -о-преход: всички линейни .2s; -ms-transition: всички линейни .2s; преход: всички линейни .2s .blu-btn: hover, .blu-btn: фокус -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), вмъкване 0 -2px 0 0 rgba (0,0,0, 0, 3), вставка 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.3), вмъкване 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.3), вмъкване 0 12px 20px 2px # 3089d8;  .blu-btn: активен -webkit-box-shadow: вмъкване 0 2px 0 0 rgba (0,0,0,0.2), вмъкване 0 12px 20px 6px rgba (0,0,0,0.2), вмъкване 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: вмъкване 0 2px 0 0 rgba (0,0,0,0.2), вмъкване 0 12px 20px 6px rgba (0,0,0,0.2), вмъкване 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: вмъкване 0 2px 0 0 rgba (0,0,0,0.2), вмъкване 0 12px 20px 6px rgba (0,0,0,0.2), вмъкване 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-border-radius: .25em; граничен радиус: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.2); фонов цвят: # 659324; background-image: -moz-линеен градиент (# 81bc2e, # 659324); background-image: -ms-линеен градиент (# 81bc2e, # 659324); background-image: -webkit-gradient (линеен, ляв отгоре, ляво долу, цветен стоп (0%, # 81bc2e), цветно спиране (100%, # 659324)); background-image: -webkit-линеен градиент (# 81bc2e, # 659324); background-image: -о-линеен градиент (# 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)"; background-image: линеен градиент (# 81bc2e, # 659324); граница: 0; курсор: указател; цвят: #fff; текст-декорация: няма; text-align: center; размер на шрифта: 16px; пълнеж: 0px 20px; височина: 40px; височина на линията: 40px; min-width: 100px; текстова сянка: 0 1px 0 rgba (0,0,0,0.35); фамилия: Arial, Tahoma, sans-serif; -webkit-transition: всички линейни .2s; -moz-transition: всички линейни .2s; -о-преход: всички линейни .2s; -ms-transition: всички линейни .2s; преход: всички линейни .2s;  .grn-btn: hover, .grn-btn: focus 0,3), вмъкване 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.3), вмъкване 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), вмъкване 0 -2px 0 0 rgba (0,0,0,0.3), вмъкване 0 12px 20px 2px # 85ca26;  .grn-btn: активен -webkit-box-shadow: вмъкване 0 2px 0 0 rgba (0,0,0,0.2), вмъкване 0 12px 20px 6px rgba (0,0,0,0.2), вмъкване 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: вмъкване 0 2px 0 0 rgba (0,0,0,0.2), вмъкване 0 12px 20px 6px rgba (0,0,0,0.2), вмъкване 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: вмъкване 0 2px 0 0 rgba (0,0,0,0.2), вмъкване 0 12px 20px 6px rgba (0,0,0,0.2), вмъкване 0 0 2px 2px rgba (0,0,0,0,3 );  

Използвам пълни преходи за 200 милисекунди при състояния на бутоните и активните бутони. Какво е толкова голямо в тези стилове е, че можете да ги приложите към почти всеки елемент, който може да се клика. Бутони, връзки за котва, елементи на формуляри или нещо друго, което според вас е подходящо - въпреки че тези стилове трябва да се използват рядко, за да не претоварват дизайна ви.

Бутоните като тези често се съхраняват най-добре по същия начин, по който ги използва Mozilla. Прикрепете тези стилове в блога си, където имате бутони за безплатни изтегляния или нещо подобно. Потребителите обичат да си взаимодействат с уникални интерфейси това често се превръща в много по-висок процент за Вашата оценка на кликване.

• Демонстрация

Заключителни мисли

Надявам се, че можете да вземете някои велики уроци от тази колекция от техники за сянка на кутии. Има много различни области, в които можете да се съсредоточите, включително формуляри, модални кутии, бутони, ленти с инструменти и дори пълни оформления на сайта.

Чувствайте се свободни да приложите някой от тези ефекти в сянка в части от собствения си уебсайт. Има много други техники, но тази колекция е идеална както за начинаещи, така и за напреднали разработчици. Също така, ако имате някакви предложения или въпроси относно статията, можете да споделите с нас в полето за коментари по-долу.