Неуморфизам је нови тренд дизајна који комбинује равни дизајн и скеуоморфизам. То је минималан начин дизајнирања са меканом, екструдираном пластиком, готово у 3Д стилу. Тренутно је овај дизајн у тренду преко Интернета и широко га користе дизајнери и програмери.

Ако желите да испробате неуморфизам за следећи пројекат, ево неколико исечака кода да бисте започели.

1. Неуморпхиц Цардс

Користите следеће исечке ХТМЛ и ЦСС кода да бисте креирали горе наведене неуморфне картице.

ХТМЛ код

Дизајн

Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Куискуам лабориосам омнис долоре амет секуи нобис провидент ниси ессе оптио рецусандае куод.

Опширније
















Код

Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Куискуам лабориосам омнис долоре амет секуи нобис провидент ниси ессе оптио рецусандае куод.

Опширније






instagram viewer












Лансирање

Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Куискуам лабориосам омнис долоре амет секуи нобис провидент ниси ессе оптио рецусандае куод.

Опширније

ЦСС код

@импорт урл (' https://fonts.googleapis.com/css? породица = Попинови: 400,500,600,700,800,900 & дисплаи = свап ');
*
{
маржа: 0;
попуњавање: 0;
димензија кутије: бордер-бок;
породица фонтова: 'Поппинс', санс-сериф;
}
тело
{
дисплеј: флек;
јустифи-цонтент: центар;
алигн-итемс: центер;
мин-висина: 100вх;
бацкгроунд: # ебф5фц;
}
.контејнер
{
положај: сродник;
дисплеј: флек;
јустифи-цонтент: простор око;
алигн-итемс: центер;
флекс-омот: омотач;
ширина: 1100пк;
}
.контејнер .картица
{
ширина: 320пк;
маржа: 20пк;
подлога: 40пк 30пк;
бацкгроунд: # ебф5фц;
радијус границе: 40пк;
бок-схадов: -6пк -6пк 20пк ргба (255,255,255,1), 6пк 6пк 20пк ргба (0,0,0,0.1);
}
.контејнер .картица: ховер
{
бок-схадов: уметак -6пк -6пк 20пк ргба (255,255,255,0.5), уметак 6пк 6пк 20пк ргба (0,0,0,0.05);
}
.контејнер .картица .имгБк
{
положај: сродник;
поравнање текста: центар;
}
.контејнер .картица .имгБк имг
{
максимална ширина: 120пк;
}
.цонтаинер .цард .цонтентБк
{
положај: сродник;
маргин-топ: 20пк;
поравнање текста: центар;
}
.контејнер .картица .садржајБк х2
{
боја: # 32а3б1;
тежина фонта: 700;
величина фонта: 1,4ем;
размак између слова: 2пк;
}
.контејнер .картица .садржајБк стр
{
боја: # 32а3б1;
}
.контејнер .картица .садржајБк а
{
приказ: уградни блок;
подлога: 10пк 20пк;
маргин-топ: 15пк;
радијус границе: 40пк;
боја: # 32а3б1;
величина фонта: 16пк;
декорација текста: ниједна;
бок-схадов: -4пк -4пк 15пк ргба (255,255,255,1), 4пк 4пк 15пк ргба (0,0,0,0.1);
}
.цонтаинер .цард .цонтентБк а: ховер
{
бок-схадов: уметак -4пк -4пк 10пк ргба (255,255,255,0.5), уметак 4пк 4пк 10пк ргба (0,0,0,0.1);
}
.контејнер .картица а: ховер спан
{
дисплеј блок;
трансформација: скала (0,98);
}
.цонтаинер .цард: ховер .имгБк,
.контејнер .картица: ховер .цонтентБк
{
трансформација: скала (0,98);
}

2. Неуморфни облик

Користите следеће исечке ХТМЛ и ЦСС кода да бисте креирали горњу неуморфну ​​форму.

ХТМЛ код

Пријави се










 Пријавите се

ЦСС код

