Генератор на неуморфизъм
Проектирайте меки, релефни неуморфни UI повърхности с двойни сенки и копирайте CSS.
—
Фонът на платното съвпада с цвета на елемента — точно това създава мекия, релефен неуморфен ефект.
По подразбиране светлата и тъмната сянка се извличат от основния цвят. Активирайте, за да ги зададете сами.
За Генератор на неуморфизъм
Генераторът на неоморфизъм проектира мекия, изпъкнал вид „soft UI“: елемент, който изглежда сякаш е издълбан от — или в — повърхността зад него. Изберете един базов цвят и инструментът извежда всичко останало, защото ефектът работи само когато елементът и фонът му споделят един и същ цвят, а дълбочината идва изцяло от две противоположни box-shadow сенки.
Плъзгачи контролират геометрията: размер, радиус на ъглите, разстоянието на сенките, тяхната интензивност и размазване. Четири режима на форма — плосък, вдлъбнат, изпъкнал и натиснат — сменят вътрешния градиент и посоката на сянката, а избирач на източник на светлина премества отблясъка към който и да е от четирите ъгъла, за да съответства на осветлението на дизайна ви.
По подразбиране светлите и тъмните цветове на сянката се изчисляват от базовия цвят, но ръчен режим ви позволява сами да зададете и двата. Генерираният CSS — фон, радиус и двойната box-shadow — е на едно кликване разстояние.
Как да използвате Генератор на неуморфизъм
- Изберете базовия цвят — той се прилага както към елемента, така и към платното зад него.
- Изберете форма: плоска, вдлъбната, изпъкнала или натисната.
- Задайте ъгъла на източника на светлина, за да контролирате къде пада отблясъкът.
- Настройте размера, радиуса на ъглите, разстоянието, интензивността и размазването с плъзгачите.
- Включете ръчни цветове на сянката, ако искате да замените изведените светли и тъмни тонове.
- Копирайте CSS и го поставете върху елемента си.