neu-card

Стенд для настройки вида. Сборка не нужна: правим public/css/main.css → страница перезагружается сама (live-reload). Переключатель темы в правом нижнем углу.

Финальный вид

Принятые значения: сила объёма 0.5, блик 0.2, без текстуры. Обычная неуморфная карточка на нейтральном фоне.

Проект Neutral card Нейтральный фон, выпуклая
Accent --accent

Обычная карточка · mp-card

Твоя базовая карточка с сайта — для сравнения с неуморфной рядом. Разметка и стили взяты из public/css/main.css без изменений.

Проект

  • веб-сайт

Базовая карточка проекта с обложкой.

Текстовая

  • исследование

Карточка без обложки — только текст.

Compact

  • дизайн-система

Узкая колонка со ссылкой.

Токены

Числа, которыми управляется вид. Значение по умолчанию — в скобках.

--neu-bg --bg-elevated
Нейтральная заливка: в тёмной теме тёмная, в светлой — светлая. Отличается от --bg на 3%, поэтому объём читается тенями, а не контрастом.
--neu-spread 0.5
Сила объёма. Масштабирует все семь теней разом. 0 — плоская карточка.
--neu-hover-spread 1.5
Множитель объёма при наведении.
--neu-glow-a 0.2
Сила блика из левого верхнего угла. 0 — выключен.
--neu-in-light-mult 0.55 / 0.4
Сила внутреннего блика (тёмная / светлая тема). На светлом фоне белый блик «горит», поэтому там он слабее.
--neu-in-dark-mult 0.75 / 0.5
Сила внутренней тени (тёмная / светлая тема).
--neu-press 1px
Смещение вниз при нажатии.
--neu-press-fade 0.5
Во сколько слабеют внутренние блики при нажатии. Блики НЕ инвертируются — карточка остаётся выпуклой.
--neu-lift -3px
Подъём при наведении.
--neu-radius --radius-card
Скругление. По умолчанию следует настройке темы.
--neu-pad 1.25rem
Внутренние отступы.

Фоны

Неуморфизм читается только в паре с подложкой. Карточка построена от --bg, поэтому на каждом фоне ведёт себя по-разному.

Neutral --surface
Accent --accent

Страница · --bg

Neutral --surface
Accent --accent

Поверхность · --bg-elevated

Neutral --surface
Accent --accent

Карточка на карточке · --surface — худший случай

Neutral --surface
Accent --accent

Акцентная подложка · --accent

Состояния

Наведи курсор и нажми — остальное показано принудительно, чтобы видеть их одновременно.

Rest Покой

rest

Hover Наведи курсор

:hover

Pressed Вдавлена

:active / .is-pressed

Focus Tab или клик

:focus-visible

Disabled Недоступна

.is-disabled

Flat Без объёма

.neu-card--flat

Содержимое

Проверка наполнения: от пустой до переполненной.

Только мета
Только заголовок
Eyebrow Полный набор Подпись под заголовком
Длинный заголовок в несколько строк И подпись тоже длинная, чтобы проверить, как карточка растёт по высоте
С иконкой Иконка сверху
С обложкой Картинка на всю ширину
Акцентная --accent

Размеры

Базовый размер задаётся --neu-min-w / --neu-min-h, дальше карточка растёт от содержимого. В сетке — .neu-card--fluid.

Компактная 160 × 96
Базовая 200 × 128
Крупная 280 × 180
Широкие поля --neu-pad: 2rem
Сильное скругление --neu-radius: 28px

Сетка

Рядом друг с другом тени соседних карточек накладываются. Здесь видно, не слипаются ли.

Три в ряд, gap 1rem

Проект один Продуктовый дизайн
Проект два Исследование
Проект три Дизайн-система

Смешанный рост

Разная высота содержимого — проверка на растяжение по сетке.

Короткая
Средняя по объёму Здесь подпись занимает две строки, и карточка должна потянуться выше соседней
С обложкой Ещё выше

Карточка в карточке

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

Внешняя Карточка-контейнер Поверхность второго уровня, вложенные карточки внутри
Вложенная Тот же --neu-bg
Вложенная Тот же --neu-bg
Вложенная Тот же --neu-bg

То же в светлой теме

Внутренние блики настроены раздельно для тёмной и светлой темы — здесь видна разница.

Светлая тема · тень

На светлом фоне чистый чёрный 0.25 выглядит грязно. Варианты: цвет тени смещён в холодный тёмно-серый, альфа внешних теней снижена через --neu-drop-mult. Эта секция принудительно светлая.

Текущий 47,53,75 · drop 0.5

как в main.css

Мягче 70,75,95 · drop 0.4

светлее тень

Глубже 30,35,55 · drop 0.35

темнее, но меньше альфа

Чёрный 0,0,0 · drop 0.5

было грязно

Контактные карточки

Оригинальная .contact-card с сайта, теперь с неуморфной основой (объём как у .neu-card). Бренд-цвета через модификаторы --brand-tg / --brand-vk / --brand-ya / --brand-email. Цветное наложение — радиальный градиент ::before из --contact-brand.

  • TelegramОтвечу сегодня
  • ВКонтактеСтабильный коннект
  • Яндекс ТелемостВидеозвонок

    • Матрица · neu-card + шейдер под бликом

    Обычная неуморфная карточка (тени снаружи, блик из угла) с живым шейдером внутри, под бликом. Слева — чистая neu-card для сравнения, справа — та же карточка с анимированным mesh-слоем. Объём и блик сохранены, шейдер только подсвечивает поверхность.

    Сетка 3 × 2

    Проект Обычная только тени и блик
    Проект Шейдер · demo mesh под бликом
    Проект Шейдер · email mesh под бликом
    Проект Шейдер · tg mesh под бликом
    Проект Шейдер · vk mesh под бликом
    Проект Шейдер · ya mesh под бликом

    Одиночная крупная

    Кейс Neu + shader объём снаружи, анимация внутри
    Кейс Static + shader блик и анимация, без hover-отклика

    Mesh gradient

    Единственный используемый шейдер — анимированный mesh gradient (цветные пятна плавно перетекают). Ниже — карточка-пример только с ним. Контактные и матричные карточки выше используют тот же шейдер с брендовыми цветами.

    Пример · mesh gradient

    mesh gradient