тело, хтмл {
боја позадине: # ЕБЕЦФ0;
}
боди, п, инпут, селецт, тектареа, буттон {
породица фонтова: "Монтсеррат", санс-сериф;
размак између слова: -0,2 пиксела;
величина фонта: 16пк;
}
див, п {
боја: #БАБЕЦЦ;
тект-схадов: 1пк 1пк 1пк #ФФФ;
}
форм {
подлога: 16пк;
ширина: 320пк;
маржа: 0 ауто;
}
.сегмент {
подлога: 32пк 0;
поравнање текста: центар;
}
дугме, унесите {
граница: 0;
обрис: 0;
величина фонта: 16пк;
радијус границе: 320пк;
подлога: 16пк;
боја позадине: # ЕБЕЦФ0;
тект-схадов: 1пк 1пк 0 #ФФФ;
}
ознака {
дисплеј блок;
маргин-боттом: 24пк;
ширина: 100%;
}
улазни {
маргина-десно: 8пк;
бок-схадов: уметак 2пк 2пк 5пк #БАБЕЦЦ, уметак -5пк -5пк 10пк #ФФФ;
ширина: 100%;
димензија кутије: бордер-бок;
прелаз: свих 0,2 с улазак-излазак;
изглед: нема;
-вебкит-изглед: нема;
}
инпут: фоцус {
бок-схадов: уметак 1пк 1пк 2пк #БАБЕЦЦ, уметак -1пк -1пк 2пк #ФФФ;
}
дугме {
боја: # 61677Ц;
фонт-веигхт: болд;
бок-схадов: -5пк -5пк 20пк #ФФФ, 5пк 5пк 20пк #БАБЕЦЦ;
прелаз: свих 0,2 с улазак-излазак;
курсор: показивач;
тежина фонта: 600;
}
буттон: ховер {
бок-схадов: -2пк -2пк 5пк #ФФФ, 2пк 2пк 5пк #БАБЕЦЦ;
}
дугме: активно {
бок-схадов: уметак 1пк 1пк 2пк #БАБЕЦЦ, уметак -1пк -1пк 2пк #ФФФ;
}
буттон .ицон {
маргина-десно: 8пк;
}
буттон.унит {
радијус границе: 8пк;
висина линије: 0;
ширина: 48пк;
висина: 48пк;
дисплеј: инлине-флек;
јустифи-цонтент: центар;
алигн-итемс: центер;
маржа: 0 8пк;
величина фонта: 19,2пк;
}
буттон.унит .ицон {
маргина-десно: 0;
}
буттон.ред {
дисплеј блок;
ширина: 100%;
боја: # АЕ1100;
}
.инпут-гроуп {
дисплеј: флек;
алигн-итемс: центер;
јустифи-цонтент: флек-старт;
}
.инпут-гроуп лабел {
маржа: 0;
флекс: 1;
}

3. Неуморфни Навбар

Користите следеће фрагменте кода ХТМЛ, ЦСС и ЈаваСцрипт да бисте креирали горњу неуморфну ​​навигациону траку.

ХТМЛ код

Повезан: Најбољи сајтови за примере квалитетног ХТМЛ кодирања

Неуморфни Навбар

ЦСС код

* {
маржа: 0;
попуњавање: 0;
димензија кутије: бордер-бок;
}
тело {
бацкгроунд-цолор: #ефееее;
}
.нав {
ширина: 100вв;
висина: 100пк;
бацкгроунд-цолор: #ефееее;
бок-схадов: 10пк 10пк 12пк 0 ргба (0, 0, 0, 0,07);
радијус границе: 0 0 10пк 10пк;
дисплеј: флек;
јустифи-цонтент: флек-енд;
алигн-итемс: центер;
попуњавање: 0 3рем;
лист-стиле-типе: нема;
}
.нав ли.лого {
маргина-десно: ауто;
породица фонтова: "Робото", санс-сериф;
величина фонта: 1,5рем;
боја: тамно сива;
тежина фонта: 900;
тект-схадов: 2пк 2пк 4пк ргба (0, 0, 0, 0.3), -2пк -2пк 4пк бела;
}
.нав ли: нот (.лого) {
маржа: 0 1рем;
подстава: 0,5рем 1,5рем;
граница: 2пк солид ргба (255, 255, 255, 0.3);
бок-схадов: 4пк 4пк 6пк 0 ргба (0, 0, 0, 0.1), -4пк -4пк 6пк бела;
радијус границе: 10пк;
породица фонтова: "Робото", санс-сериф;
курсор: показивач;
прелаз: ублажавање боје 0,2 с, ублажавање промене 0,2 с;
боја: тамно сива;
}
.нав ли: нот (.лого): ховер {
трансформација: скала (1,05);
бок-схадов: 4пк 4пк 10пк 0 ргба (0, 0, 0, 0.1), -4пк -4пк 10пк бела;
}
.нав ли: нот (.лого): фоцус {
обрис: нема;
трансформација: скала (0,95);
бок-схадов: 4пк 4пк 10пк 0 ргба (0, 0, 0, 0.1), -4пк -4пк 10пк бело, 4пк 4пк 10пк 0 ргба (0, 0, 0, 0.1) уложак, -4пк -4пк 10пк бело уметнуто;
}
.нав ли: нот (.лого): ховер, .нав ли: нот (.лого): фоцус {
боја: наранџаста;
}

