"Это седьмой день моего участия в ноябрьском испытании обновлений, ознакомьтесь с подробностями события:Вызов последнего обновления 2021 г.".
На мой взгляд, лучшие веб-сайты и веб-приложения имеют осязаемое «настоящее» качество. На достижение этого качества влияет множество факторов, но ключевой фактор — тени.
Однако, когда я просмотрела Интернет, стало ясно, что большинство оттенков не так богаты, как могли бы быть. Паутина покрыта нечеткими серыми прямоугольниками, не похожими на тени.
В этом уроке мы узнаем, как преобразовать типичные тени в красивые, реалистичные тени:
Зачем вообще использовать тени?
Обещаю, скоро мы поговорим о забавных CSS-трюках. Но сначала я хочу сделать шаг назад и поговорить оЗачемТени существуют в CSS и как мы можем максимально использовать их.
Оттенки представляют высоту, а большие оттенки представляют более высокие высоты. Если мы используем тени стратегически, мы можем создать иллюзию глубины, как будто разные элементы на странице плавают над фоном на разных уровнях.
Ниже приведен пример. Перетащите ползунок «Экран», чтобы увидеть, что я имею в виду:
Я хочу, чтобы приложения, которые я создаю, казались тактильными и реальными, как если бы браузер был окном в другой мир. Тени помогают продать иллюзию.
Здесь есть и тактическая выгода. Используя разные тени для заголовка и диалога, мы создаем впечатление, что диалог ближе к нам, чем заголовок. Наше внимание, как правило, привлекает ближайший к нам элемент, поэтому, повышая уровень диалога, мы повышаем вероятность того, что пользователь сначала обратит внимание на него. Мы можем использовать высоту как инструмент для направления внимания.
Когда я использую тени, я делаю это с одной из этих целей. Либо я хочу увеличить заметность определенного элемента, либо я хочу, чтобы мое приложение было более тактильным и реалистичным.
Давненько я не очень правильно пользовалась оттенком 😬.
Когда я хочу, чтобы у элемента была тень, я добавляю свойства и изменяю числа, пока мне не понравится внешний вид результата.box-shadow
Проблема в том, что, создавая каждую тень изолированно, вы получите кучу неконгруэнтных теней. Если наша цель — создать иллюзию глубины, нам нужно, чтобы все оттенки соответствовали друг другу. В противном случае это выглядит как куча размытых границ:
В природе тени отлиты от источников света. Направление тени зависит от положения света:
Как правило, мы должны выбрать один источник света для всех элементов на странице. Этот источник света обычно находится выше и немного левее:
Если бы в CSS была настоящая система освещения, мы бы присвоили позицию одному или нескольким источникам света. К сожалению, в CSS такого нет.
Вместо этого мы перемещаем тень, указав смещение по горизонтали и смещение по вертикали. Например, на изображении выше результирующая тень имеет вертикальное смещение 4 пикселя и горизонтальное смещение 2 пикселя.
Вот первый прием для сплоченных теней:Каждая тень на странице должна иметь одинаковое соотношение. Это создаст впечатление, что каждый элемент исходит из одного и того же источника света.
то же самое соотношение?
Вам может быть интересно, почему я рекомендую использовать одно и то же соотношение для каждого элемента. Должен ли каждый элемент иметь собственный масштаб, потому что каждый элемент имеет уникальное положение относительно источника света?
Это верно, если источник света находится поблизости, например, люди сгрудились вокруг костра. Но если источник света находится далеко, например, солнце, эти различия незначительны. Все будет отбрасывать тени под одним и тем же углом.
Из соображений практичности я решил, что все тени имеют один и тот же угол, поскольку попытка вычислить уникальный угол для каждого элемента кажется мне слишком громоздкой. 😅
Попробуйте эту демонстрацию и обратите внимание, как меняются значения:
Первые два числа (горизонтальное и вертикальное смещение) масштабируются вместе в конкатенации. Вертикальное смещение всегда в 2 раза больше горизонтального смещения.
Когда карты еще выше, остальные две вещи произойдут:
- радиус размытияБольшой.
- тень становитсяменее непрозрачный.
(Я также увеличил размер карт для более реалистичного эффекта. На практике было бы проще пропустить этот шаг.
Могут быть сложные математические причины, почему это происходит, но мы можем использовать нашу интуицию как человеческие существа, чтобы существовать в мире света.
Если вы находитесь в хорошо освещенной комнате, нажмите рукой на стол (или любую другую поверхность поблизости) и медленно поднимите ее. Обратите внимание, как меняется тень: она становится дальше от вашей руки (большее смещение), становится более размытой (больший радиус размытия), начинает исчезать (меньшая непрозрачность). Если вы не можете пошевелить руками, вы можете вместо этого использовать эталонный объект в комнате. Сравните различные оттенки вокруг вас.
Поскольку у нас так много опыта в затененных средах, нам действительно не нужно запоминать кучу новых правил. Нам просто нужно спроектировать тенииспользовать нашу интуицию.虽然这确实需要心态的转变;我们需要开始将我们的HTML元素视为物理对象。
box-shadow- По мере приближения элемента к пользователю смещение должно увеличиваться, радиус размытия должен увеличиваться, а непрозрачность тени должна уменьшаться.
- Вы можете пропустить некоторые из этих вычислений, используя нашу интуицию.
Навык
ссылка на этот заголовокшарик
Можно использовать современный инструмент 3D-иллюстрации, такой как Blender.трассировка лучейТехнология создания реалистичных теней и освещения.
При трассировке лучей сотни лучей света вылетают из камеры, сотни раз отражаясь от поверхностей сцены. Это вычислительно затратный метод, создание одного изображения может занять от нескольких минут до нескольких часов!
У веб-пользователей нет такого терпения, поэтому алгоритм более примитивен. Он создает прямоугольник в форме нашего элемента и применяет к нему базовый алгоритм размытия.box-shadow
Так что наши тени никогда не будут выглядеть реалистично, но мы можем многое улучшить с помощью изящной техники:Слоистый.
Вместо использования одной тени блока мы наложим несколько теней друг на друга с немного разными смещениями и радиусами:
Накладывая несколько теней, мы создаем некоторую тонкость, которая существует в тенях в реальной жизни.
Отличный пост в блоге об этой технике Тобиаса Алина"Гладкие и четкие тени с многоуровневыми тенями"подробно описано.
Philipp Brumm создал отличный инструмент для создания многослойных теней.Тени. такие как мм. Afan:
Компромисс производительности
Нельзя отрицать, что многослойные оттенки красивы, но они имеют свою цену. Если мы наложим 5 оттенков, нашему устройству придется работать в 5 раз больше!
Это не большая проблема для современного оборудования, ноМогу
Цветная подходящая тень
Все наши тени до сих пор использовали полупрозрачный черный цвет, например, который на самом деле не идеален.hsl(0deg 0% 0% / 0.4)
Когда мы накладываем черный цвет на фоновый цвет, он не только затемняется, но и обесцвечивается.
Сравнивая эти две коробки:
В поле слева используется прозрачный черный цвет. Коробка справа соответствует оттенку и насыщенности цвета, но уменьшает яркость. В итоге мы получили более динамичную коробку!
Аналогичный эффект возникает, когда мы используем более темный цвет для тени:
Ни один из оттенков не совсем подходит, на мой взгляд. Тот, что слева, слишком ненасыщен, а тот, что справа
Чтобы найти цвет Златовласки, нужно немного поэкспериментировать:
Кодовая площадка
Подбирая оттенок и уменьшая насыщенность/яркость, мы можем создать настоящую тень без «выцветшего» оттенка серого.
Связь между насыщенностью и яркостью
Если вы знакомы с цветовыми форматами, то знаете, что насыщенность и яркость регулируются независимо.
hslЗатем уменьшить яркость, похоже, также влияет на насыщенность, не так странно?
Чтобы ответить на этот вопрос, нам нужно опустить кроличью нору. Если вы заинтересованы, пожалуйста, нажмите «подробнее», чтобы узнать больше!
сложить их вместе
В этом уроке мы представили 3 разные идеи:
- Координируя нашу тень для создания сплоченной среды.
- Используйте наслоение для создания более реалистичных теней.
- Отрегулируйте цвет, чтобы избежать «выцветших» оттенков серого.
Вот пример, в котором применяются все эти идеи:
Интеграция в дизайн-систему
Тени, которые мы видим, должны быть настроены в зависимости от их высоты и окружающей среды. В мире с дизайн-системами и ограниченным числом дизайнерских токенов это кажется контрпродуктивным. Можем ли мы действительно «пометить» эти оттенки?
Мы абсолютно можем! Хотя современные инструменты нуждаются в некоторой помощи.
Например, вот как я использую React, CSS Styling компоненты и переменные для решения этой проблемы:
У меня есть статический объект, который определяет 3 фасада. Цветовые данные для каждого оттенка используют переменные CSS.ELEVATIONS``--shadow-color
Каждый раз, когда я меняю цвет фона (в и ), я также меняю .Таким образом, любые дочерние элементы, использующие тени, автоматически наследуют это свойство.Wrapper``BlueWrapper``--shadow-color
Если у вас нет опыта работы с переменными CSS, это может показаться полным волшебством. Однако это всего лишь пример. Не стесняйтесь строить вещи по-другому!
ссылка на этот заголовокпродолжить путешествие
Ранее я упомянул, моя коробка теневой политики была «отремонтирована ценность, пока она не выглядит хорошо». Если я скажу правду, это мойВсе CSS.Методы. 😅
Скрытый.我学到了所有关于Атрибутыпринцип, такие как контекст стека, предполагаемый размер и контейнер прокрутки.position``flex``overflow
В CSS свойства аналогичны параметрам функций. Это входные данные, используемые алгоритмами компоновки и другими сложными внутренними механизмами.
Несколько лет назад я решил уделить время изучению CSS.НастоящийПринцип работы. Я спускался по кроличьей норе MDN и время от времени бурил до твердого керна. Когда я оказываюсь в отвратительной ситуации и мне кажется, что все не имеет смысла, я успокаиваюсь и решаю копаться в этом, пока не пойму, что происходит. *
Это не быстрый и не легкий процесс, но ни с того ни с сего он работает. Внезапно все началосьстать более значимым. CSS — это язык, который вознаграждает тех, кто углубляется.
Около года назад я начал думать, что, возможно, мой опыт может помочь другим разработчикам ускорить процесс. В конце концов, у большинства из нас нет времени (или энергии!) тратить годы на изучение документации и спецификаций.
В прошлом году я уволился с работы инженера-программиста в Gatsby Inc., чтобы сосредоточиться на создании курса CSS, как никто другой.
Это называетсяCSS для разработчиков JavaScript,Это всеобъемлющий интерактивный курс, который показывает, как работает CSS.
Более 200 уроков распределены по 10 модулям. Вы уже сделали один из них: Это руководство по дизайну теней адаптировано из курса! Однако в курсе также есть видео, упражнения и мини-игры.
Если вы находите CSS сбивающим с толку или разочаровывающим, я хочу помочь изменить это. ты сможешьcss-for-js.devУзнайте больше на .
Фильтр: тень
在本教程中，我们一直在使用该属性。是一个很棒的全面工具，但它并不是我们在CSS中唯一的阴影选项。 😮box-shadow``box-shadow
SVGfilter``drop-shadow``box-shadow
Очерчивает форму элемента. drop-shadow
Например, если мы используем его на изображении с прозрачными и непрозрачными пикселями, тень будет применяться только к непрозрачным пикселям:
Это работает для изображений, но также и для HTML-элементов! Посмотрите, как мы можем использовать его для нанесения теней наПодсказка с подсказкой:
(Это очень тонко, потому что мы используем мягкие тени; попробуйте уменьшить радиус размытия, чтобы более четко видеть контур!
Еще один небольшой совет: в отличие от , это свойство аппаратно ускоряется в Chrome и, возможно, в других браузерах. Это означает, что он управляется графическим процессором, а не центральным процессором. Таким образом, производительность обычно намного выше, особенно при анимации. Просто не забудьте настроить его, чтобы избежать некоторых ошибок Safari.box-shadow``filter*will-change: transform
Мы слишком далеко ушли от темы, но достаточно сказать, что это свойство весьма убедительно. Я планирую написать больше об этом в будущем. И, естественно, этоCsS for JavaScript DevelopersПолучить углубленное введение в!filter
Я надеюсь, что этот урок вдохновил вас на добавление или настройку теней! Честно,Немногие разработчикиПоместите этот уровень мысли в их тень. Это означает, что большинство пользователей не привыкли видеть пышные реалистичные тени. Когда мы вкладываем больше энергии в тени, наша продукция будет выделяться из толпы.
посмотри:filter: drop-shadow