10 креативных техник с использованием CSS3 Box Shadow

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

В этой статье я хочу поделиться 10 фрагментов кода, относящихся к блестящему дизайну теней CSS3. Я объясню, как работает код и как вы можете внедрить каждую тень на свой сайт.

Все эти стили связаны с большим влиянием дизайна других популярных веб-сайтов. Это отличный пример того, как нынешние веб-разработчики создают влиятельные тенденции для будущего веб-дизайна..

1. Фиксированная верхняя панель инструментов

Румынский сервис социальных сетей Trilulilu использует плавающую панель инструментов вокруг всего своего сайта. Это можно быстро создать с помощью положение: фиксированное; свойство любого верхнего элемента бара. Но эта дополнительная тень от коробки переносит эффект на совершенно новый уровень.

#banner position: fixed; высота: 60 пикселей; ширина: 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); тень от рамки: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-индекс: 999999;  #banner h1 line-height: 60px;

Вы заметите, что свойство box-shadow на самом деле настроено с довольно простой комбинацией значений. Тень опустится ниже рамки и смазывается по 3 пикселя с обеих сторон..

Мы можем использовать RGBA () метод наложения небольшой непрозрачности на тень, чтобы элемент не казался слишком темным. Это тонкое дополнение, которое наверняка привлечет внимание вашего посетителя..

демонстрация

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

Вот еще один метод теней для творческого окна, примененный к скалярному раскрывающемуся подменю. Подобный эффект можно увидеть на Предпринимателе, когда вы наводите курсор на каждую из главных главных навигационных ссылок. Это определенно немного сложнее в настройке, но стоит терпения.

#bar display: block; высота: 45 пикселей; фон: # 22385a; padding-top: 5px; нижнее поле: 150 пикселей; положение: относительное;  #bar ul margin: 0px 15px; семейство шрифтов: Candara, Calibri, "Segoe UI", Segoe, Arial, без засечек;  #bar ul li background: # 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; 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: 3 пикселя; -moz-border-radius-topright: 3 пикселя;  #bar ul .subnav display: block; слева: 14 пикселей; верх: 48 пикселей; z-индекс: -1; ширина: 500 пикселей; положение: абсолютное; высота: 90 пикселей; граница: 1px solid # edf0f3; граница вершины: 0; отступы: 10px 0 10px 10px; переполнение: скрытое; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; граница-нижний-правый-радиус: 3 пикселя; граница-нижний-правый-радиус: 3 пикселя; -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-фильтр: "progid: DXImageTransform.Microsoft.Shadow (Сила = 3, Направление = 180, Цвет =" # 333333 ")"; фильтр: progid: DXImageTransform.Microsoft.Shadow (Сила = 3, Направление = 180, Цвет = "# 333333");

Ссылки навигации могут быть стилизованы для изменения цвета при выборе или при наведении курсора мыши. Я также добавляю несколько скругленных границ на ссылки и поверх выпадающего меню. Это дает приятное ощущение, а не острые края вокруг. Я также хорошо использую -мс-фильтр а также фильтр свойства, которые являются собственностью только Internet Explorer.

Если вы настроите полную навигационную систему, вы сможете изменить отображение на none и скрыть меню после загрузки страницы. Затем с помощью некоторого jQuery вы можете нацелиться на событие .hover () и отобразить панель субнава с обновленным содержимым..

демонстрация

3. Глянцевая кнопка тени

Возможно, это один из моих любимых стилей для создания только из-за того, насколько динамично он выглядит на странице. Если вы не можете сказать, это маленькая синяя кнопка на домашней странице YouTube после первого входа.

блюз цвет: #fff; ширина: 190 пикселей; высота: 35 пикселей; курсор: указатель; семейство шрифтов: Arial, Tahoma, без засечек; размер шрифта: 1,0em; вес шрифта: полужирный; -moz-border-radius: 2px; -webkit-border-radius: 2px; радиус границы: 2 пикселя; ширина границы: 1px; цвет границы: # 0053a6 # 0053a6 # 000; цвет фона: # 6891e7; background-image: -moz-linear-Gradient (вверху, # 4495e7 0, # 0053a6 100%); background-image: -ms-linear-градиент (вверху, # 4495e7 0, # 0053a6 100%); фоновое изображение: -o-линейный градиент (вверху, # 4495e7 0, # 0053a6 100%); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0, # 4495e7), остановка цвета (100%, # 0053a6)); background-image: -webkit-linear-Gradient (вверху, # 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); фильтр: 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); тень от рамки: вставка 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); фильтр: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); background-image: -moz-linear-Gradient (вверху, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-linear-Градиент (вверху, # 3a8cdf 0, # 0053a6 100%); фоновое изображение: -o-линейный градиент (вверху, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0, # 3a8cdf), остановка цвета (100%, # 0053a6)); background-image: -webkit-linear-Gradient (вверху, # 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; фильтр: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); background-image: -moz-linear-Gradient (вверху, # 005ab4 0, # 175ea6 100%); background-image: -ms-linear-Gradient (вверху, # 005ab4 0, # 175ea6 100%); фоновое изображение: -o-линейный градиент (вверху, # 005ab4 0, # 175ea6 100%); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0, # 005ab4), остановка цвета (100%, # 175ea6)); background-image: -webkit-linear-Gradient (вверху, # 005ab4 0, # 175ea6 100%); background-image: линейный градиент (внизу, # 005ab4 0, # 175ea6 100%);