ЈаваСцрипт код

феатхер.реплаце ();

4. Неуморфни текст и облици

Користите следеће фрагменте кода ХТМЛ и ЦСС да бисте креирали горе наведени неуморфни текст и облике.

ХТМЛ код

Повезан: Матрица ХТМЛ Ессентиалс

Круг

Крофна

Квадрат

Смоотх Скуаре

Тумблер

Неуморфни текст

Добродошли у МУО

ЦСС код

Повезан: Једноставни примери ЦСС кода које можете научити за 10 минута

*, *::пре после {
димензија кутије: бордер-бок;
}
:корен {
--нЦолор: #ааа;
--брСхадов: -6пк 6пк 10пк ргба (0,0,0,0,5);
--тлСхадов: 6пк -6пк 10пк ргба (255,255,255,0.5);
}
тело {
маржа: 0;
породица фонтова: санс-сериф;
мин-висина: 100вх;
дисплеј: флек;
алигн-итемс: центер;
јустифи-цонтент: центар;
флекс-омот: омотач;
позадина: вар (- нЦолор);
}
.н-оутсет,
.н-инсет {
дисплеј: флек;
алигн-итемс: центер;
јустифи-цонтент: центар;
}
.н-цирцле {
боја позадине: вар (- нЦолор);
бок-схадов: вар (- брСхадов), вар (- тлСхадов);
радијус границе: 50%;
ширина: 200пк;
висина: 200пк;
маржа: 10пк;
}
.н-крофна {
боја позадине: вар (- нЦолор);
бок-схадов: вар (- брСхадов), вар (- тлСхадов);
радијус границе: 50%;
ширина: 200пк;
висина: 200пк;
маржа: 10пк;
}
.н-донут .н-инсет {
боја позадине: вар (- нЦолор);
бок-схадов: уметак вар (- брСхадов), уметак вар (- тлСхадов);
радијус границе: 50%;
ширина: 50%;
висина: 50%;
маржа: 0;
}
.н-тумблер {
боја позадине: вар (- нЦолор);
бок-схадов: вар (- брСхадов), вар (- тлСхадов);
радијус границе: 50%;
ширина: 200пк;
висина: 200пк;
маржа: 10пк;
}
.н-тумблер .н-оутсет {
боја позадине: вар (- нЦолор);
бок-схадов: вар (- брСхадов), вар (- тлСхадов);
радијус границе: 50%;
ширина: 80%;
висина: 80%;
маржа: 0;
}
.н-скуаре {
боја позадине: вар (- нЦолор);
бок-схадов: вар (- брСхадов), вар (- тлСхадов);
радијус границе: 0;
ширина: 200пк;
висина: 200пк;
маржа: 10пк;
}
.н-смоотх-ск {
боја позадине: вар (- нЦолор);
бок-схадов: вар (- брСхадов), вар (- тлСхадов);
радијус границе: 10%;
ширина: 200пк;
висина: 200пк;
маржа: 10пк;
}
.н-тект {
боја: вар (- нЦолор);
сенка текста: вар (- брСхадов), вар (- тлСхадов);
величина фонта: 6ем;
фонт-веигхт: болд;
}

5. Неуморфна дугмад

Користите следеће фрагменте кода ХТМЛ, ЦСС и ЈаваСцрипт да бисте креирали горе наведена неуморфна дугмад.

ХТМЛ код

Притисните дугмад




плаи_арров


пауза





мешање

ЦСС код

