10 Творчих методів використання CSS3 Box Shadow

Ми бачили величезну кількість досягнень у веб-розробці CSS3 лише за останні кілька років. Популярні веб-сайти по всьому Інтернету почали включати багато унікальних стилів, таких як закруглені кути і відповіді на запити мобільних пристроїв. Але що ще більш важливо, це відкрило двері для творчих інтерфейсів для прототипу за лічені хвилини.

У цій статті я хочу поділитися 10 фрагментів коду, що відносяться до блискучих моделей CSS3. Я поясню, як працює код і як ви можете реалізувати кожну скриньку вікна на ваш власний веб-сайт.

Всі ці стилі приписані великому дизайнерському впливу інших популярних веб-сайтів. Це чудовий приклад того, як сучасні веб-розробники створюють вражаючі тенденції для майбутнього веб-дизайну.

1. Виправлена ​​верхня панель інструментів

Румунська соціальна мережа Trilulilu використовує плаваючу верхню панель інструментів по всьому сайту. Це можна швидко створити за допомогою a положення: фіксований; властивість будь-якого верхнього елемента бару. Але ця додаткова коробка тіні впливає на новий рівень.

#banner position: fixed; висота: 60px; ширина: 100%; зверху: 0; ліворуч: 0; border-top: 5px solid # 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; font-weight: bold; оббивка: 0px 10px; текст-прикраса: немає; z-індекс: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; фон: #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; ліворуч: 14px; зверху: 48px; z-індекс: -1; ширина: 500px; позиція: абсолютна; висота: 90px; кордон: 1px твердий # edf0f3; бордюр: 0; оббивка: 10px 0 10px 10px; переповнення: приховано; -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 (Strength = 3, Direction = 180, Color =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color = "# 333333");  

Посилання на навігацію можуть бути оформлені для зміни кольору при виборі або при наведенні миші. Я також додаю кілька закруглених кордонів на посилання та над випадаючим меню. Це дає краще відчуття, а не жорсткі краї навколо. Я також добре використовую -ms-фільтр і фільтр властивості, які належать виключно до Internet Explorer.

Якщо ви налаштуєте повну навігаційну систему, ви зможете змінити налаштування дисплея на нічого і приховати меню після завантаження сторінки. Потім за допомогою деяких jQuery можна націлити подію .hover () і відобразити панель subnav з оновленим вмістом.

• Демо

3. Глянсова кнопка "Тінь"

Можливо, це один з моїх улюблених стилів для створення лише тому, наскільки динамічно він з'являється на сторінці. Якщо ви не можете сказати, це маленька синя кнопка, знайдена на домашній сторінці YouTube після першого входу.

blues color: #fff; ширина: 190px; висота: 35px; курсор: покажчик; сімейство шрифтів: Arial, Tahoma, sans-serif; розмір шрифту: 1.0em; font-weight: bold; -moz-border-radius: 2px; -webkit-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-градієнт (лінійний, лівий верхній, лівий нижній, колір-стоп (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: -o-лінійний градієнт (зверху, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-градієнт (лінійний, лівий верхній, лівий нижній, колір-стоп (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: -o-лінійний градієнт (зверху, # 005ab4 0, # 175ea6 100%); background-image: -webkit-градієнт (лінійний, лівий верхній, лівий нижній, колір-стоп (0, # 005ab4), колір-стоп (100%, # 175ea6)); background-image: -webkit-лінійний градієнт (зверху, # 005ab4 0, # 175ea6 100%); background-image: лінійний градієнт (донизу, # 005ab4 0, # 175ea6 100%);  

Коди всіх кнопок дуже багато, але ми намагаємося підтримувати якомога більше браузерів. Існують текстові тіні та тіньові вікна з супровідною підтримкою MS Internet Explorer 7+. Також ми встановлюємо фонове зображення властивість з градієнтами CSS3 над великою кількістю префіксів, специфічних для виробника.

Але якщо ви любите цей стиль дизайну, то Ваша увага також приверне уваги і активних станів. Ми, в основному, оновлюємо кордон, щоб включити деякі тіні всередину, коли ви натискаєте вниз, під час оновлення градієнта фону, щоб показати трохи темніше.

Оскільки на кнопці немає зображень, ви можете оновити шістнадцяткові значення та перетворити їх на практично будь-яку колірну схему.

• Демо

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); -webkit-border-radius: 3px; -moz-border-radius: 3px; радіус кордону: 3px;  .flyout #tip background-image: url ('images / tip.png'); фон-повтор: без повтору; background-size: auto; висота: 11px; позиція: абсолютна; зверху: -11px; ліворуч: 25px; ширина: 20px;  .flyout h2 text-transform: верхній регістр; колір: # 666; розмір шрифту: 1.2em; padding-bottom: 5px; margin-bottom: 12px; кордон нижній: 1px твердий # dcdbda;  .flyout p padding-bottom: 25px; розмір шрифту: 1.1em; колір: # 222;  

Існує не багато нового розумового згинання код, щоб показати тут. Я використовую невеликий .порада class з внутрішнім елементом span, щоб додати трикутник підказки. Можна створювати чисті трикутники CSS3, але цей метод нелегкий, як ви можете собі уявити. Якщо ви віддаєте перевагу такому методу, варто щось разом зламати. Але властивості обертання CSS3 не підтримуються всюди; Тим часом зображення не вимагають жодного резервного методу.

