Неоморфизм (или мягкий пользовательский интерфейс) стал массовой тенденцией в веб-дизайне. Он создает красивый внешний вид экструдированного пластика, который выглядит очень премиально и современно.
Однако кодирование кнопок Neumorphic с нуля — огромная головная боль.
Математика, скрывающаяся за тенями
Идеальная Neumorphic кнопка требует двух идеально сбалансированных теней: 1. Легкая тень в левом верхнем углу для имитации источника света. 2. Темная тень в правом нижнем углу для имитации глубины.
Если контраст слишком высок, это выглядит резко. Если он слишком низкий, кнопка исчезает на заднем плане.
``` CSS / Классическая формула неоморфизма / фон: #e0e5ec; box-shadow: 9 пикселей 9 пикселей 16 пикселей RGB (163,177,198,0,6), -9 пикселей -9 пикселей 16 пикселей rgba (255 255 255, 0,5); ```
Более быстрый способ
Вместо того, чтобы часами настраивать значения CSS в DevTools, вы можете использовать наш [Генератор кнопок CSS](/en/css-button-generator).
Наш инструмент позволяет вам визуально настроить точный радиус границы, цвет и интенсивность тени, которые вы хотите. Как только он будет выглядеть идеально на экране, просто нажмите «Копировать CSS» и поместите его в свой компонент React или таблицу стилей.
Перестаньте писать сырые тени CSS и начните генерировать их визуально!