Весь код кнопки очень интересен, но мы пытаемся поддерживать как можно больше браузеров. Существуют тени для текста и рамки с сопровождающей поддержкой MS Internet Explorer 7+. Также мы устанавливаем изображение на заднем плане свойство с CSS3-градиентами в широком диапазоне префиксов.

Но если вы любите этот стиль дизайна, то hover и активные состояния также привлекут ваше внимание. Мы в основном обновляем границу, чтобы включить тени внутри, когда вы нажимаете вниз, при этом обновляя градиент фона, чтобы он был немного темнее.

Поскольку на кнопке нет изображений, вы можете обновить шестнадцатеричные значения и трансформировать их, чтобы смешать их практически с любой цветовой схемой..

демонстрация

4. Всплывающее меню уведомлений

Я не большой пользователь Facebook, но я заметил некоторые методы пользовательского интерфейса из их редизайнов. Это всплывающее меню можно сравнить с всплывающими уведомлениями или запросами о дружбе на главной странице..

.выпадающая ширина: 310px; маржинальная вершина: 10px; размер шрифта: 11 пикселей; положение: относительное; семейство шрифтов: 'Lucida Grande', Tahoma, Verdana, Arial, без засечек; цвет фона: белый; отступы: 9px 11px; фон: rgba (255, 255, 255, 0,9); граница: 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); тень от рамки: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-border-radius: 3px; радиус границы: 3 пикселя;  .flyout #tip background-image: url ('images / tip.png'); повторение фона: без повтора; размер фона: авто; высота: 11 пикселей; положение: абсолютное; верх: -11px; слева: 25 пикселей; ширина: 20 пикселей;  .flyout h2 text-transform: uppercase; цвет: # 666; размер шрифта: 1,2em; нижний слой: 5 пикселей; нижнее поле: 12 пикселей; Граница внизу: 1px solid #dcdbda;  .flyout p padding-bottom: 25px; размер шрифта: 1.1em; цвет: # 222;

Здесь не так уж много нового, умопомрачительного кода. Я использую маленький .совет класс с внутренним элементом span для добавления треугольника всплывающей подсказки. Можно создать чистые треугольники CSS3, но этот метод не так прост, как вы можете себе представить. Если вы предпочитаете этот метод, возможно, стоит что-то взломать вместе. Но свойства вращения CSS3 поддерживаются не везде; Между тем изображения не требуют какого-либо запасного метода.

демонстрация

5. Apple Page Wrapper

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

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

Вы можете собрать похожую страницу, разделенную на блоки контента различной ширины и высоты. Хотя в эту демонстрацию я поместил несколько столбцов, это не является необходимым способом форматирования. Тень от рамки лучше всего подойдет на белом / сером фоне. Но я думаю, что отображение поверх любого светлого цвета будет выглядеть довольно хорошо.

демонстрация

6. Apple Content Box

Этот другой стиль контента на веб-сайте Apple используется в основном для дизайна колонок. Это в основном внизу страницы, где показаны предложения и другая связанная с ними информация. Это совершенно другой стиль дизайна с тенями, отображаемыми внутри сверху вниз.

.applebox ширина: авто; высота: 85 пикселей; размер коробки: бордюр; фон: # f5f5f5; отступы: 20px 20px 10px; поле: 10px 0 20px; граница: 1px solid #ccc; радиус границы: 4 пикселя; -webkit-border-radius: 4 пикселя; -moz-border-radius: 4px; -o-border-radius: 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 width: 140px; плыть налево; поле: 0 0 0 30px;

Я не думаю, что этот код должен быть слишком сложным для отслеживания и копирования в другой контейнер div. Мы применяем только box-shadow вставка с альфа-прозрачными цветовыми кодами rgba. Таким образом, хотя у нас есть тень, установленная на чистый черный цвет, мы видим непрозрачность только около 30%..

демонстрация

7. Избранные ссылки

Это, наверное, мой любимый стиль теней с текущего сайта Apple. Вы должны найти живой демонстрационный стиль этой техники на странице iCloud с серией плавающих ссылок..

