Нейморфизм - это взгляд, когда кнопка или карта кажется выжатой из самой страницы, как форма, отлитая из мягкого пластика. нет границы, нет цвета заливки, который отличается от фона, просто бледный свет с одной стороны и мягкая тень с другой. Он прекрасно фотографирует в дизайнерских макетах. В реальном интерфейсе легко ошибиться двумя способами: эффект исчезает, или элементы управления становятся трудно увидеть.
Обе проблемы сводятся к небольшому количеству арифметики о цветах и тенях. в этом руководстве объясняется, как мягкий эффект пользовательского интерфейса строится из двух box-shadow слои, как светлые и темные оттенки производятся от одного цвета поверхности, что плоские, вогнутые, выпуклые и нажатые формы меняются и как сохранить нейморфный интерфейс, пригодный для использования в соответствии с правилами контраста WCAG. The Генератор невморфизма CSS создает весь код ниже с предварительным просмотром в реальном времени.
TL;DR: Нейморфный элемент имеет тот же цвет фона, что и страница, и две тени-коробки: более темный, смещенный вниз и вправо, и более светлый, смещенный вверх и влево. Использование ключевого слова вставки на обоих делает элемент выглядит нажатым. Генератор нейморфизма CSS получает оба цвета теней из цвета вашей поверхности, с ползунами для расстояния (от 2 до 50 px), размытия (от 0 до 100 px), интенсивности (от 2 до 40%) и радиуса (от 0 до 80 px), а также плоских, вогнутых, выпуклых и нажатых форм. Световая поверхность по умолчанию дает
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. Эти тени достигают контраста только около 1,5:1 на поверхности, что значительно ниже 3:1 WCAG запрашивает на границах управления, поэтому интерактивным элементам требуется видимая граница или состояние фокуса. Это клиентская сторона, бесплатно, без регистрации.
Что такое невморфизм в дизайне пользовательского интерфейса?
Нейморфизм, также называемый мягким пользовательским интерфейсом, представляет собой визуальный стиль, в котором элементы интерфейса появляются экструдированными или вдавленными в их фон с помощью парных светлых и темных теней вместо границ или контрастных заполнений.Название смешивает & quot;new" и & quot;скевоморфизм& quot; более старый стиль, имитирующий физические материалы. Нейморфизм имитирует один материал, одну непрерывную поверхность, и опирается на воображаемый источник света в левом верхнем углу.
Стиль стал популярным на сайтах витрины дизайна примерно в 2020 г. Он хорошо подходит для декоративных панелей, приборных панелей, просматриваемых на хороших экранах, и одноразовой графики героев. Он плохо подходит для плотных форм, всего, что используется на открытом воздухе, и любого контроля, который пользователь должен найти быстро, по причинам, описанным в разделе доступности.
Как действует нейморфный эффект при CSS?
Эффект нуждается в трех вещах: цвет фона на элементе, который соответствует странице, радиус границы и две тени, отбрасываемые в противоположных направлениях. CSS box-shadow свойство принимает список теней, разделенных запятыми, каждая со смещением x, смещением y, радиусом размытия и цветом, как это документально подтверждено на MDN's ссылка на тень коробки и указано в Фон и границы CSS Уровень 3, йо-
Вот выходные данные генератора и #39;s предустановка света по умолчанию:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
Читайте список теней слева направо Первая тень смещена на 12 пикселей вправо и на 12 вниз, размыта на 24 пикселя, в сером цвете темнее, чем поверхность: то есть оттенок на стороне от света Второй смещен на 12 пикселей влево и на 12 вверх в цвете светлее, чем поверхность: изюминка на стороне, обращенной к свету Потому что элемент's собственный фон такой же #e0e0e0 как страница, нет видимого края. форма существует только как граница, где встречаются две тени.
Почему не проявляется эффект моего невморфизма?
Наиболее распространенной причиной является несоответствие между фоном элемента 's и всем, что за ним. если страница белая и карта #e0e0e0, вы видите серую карту с тенью, а не мягким выдавливанием. установите фон родителя's того же цвета, что и элемент. панель предварительного просмотра генератора's делает это автоматически, поэтому выглядит прямо здесь и неправильно при вставке на белую страницу.
Вторая причина - цвет подсветки, который невозможно увидеть На очень светлой поверхности & quot;light& quot; тень может быть уже чисто белой, а на чистой белой странице белая тень невидима, Также поэтому нейморфизм почти никогда не делается на #ffffff, йо-
Как рассчитываются светлые и темные цвета теней?
Генератор сдвигает каждый красный, зеленый и синий канал цвета поверхности на одинаковую величину: процент интенсивности 255. Светлый оттенок добавляет эту величину, а темный оттенок вычитает его, и каждый канал зажимается в диапазоне от 0 до 255 и закругляется.
Вот расчет для предустановленной поверхности Light по умолчанию #e0e0e0 (224, 224, 224) при 15% интенсивности:
- Сумма смены: 15% от 255 = 38,25.
- Темный оттенок: 224 - 38,25 = 185,75, округленный до 186, что соответствует шестигранному цвету
ba. Результат:#bababa, йо- - Светлый оттенок: 224 + 38,25 = 262,25, зажатый до 255, гекс
ff. Результат:#ffffff, йо-
Шаг 3 показывает предел, который стоит знать. На #e0e0e0 светильник попадает на чистый белый, как только интенсивность проходит (255 - 224) /255 = 12,2%.Любая интенсивность выше, которая делает тень темнее, не делая светлый момент ярче, поэтому эффект становится однобоким. на светлых поверхностях сохраняйте интенсивность вблизи этой точки зажима или выберите немного более темную поверхность, чтобы светлый момент имел место.
То же правило дает другие предустановки:
| Пресет | Поверхность | Расстояние/размытие | Интенсивность | Темный оттенок | Светлый оттенок |
|---|---|---|---|---|---|
| Свет | #e0e0e0 |
12 /24 шт | 15% | #bababa |
#ffffff |
| Карточка | #f0f0f3 |
10 /20 шт | 12% | #d1d1d4 |
#ffffff |
| Темный | #2d2f34 |
12 /24 шт | 12% | #0e1015 |
#4c4e53 |
| Прессовано | #e0e0e0 |
12 /24 шт | 15% | #bababa |
#ffffff |
| Выпуклый | #e0e0e0 |
12 /24 шт | 15% | #bababa |
#ffffff |
В заданном темном варианте вычитание 30,6 из каждого канала (45, 47, 52) дает (14, 16, 21) или #0e1015, и добавление его дает (76, 78, 83), или #4c4e53. Поскольку сдвиг по каналам одинаков, легкий синий оттенок поверхности переходит в оба оттенка, поэтому темная нейморфная карта не превращается в плоский нейтральный серый.
Что меняют четыре формы?
Форма управляет элементом & #39;s фоновой заливкой и тем, сидят ли тени снаружи или внутри него Расстояние, размытие и радиус ведут себя одинаково для всех четырех.
| Форма | предыстор | Тени | похоже |
|---|---|---|---|
| Плоский | Цвет твердой поверхности | Внешний | Возвышенное плато |
| Выпуклый | linear-gradient(145deg, light, dark) |
Внешний | Приподнятый купол, освещенный сверху слева |
| Вогнутый | linear-gradient(145deg, dark, light) |
Внешний | Приподнятое блюдо, изгибающееся внутрь |
| Прессовано | Цвет твердой поверхности | оба inset |
В страница вдвинута впадина |
Пресет Pressed производит
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
С inset, тени нарисованы внутри элемента 's заполняющего ящика, так темный оттенок появляется вдоль верхнего левого внутреннего края и подсветка вдоль нижнего правого. Это меняет сигнал освещения и читается как углубление. Это естественный "active" или "on" состояние для переключателя, состояние покоя которого является плоским.
В предустановке Convex используются полные светлые и темные оттенки в качестве остановок градиента linear-gradient(145deg, #ffffff, #bababa), который является довольно сильной кривой при 15% интенсивности Для более тонкого купола, снизить интенсивность; что смягчает градиент и тени вместе, так как оба приходят из одного и того же двух цветов.
Как взаимодействуют расстояние, размытие и радиус?
Ползунки независимы, но внешний вид зависит от их соотношений.
- Расстояние (от 2 до 50 px) устанавливает, насколько далеко каждая тень смещена по обеим осям. Он контролирует видимую высоту: большие расстояния заставляют элемент плавать выше над страницей.
- Размытие (0 до 100 px) устанавливает, насколько мягки теневые края. размытие около двух расстояний, как в каждом предустановленном, дает характерный подушечный вид. размытие, равное или ниже расстояния, создает тени с твердыми краями, которые больше похожи на вырез.
- Радиус (0 до 80 px) закругляет углы.Soft UI почти всегда использует щедрое закругление; квадратные углы с мягкими тенями выглядят как ошибка рендеринга.
- Интенсивность (от 2 до 40%) устанавливает, насколько далеко оттенки движутся от цвета поверхности.
Практическое начальное соотношение - размытие = 2 x расстояние, радиус = 2 x расстояние, интенсивность вблизи точки зажима для вашей поверхности. для небольших элементов, таких как 40-пиксельная кнопка значка, масштабировать расстояние до 4-6 пикселей; 12-пиксельное смещение на 40-пиксельной кнопке делает тень больше, чем элемент управления.
Доступен ли нейморфизм?
Не по умолчанию. Нейморфный контроль's edge определяется тенями, которые отличаются от поверхности всего на несколько процентов по яркости, и это не соответствует требованию WCAG для видимой границы интерактивных компонентов.
Критерий успеха WCAG 2.2 1.4.11, нетекстовый контраст, требует визуальной информации, необходимой для идентификации компонента пользовательского интерфейса, и его состояний, чтобы иметь отношение контрастности по меньшей мере 3:1 к соседним цветам. в отношении контрастности используется формула относительной яркости, определенная в WCAG 2.2. Проработка предустановки по умолчанию:
| Пара | Относительная яркость | Контрастное соотношение | Встречает 3:1? |
|---|---|---|---|
Темный оттенок #bababa вс поверхность #e0e0e0 |
0,491 против 0,745 | Около 1.47:1 | нет |
Светлый оттенок #ffffff вс поверхность #e0e0e0 |
1.000 против 0.745 | Около 1.32:1 | нет |
Граница #7f7f7f вс поверхность #e0e0e0 |
0,212 против 0,745 | Около 3.03:1 | Просто |
Граница #767676 вс поверхность #e0e0e0 |
0,181 против 0,745 | Около 3.44:1 | Да, с запасом |
Текст #333333 вс поверхность #e0e0e0 |
0,033 против 0,745 | Около 9,6:1 | Да (также передает 4.5:1 для текста) |
И эти теневые фигуры - лучший случай. размытие распространяет цвет тени, поэтому большая часть видимой тени светлее #bababa. Повышение интенсивности мало помогает на световой поверхности, поскольку свет уже зажат на белом.
Чтобы проверить свои собственные цвета, проверка контрастности цвета вычисляет соотношение для любой пары и руководство по проверке цветового контраста подробно объясняет формулу.
Как сохранить внешний вид и соблюдать правила контраста
Вам не нужно отказываться от стиля. Вы должны перестать полагаться на него во всем, что пользователь должен воспринимать.
- Используйте мягкий пользовательский интерфейс для контейнеров, а не для управления. Карты, панели и декоративные колодцы могут быть чисто нейморфными Критерий 1.4.11 - об интерактивных компонентах и содержательной графике, поэтому контейнер, содержимое которого идентифицирует себя, несет гораздо меньший риск, чем кнопка, край которой является единственным существующим знаком.
- Дайте каждому интерактивному элементу настоящую подсказку. Граница в 1 или 2 пикселя цвета 3:1 или выше, контрастный значок или текстовая метка.
- Сделайте фокус очевидным. Добавить а
:focus-visibleконтур в высококонтрастном цвете Мягкие тени не являются индикатором фокуса. - Не сигнализируйте о состоянии только глубиной. Если нажато, значит & quot;on & quot;, также измените значок, метку или цвет.
- Уважайте настройки пользователя. выше предпочитает-контрастный медиа-запрос позволяет добавлять границы или отбрасывать эффект, когда пользователь просит больше контраста.
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
Как шаг за шагом генерировать нейморфизм CSS
- откройте генератор нейморфизма и выберите в качестве отправной точки предустановленный вариант: свет, карта, темный, прессованный или выпуклый.
- Установите цвет поверхности с помощью средства выбора цвета в соответствии с фоном, на котором будет сидеть ваш элемент.
- Отрегулируйте расстояние и размытие для увеличения высоты и мягкости, затем интенсивность для контраста, просматривая предварительный просмотр в прямом эфире.
- Выбирают форму: плоскую, вогнутую, выпуклую или прессованную.
- Установите радиус в соответствии с размером элемента.
- Нажмите Копировать CSS и вставьте три объявления в свое правило Не забудьте дать родительскому цвету одинаковый фон.
Как вы поддерживаете светлые и темные темы?
Создайте один набор значений для каждой темы и поменяйте их местами с пользовательскими свойствами. Пресеты "Свет и тьма" выше дают рабочую пару:
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
Темный нейморфизм имеет зеркало проблемы световой поверхности: тень зажимается в сторону черного, и подсветка несет эффект. проверьте контраст отдельно для каждой темы.
Сравниваются нейморфизм, стекломорфизм и простые тени
Мягкий пользовательский интерфейс - один из нескольких способов показать глубину, и каждый из них имеет разные затраты.
| Стиль | Основной CSS | Кий глубины | Контрастный риск | для |
|---|---|---|---|---|
| Нейморфизм | Два противоборствующих box-shadow слои, соответствующий фон |
Экструзия со страницы | Высокий | Декоративные панели, витринные приборные панели |
| Стекломорфизм | backdrop-filter: blur() и полупрозрачная заливка |
Замороженный слой поверх содержимого | Средний, зависит от того, что позади | Наложения, карты поверх изображений |
| Высота в материальном стиле | Один или два вниз box-shadow слои |
Карта, плавающая над страницей | Низкий | Общие интерфейсы |
| Квартира с бордюрами | border и заполнять цвета |
ни один | Самый низкий | Формы, плотные данные, работа в первую очередь с доступностью |
выше генератор стекломорфизма строит стиль матового стекла и руководство по генератору теней коробки охватывает одиночные и слоистые возвышения теней Для светящегося или тисненый текст, а не коробки, генератор текстовых теней применяет аналогичную идею для типа. Все они перечислены на Концентратор инструментов CSS, йо-
Генератор частный?
Да. предварительный просмотр и CSS генерируются в вашем браузере с помощью JavaScript, ничего не загружается и не сохраняется, и страница продолжает работать в автономном режиме после загрузки. Копирование CSS засчитывается в ежедневный лимит использования, и сообщение появляется, если этот лимит достигнут.