@импорт урл (' https://fonts.googleapis.com/icon? породица = Материјал + иконе ');
тело {
позадина-боја: # 6ец7фф;
}
.бтн-холдер {
дисплеј блок;
маржа: 0 ауто;
маргин-топ: 64пк;
поравнање текста: центар;
}
.интро-тект {
маргин-боттом: 48пк;
породица фонтова: 'Живи песак', санс-сериф;
бела боја;
величина фонта: 18пк;
}
.бтн {
ширина: 110пк;
висина: 110пк;
величина фонта: 30пк;
радијус границе: 30пк;
граница: нема;
бела боја;
вертикално поравнање: врх;
-вебкит-транзиција: .6с лакоћа уласка;
прелаз: .6с лакоћа уласка;
}
.бтн: ховер {
курсор: показивач;
}
.бтн: фоцус {
обрис: нема;
}
.бтн: прва врста {
маргина-десно: 30 пиксела;
}
.неуморпхиц {
позадина: линеарни градијент (145дег, # 76д5фф, # 63б3е6);
бок-схадов: 30пк 30пк 40пк # 1е7689,
-30пк -30пк 40пк # 7фе5фф;
граница: 3пк солид ргба (255, 255, 255, .4);
}
.неуморфно-пресовани {
позадина: линеарни градијент (145дег, # 63б3е6, # 76д5фф);
-вебкит-бок-схадов: уметак 15пк 15пк 20пк -20пк ргба (0,0,0, .5);
-моз-бок-схадов: уметак 15пк 15пк 20пк -20пк ргба (0,0,0, .5);
бок-схадов: уметак 15пк 15пк 20пк -20пк ргба (0,0,0, .5);
}
.неуморпхиц: фоцус, .неуморпхиц: ховер, .неуморпхиц: фоцус, .неуморпхиц: ховер, .неуморпхиц-Пресс: фоцус, .неуморпхиц-Пресс: ховер {
граница: 3пк солид ргба (46, 74, 112, .75);
}
.материал-ицон {
породица фонтова: 'Иконе материјала';
фонт-веигхт: нормал;
стил фонта: нормалан;
величина фонта: 32пк;
приказ: уградни блок;
висина линије: 1;
трансформација текста: ниједна;
размак између слова: нормално;
заокруживање речи: нормално;
празан простор: новрап;
правац: лтр;
-вебкит-фонт-глађење: антиалиасед;
приказивање текста: оптимизеЛегибилити;
-моз-оск-фонт-Смоотхинг: сиве скале;
фонт-феатуре-сеттингс: 'лига';
}
#паусе {
боја: # 143664;
дисплеј: ниједан;
}

ЈаваСцрипт код

фунцтион цхангеСтиле (бтнПресс) {
вар бтн = доцумент.гетЕлементБиИд (бтнПресс);
бтн.цлассЛист.тоггле ("неуморфни");
бтн.цлассЛист.тоггле ("неуморфно притиснуто");
иф (бтнПресс 'плаи-паусе') {
игра();
} елсе иф (бтнПресс 'схуффле-бтн') {
мешање();
}
}
функција репродукције () {
вар плаиБтн = доцумент.гетЕлементБиИд ('репродукција');
вар паусеБтн = доцумент.гетЕлементБиИд ('пауза');
иф (плаиБтн.стиле.дисплаи 'ноне') {
плаиБтн.стиле.дисплаи = 'блокирај';
паусеБтн.стиле.дисплаи = 'нема';
} остало {
плаиБтн.стиле.дисплаи = 'нема';
паусеБтн.стиле.дисплаи = 'блокирај';
}
}
функција мешања () {
вар схуффлеБтн = доцумент.гетЕлементБиИд ('схуффле-бтн');
иф (схуффлеБтн.стиле.цолор == 'бела' || схуффлеБтн.стиле.цолор == '') {
схуффлеБтн.стиле.цолор = '# 143664';
} остало {
схуффлеБтн.стиле.цолор = 'бело';
}
}

Ако желите да погледате целокупан изворни код који се користи у овом чланку, ево ГитХуб спремиште.

Белешка: Код који се користи у овом чланку је МИТ Лиценсед.

Обликујте своју веб страницу неуморфизмом

Можете користити минималистички концепт дизајна неуморфизма за обликовање веб странице. Пружа естетски угодан изглед. Али ипак, неуморфизам има ограничења приступачности.

Постоје различити начини како веб локацији дати елегантан изглед. Ако желите да обликујете непристојне оквире на својој веб локацији, покрените ЦСС својство бок-схадов.

Иуврај Цхандра (Објављени чланци 33)

Иуврај је студент основних студија рачунарства на Универзитету у Делхију у Индији. Одушевљен је Фулл Стацк веб развојем. Када не пише, истражује дубину различитих технологија.

Још од Иуврај Цхандра