.applefeature высота: 150px; поле: 8px; выравнивание по вертикали: верх; дисплей: встроенный блок;  .applefeature a display: block; ширина: 168 пикселей; высота: 140 пикселей; граница: 1px solid #ccc; цвет: # 333; текстовое оформление: нет; вес шрифта: полужирный; высота линии: 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: 4 пикселя; -moz-border-radius: 4px; радиус границы: 4 пикселя;  .applefeature a: hover background: #fafafa; background: -webkit-Gradient (линейный, 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); -webkit-border-radius: 4 пикселя; -moz-border-radius: 4px; радиус границы: 4 пикселя;  .applefeature a img display: block; поле: 26px, авто 4px;  .applefeature a h4 display: block; ширина: 160 пикселей; размер шрифта: 1,3em; семейство шрифтов: Arial, Tahoma, без засечек; цвет: # 646464; выравнивание текста: по центру;

Эти избранные ссылки имеют фиксированную ширину и включают различный значок и отображаемый текст. Пример Apple использует похожую тень блока, как мы видели в предыдущем блоке контента. тем не мение вся коробка теперь может быть активирована как ссылка который включает в себя как : парить а также : активный состояния. Этот блок ссылок обладает большой гибкостью, и вы должны попробовать поиграться с исходным кодом.

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

демонстрация

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

Я добавил серый фон на этот пример, чтобы вы могли более четко видеть стили теней. Этот блок похож на предварительные снимки на wordpress.com, за исключением того, что я добавил немного глубины в исходный код.

.wpframe background: #fff; радиус границы: 2 пикселя; -webkit-border-radius: 2px; -moz-border-radius: 2px; обивка: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; тень от рамки: 1px 2px 1px # d1d1d1;

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

демонстрация

9. Светящиеся поля ввода

Я получил эту идею после посещения страницы входа в Pinterest пару раз. Их анимированные стили действительно отображают красноречивые примеры множества встроенных теней, как снаружи, так и на вставке..

.formwrap display: block; нижнее поле: 15 пикселей;  .formwrap label display: inline-block; ширина: 80 пикселей; размер шрифта: 11 пикселей; вес шрифта: полужирный; цвет: # 444; семейство шрифтов: Arial, Tahoma, без засечек;  .formwrap .shadowfield позиция: относительная; ширина: 250 пикселей; размер шрифта: 17 пикселей; семейство шрифтов: "Helvetica Neue", Arial, без засечек; Вес шрифта: нормальный; фон: # f7f8f8; цвет: # 7c7c7c; высота строки: 1,4; обивка: 6px 12px; контур: нет; переход: все 0,2 с, легкость в выходе 0 с; -webkit-transition: все 0,2 с легкостью входа-выхода 0 с; -moz-transition: все 0,2 с легкостью входа-выхода 0 с; граница: 1px solid # 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; тень от рамки: вставка 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 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-linear-Gradient (# 3c88cc, # 276195); background-image: -ms-linear-градиент (# 3c88cc, # 276195); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # 3c88cc), остановка цвета (100%, # 276195)); background-image: -webkit-linear-Gradient (# 3c88cc, # 276195); фоновое изображение: -o-линейный градиент (# 3c88cc, # 276195); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-фильтр: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; background-image: линейный градиент (# 3c88cc, # 276195); граница: 0; курсор: указатель; цвет: #fff; текстовое оформление: нет; выравнивание текста: по центру; размер шрифта: 16 пикселей; отступы: 0px 20px; высота: 40 пикселей; высота строки: 40px; минимальная ширина: 100 пикселей; тень текста: 0 1px 0 rgba (0,0,0,0.35); семейство шрифтов: Arial, Tahoma, без засечек; -вебкит-переход: все линейные .2s; -моз-переход: все линейные .2с; -опереход: все линейные .2s; -ms-переход: все линейные .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 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; тень от рамки: 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: active -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-linear-Gradient (# 81bc2e, # 659324); background-image: -ms-linear-градиент (# 81bc2e, # 659324); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # 81bc2e), остановка цвета (100%, # 659324)); background-image: -webkit-linear-Gradient (# 81bc2e, # 659324); фоновое изображение: -o-линейный градиент (# 81bc2e, # 659324); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-фильтр: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; background-image: линейный градиент (# 81bc2e, # 659324); граница: 0; курсор: указатель; цвет: #fff; текстовое оформление: нет; выравнивание текста: по центру; размер шрифта: 16 пикселей; отступы: 0px 20px; высота: 40 пикселей; высота строки: 40px; минимальная ширина: 100 пикселей; тень текста: 0 1px 0 rgba (0,0,0,0.35); семейство шрифтов: Arial, Tahoma, без засечек; -вебкит-переход: все линейные .2s; -моз-переход: все линейные .2с; -опереход: все линейные .2s; -ms-переход: все линейные .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; тень от рамки: 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: active -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. Добавьте эти стили в свой блог, где у вас есть кнопки для бесплатных загрузок или что-то подобное. Пользователи любят взаимодействовать с уникальными интерфейсами и это часто приводит к гораздо большему проценту рейтинга кликов.

демонстрация

Последние мысли

Я надеюсь, что вы можете извлечь некоторые замечательные уроки из этой коллекции методов теней. Есть много разных областей, на которые вы могли бы обратить внимание, включая формы, модальные поля, кнопки, панели инструментов и даже полные макеты веб-сайтов..

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