• Демо

5. Обгортка сторінки Apple

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

.applewrap ширина: 100%; дисплей: блок; висота: 150px; фон: білий; кордон: 1px твердий; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-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 твердий #dadada;  

Ви можете зібрати подібну сторінку, розділену на поля вмісту різної ширини та висоти. Незважаючи на те, що в цю демонстраційну версію я поклав кілька стовпців, це не є необхідною технікою форматування. Тінь вікна найкраще підійде на білому / сірому фоні. Але я думаю, відображення над будь-яким світлим кольором буде виглядати досить добре.

• Демо

6. Apple Content Box

Цей інший стиль контенту на веб-сайті Apple використовується в основному для конструкцій стовпців. Це в першу чергу в нижній частині сторінки демонстрації угод і іншої відповідної інформації. Це зовсім інший стиль дизайну з тіньовим ящиком, що відображається всередині зверху вниз.

.applebox width: auto; висота: 85px; розмір коробки: кордон; фон: # f5f5f5; оббивка: 20px 20px 10px; запас: 10px 0 20px; кордон: 1px твердий #ccc; кордон-радіус: 4px; -webkit-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; запас: 8px; вертикальне вирівнювання: зверху; дисплей: вбудований блок;  .applefeature a display: block; ширина: 168px; висота: 140px; кордон: 1px твердий #ccc; колір: # 333; текст-прикраса: немає; font-weight: bold; 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); -webkit-border-radius: 4px; -moz-border-radius: 4px; кордон-радіус: 4px;  .applefeature a: hover background: #fafafa; background: -webkit-gradient (лінійний, 0% 0%, 0% 100%, від (#fff), до (# f7f7f7)); background: -moz-лінійний градієнт (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); -webkit-border-radius: 4px; -moz-border-radius: 4px; кордон-радіус: 4px;  .applefeature a img display: block; запас: 26px auto 4px;  .applefeature a h4 display: block; ширина: 160px; розмір шрифту: 1.3em; сімейство шрифтів: Arial, Tahoma, sans-serif; колір: # 646464; text-align: center;  

Ці фіксовані посилання встановлюються на фіксовану ширину і включають окрему піктограму та текст на дисплеї. Приклад Apple використовує подібну тінь, як ми бачили в попередньому вікні вмісту. Однак тепер все поле можна активувати як посилання яка включає в себе обидві : hover і : active держав. Існує велика гнучкість у цьому полі посилань, і ви повинні спробувати зіграти з вихідним кодом.

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

• Демо

8. Обрамлені зображення

До цього прикладу додав сірий фон, щоб ви могли чіткіше бачити стилі тіні вікна. Це поле схоже на ознаки попереднього перегляду на wordpress.com, за винятком того, що я додав трохи більше глибини до вихідного коду.

.wpframe background: #fff; кордон-радіус: 2px; -webkit-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 label display: inline-block; ширина: 80px; розмір шрифту: 11px; font-weight: bold; колір: # 444; сімейство шрифтів: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relative; ширина: 250px; розмір шрифту: 17px; сімейство шрифтів: "Helvetica Neue", Arial, sans-serif; font-weight: нормальний; фон: # f7f8f8; колір: # 7c7c7c; line-height: 1.4; оббивка: 6px 12px; контур: немає; перехід: всі 0.2s легкості-в-вихід; -webkit-перемикання: всі 0.2s легкості-в-вихід 0s; -moz-перемикання: всі 0.2s легкості-в-вихід 0s; кордон: 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” кнопки. Деякі з них box-shadow властивості об'єднують три різні тіні разом в одну команду.

.blu-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); фоновий колір: # 276195; background-image: -moz-лінійний градієнт (# 3c88cc, # 276195); background-image: -ms-лінійний градієнт (# 3c88cc, # 276195); background-image: -webkit-градієнт (лінійний, лівий верхній, лівий нижній, колір-стоп (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-перехід: всі лінійні .2s; -o-перехід: всі лінійні .2s; -ms-transition: всі лінійні .2s; перехід: всі лінійні .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), вставка 0 -2px 0 0 (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 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-градієнт (лінійний, лівий верхній, лівий нижній, колір-стоп (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-перехід: всі лінійні .2s; -o-перехід: всі лінійні .2s; -ms-transition: всі лінійні .2s; перехід: всі лінійні .2s;  .grn-btn: hover, .grn-btn: focus -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 # 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) 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. Прикріпіть ці стилі до свого блогу, де є кнопки для завантаження халяви або щось подібне. Користувачі люблять взаємодіяти з унікальними інтерфейсами це часто призводить до набагато більшого відсотка для рейтингу кліків.

• Демо

Заключні думки

Я сподіваюся, що ви зможете відняти деякі чудові уроки з цієї колекції методів тіньових ящиків. Існує багато різних сфер, на яких можна зосередитися, включаючи форми, модальні коробки, кнопки, панелі інструментів і навіть повні макети сайту.

Не соромтеся реалізовувати будь-який з цих тіньових ефектів на частини вашого власного веб-сайту. Є багато інших методів, але ця колекція ідеально підходить як для початківців, так і для просунутих розробників. Також, якщо у вас є якісь пропозиції або питання щодо статті, ви можете поділитися з нами в розділі для обговорення коментарів нижче.