Годами мои тени выглядели фальшивыми, и я не мог понять, почему. я бы написал box-shadow: 0 5px 10px black, получить мутный серый ореол, тонус его, и двигаться дальше чувствуя смутно неудовлетворенный. Карта выглядела так, будто у нее синяк, а не тень. И только когда я начал разрывать системы дизайна я восхищался - те, где карты кажутся действительно плавают - что я осознал трюк. Они никогда не используют одну тень. Они складывают две или три, каждый делает свою работу, и результат читается как свет, ведущий себя так, как свет на самом деле ведет себя.
Я зарабатываю на жизнь созданием интерфейсов в React и Tailwind, поддерживаю тему администратора WordPress в WP Adminify, где тени несут большую часть визуальной иерархии, и построил ее CSS-генератор теней на Toolz.dev, потому что мне надоело вручную настраивать многослойные тени в текстовом редакторе и перезагружаться, чтобы увидеть результат.Это руководство - все, что я узнал о box-shadow свойство: что делает каждое значение, почему работает наслоение, как избежать обычных ловушек и как использовать генератор, чтобы добраться от пустого элемента до производственного CSS за пару минут.
TL;DR: CSS
box-shadowпринимает смещение X, смещение Y, радиус размытия, радиус размытия и цвет с опциональнымinsetключевое слово. размытие смягчает край; разворот растет или сжимает тень перед размытием. Реальная высота возникает из-за укладки нескольких теней, разделенных запятыми, а не из-за проворачивания одной тени и непрозрачности #39;s. Используйте черный цвет низкой непрозрачности, небольшое смещение Y, щедрое размытие и слегка отрицательный разброс - затем скопируйте CSS прямо из генератора.
Что на самом деле делает свойство box-shadow?
box-shadow рисует одну или несколько теней вокруг пограничного ящика элемента & #39;s, и свойство указано в Фон и границы CSS Уровень 3. Синтаксис для одной тени выглядит следующим образом
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
Смещения обязательны; размытие, размазывание и цвет необязательны, но вы почти всегда их установите. Вот что каждый контролирует, как я думаю о них при настройке:
Смещение X перемещает тень горизонтально Положительные значения толкают её вправо, отрицательные влево Для большинства теней интерфейса вы хотите это на уровне или около нуля, потому что свет в реальном мире обычно исходит сверху, отбрасывая тени прямо вниз, а не в сторону.
Смещение Y перемещает тень вертикально. положительные значения толкают вниз, что является то, что вы хотите для элемента, который кажется, что сидит над страницей. это единственное значение, которое больше всего контролирует, как "high" элемент чувствует.
Радиус размытия смягчает тень 's edge. значение ноль дает тень с твердым краем, как твердая форма; более крупные значения распространяют мягкость наружу. это не может быть отрицательным. почти каждая тень естественного вида использует размытие в несколько раз больше, чем ее смещение Y.
Радиус разброса изменяет размер тени перед нанесением размытия Положительное раздвигание делает тень больше во всех направлениях; отрицательное раздвигание сжимает ее. Отрицательное раздвигание - секретное оружие для плотных, правдоподобных теней карт, потому что оно втягивает тень внутрь, чтобы она не выливалась за пределы элемента.
Цвет является ли любой действительный цвет CSS. лучшие теней интерфейса используют черный или почти черный при низкой непрозрачности - что-то вроде rgba(0, 0, 0, 0.1) - а не полностью непрозрачный серый цвет, потому что полупрозрачный черный оттеняет все, что за ним стоит, так же, как настоящая тень.
Почему хорошие тени используют более одного слоя?
Это идея, которая полностью изменила мои тени, поэтому она получает свой раздел. Одиночная тень - это единая, однородная капля. Реальные тени не однородны. вблизи объекта тень темнее и острее; дальше она светлее и диффузнее. вы аппроксимируете это падение, складывая тени.
Классический рецепт - это два слоя: плотная, немного более темная тень, которая сидит близко к элементу и придает ему хрустящую основу, плюс более мягкая, широкая, более светлая тень под ней, которая обеспечивает диффузию окружающей среды. что-то вроде
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
Браузер рисует тени, разделенные запятыми, по порядку, с первым сверху. каждый слой дешев, и два или три вместе читаются как подлинная глубина таким образом, что ни одна тень не может, как бы вы ее ни настраивали. именно поэтому генератор построен вокруг слоев, а не одного набора ползунков - CSS-генератор теней корабли с такими предустановками, как Card, Elevated и Floating, которые являются многослойными, поэтому вы начинаете с реалистичной базы, а не с одинокой капли.
Мысленная модель, которую я использую: думать на уровнях высоты. карта отдыха сидит низко с маленькой, плотной тенью. выпадающий или поповер сидит выше с более крупным, более мягким. модал сидит выше всех. увеличение высоты означает увеличение смещения Y и размытие по всем слоям вместе, а не просто затемнение одной тени.
Как мне создать внутреннюю тень?
выше inset ключевое слово переворачивает тень внутри элемента & #39;s заполняющая коробка вместо того, чтобы отбрасывать ее наружу. Добавить inset в передней части теневого объявления и рисует внутри элемента:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
Внутренние тени - это то, как вы делаете контроль выглядеть нажатым, утопленным или вырезанным в. Текстовый ввод часто лучше читается с тонкой вставной тенью, которая предполагает колодец, внутри которого находится текст. Нажатое состояние кнопки может поменять свою внешнюю тень на внутреннюю, чтобы чувствовать себя физически подавленной. И весь тренд нейморфизма построен на сопряжении светлой вставки с одного направления с темной вставкой с другого. В генераторе вставка представляет собой один переключатель на слой, поэтому вы можете смешивать вставные и начальные тени в одном элементе - это именно то, что нужно нейморфным поверхностям.
Как мне использовать Box Shadow Generator?
Поток разработан, чтобы соответствовать тому, как я на самом деле работаю. Откройте CSS-генератор теней и вы попадаете на элемент предварительного просмотра с уже примененным реалистичным предустановкой карты, поэтому вы никогда не смотрите на пустой холст.
Выберите предустановку, чтобы приблизиться к тому, что вы хотите - Тонкий, Карта, Приподнятый, Плавающий, Внутренний, Свечение, Нейморфный, или Острый. каждый загружает свой стек полного слоя. Затем выберите слой и настройте его с помощью ползунков: смещение X, смещение Y, размытие, и разворот каждый имеют свой собственный контроль, плюс сборщик цвета, ползунок непрозрачности, и переключатель вставки. предварительный просмотр обновляется в реальном времени, как вы перетаскиваете, так что вы формируете тень напрямую, а не редактируете числа и представляете результат.
Если вам нужно больше глубины, добавьте слой. Если слой не делает ничего полезного, удалите его. Существует фоновый переключатель, который переключает предварительный просмотр между светом и темнотой, что имеет значение, потому что тень, которая выглядит идеально на световой карте, может исчезнуть или превратиться в уродливое серое кольцо на темном. Проверка обоих перед отправкой экономит путешествие туда и обратно.
Когда вы будете счастливы, скопируйте CSS. Вы можете схватить равнину box-shadow декларация или блок, который также включает в себя -webkit-box-shadow префикс, если вам нужно поддерживать очень старые сборки WebKit. Вставьте его в таблицу стилей, свой стилизованный компонент или произвольное значение Tailwind, и вы закончите.
Как и каждый инструмент на сайте, он полностью работает в вашем браузере. Ничего не загружается, и он продолжает работать в автономном режиме после загрузки, что является тем же подходом на стороне клиента, который я описываю в Руководство по конфиденциальности данных, йо-
Реальные варианты использования
Построение шкалы высот для системы проектирования
Когда я настраиваю новый проект, я определяю фиксированный набор уровней высоты, а не позволяю каждому компоненту изобретать свою собственную тень Обычно это четыре или пять шагов от & quot;resting card" до & quot;modal.& quot; Я создаю каждый из них в генераторе, копирую CSS и добавляю их в свои токены дизайна как именованные значения. Каждая карта, меню и диалог затем ссылаются на уровень, поэтому весь продукт использует согласованную модель освещения. делать это вручную в текстовом редакторе жалко; делать это с живым предварительным просмотром занимает несколько минут.
Делаем карту действительно плавающей
Инстинкт по умолчанию - это одна темная тень, которая выглядит наклеенной. Исправление - это двухслойный рецепт: плотный слой с небольшим смещением Y и отрицательным разбросом для закрепления карты, а также более широкий и мягкий слой внизу для окружающего света. Начните с предустановки "Карта" или "Высота", подтолкните значения по вкусу, и вы получите карту, которая будет читаться как поднятая, а не очерченная.
Проектирование прессованных и сфокусированных состояний
Интерактивная обратная связь часто живет в тени. кнопка может потерять большую часть своей внешней тени и получить небольшую вставку нажатия, чтобы чувствовать себя физически нажатым. ввод может нести постоянную тонкую вставку, чтобы выглядеть как колодец. они быстро прототипировать путем переключения вставки и просмотра предварительного просмотра, и они добавляют много воспринимаемой польской для очень маленького кода.
Нейморфные поверхности
Если вы собираетесь для мягкого-UI взгляд, вам нужны две тени на одном и том же элементе, указывающие противоположные направления - темный вниз-вправо и светлый вверх-влево - так поверхность кажется экструдированной из фона Нейморфный предустановка устанавливает это, и вы настраиваете цвет, непрозрачность, и размытие, чтобы соответствовать вашему конкретному фону Он работает только на фонах, которые не являются ни чисто белыми, ни чисто черными, которые переключатель темного фона помогает вам проверить.
box-shadow против фильтра: drop-shadow
Часто возникает вопрос: когда мне следует использовать filter: drop-shadow() вместо box-shadow? Они выглядят похожими, но ведут себя по-другому, а неправильный выбор вызывает настоящие ошибки.
| важничать | коробочная тень | фильтр: drop-shadow() |
|---|---|---|
| Следует | Прямоугольный пограничный ящик | Фактические видимые (непрозрачные) пиксели |
| лучше для | Карты, кнопки, панели, входы | Логотипы, значки, PNG с прозрачностью, неправильной формы |
| Поддерживает вставку | да | нет |
| Поддержка распространяется | да | нет |
| Множественные тени | Да, разделенные запятыми | Да, путем цепочки фильтров |
| Влияет на верстку | нет | нет |
Краткая версия: для обычного прямоугольного элемента используйте box-shadow - он более способен, поддерживает распространение и вставку, и это то, что производит этот генератор. Достичь drop-shadow() только когда вам нужно, чтобы тень прослеживала прозрачную или неправильную форму, например логотип или значок с вырезом, где прямоугольная тень выглядела бы неправильно.
Расширенные советы и ловушки
Несколько вещей, которыми я обгорел. во-первых, тени обрезаются overflow: hidden на предке Если твоя прекрасная тень таинственным образом отсечена, предок ее подрезает - либо дайте теневую комнату, либо двигайте overflow править в другом месте. Потому что box-shadow никогда не влияет на компоновку, не толкает соседние элементы, что является особенностью, но это также означает, что тень может молча проходить под братом или сестрой.
Во-вторых, огромные размытия на многих элементах могут стоить производительности краски, особенно при анимировании. Если вы анимируете тень на прокрутке или наведете курсор на длинный список, следите за частотой кадров; иногда дешевле анимировать непрозрачность на псевдоэлементе, удерживающем статическую тень. После завершения CSS проведите его через CSS-минификатор бреет дополнительные байты, которые добавляют многослойные тени.
В-третьих, не забывайте, что цвет теней может быть больше, чем черный Очень тонко тонированная тень - темная версия вашей поверхности's оттенок, а не чистый черный - часто выглядит богаче нейтрального серого, потому что настоящие тени подхватывают окружающий цвет Это небольшой ход с непропорциональной отдачей.
Если вы собираете более широкий набор инструментов CSS, Руководство по набору инструментов для разработчиков веб-разработчика охватывает места, где теневая работа помещается среди других утилит на основе браузера, и как только ваши тени будут готовы, градиент генератора а палитра завершите стилизацию поверхности. Если вам нужна доступность, соедините это с Проверка цветового контраста таким образом, контент, хранящийся на ваших затененных картах, остается читаемым.
часто задаваемые вопросы
Что такое CSS-свойство Box-Shadow?
box-shadow добавляет одну или несколько теней вокруг кадра 's. Каждая тень имеет горизонтальное смещение, вертикальное смещение, дополнительный радиус размытия, дополнительный радиус раздвига и цвет с дополнительным ключевым словом для вставки, чтобы нарисовать тень внутри кадра. Несколько теней разделены запятыми и окрашены первым сверху.
В чем разница между размытием и разбросом?
Радиус размытия смягчает теневой край, поэтому большее значение делает его более диффузным. Радиус распространения изменяет размер тени и #39;s перед размытием: положительный спред увеличивает его во всех направлениях, а отрицательный спред сжимает его, и именно так вы удерживаете тень, плотно зажатую под картой, вместо того, чтобы течь за ее края.
Как создать внутреннюю тень в CSS?
Добавить вставку ключевое слово к тени. inset рисует тень внутри элемента's padding box вместо внешней, что полезно для нажатых кнопок, входных лунок, и нейморфных поверхностей Переключение вставки переключатель в генераторе добавляет его к выбранному слою автоматически.
Могу ли я использовать несколько теней для одного элемента?
Да. можно перечислить несколько теней в одном объявлении-тени коробки, разделенном запятыми, и браузер раскрашивает их по порядку с первой сверху. наслоение мягкой широкой тени под меньшей, более темной - стандартный способ сделать возвышение реалистичным, а не наклеенным.
Почему моя тень коробочки обрезается?
Тень отсекается, когда у предка есть переполнение: скрыто или когда элемент сидит на краю обрезного контейнера. Дайте теневое пространство или переместите правило переполнения: скрыто на другой элемент. Поскольку коробка-тень не влияет на макет, она никогда не толкает соседние элементы, поэтому она также может бесшумно простираться под братом или сестрой.
В чем разница между тенью и фильтром: Drop-Shadow?
box-shadow следует за прямоугольным пограничным полем 's, поэтому он игнорирует прозрачные области внутри PNG или неправильной формы. filter: drop-shadow () отслеживает фактические видимые пиксели, что соответствует логотипам и значкам с прозрачностью. Для стандартных прямоугольных карт и кнопок box-shadow - правильный выбор, поддерживает распространение и вставку, чего нет в drop-shadow.
Нужен ли мне префикс -webkit- для box-shadow?
Для современных браузеров нет. box-shadow был непредопределен и широко поддерживается в течение многих лет. блок с префиксом, который генератор может вывести, полезен только в том случае, если вы должны поддерживать очень старые сборки WebKit, а для большинства проектов достаточно одного стандартного свойства box-shadow.
Этот генератор теней Box-Shadow отправляет мои данные куда-нибудь?
нет , йо- Предварительный просмотр и вывод CSS генерируются полностью в вашем браузере с помощью JavaScript. Значения не загружаются и не сохраняются, и инструмент продолжает работать без сетевого подключения после загрузки страницы.
