Невморфизмът е нова тенденция в дизайна, която съчетава плосък дизайн и скеуоморфизъм. Това е минимален начин за проектиране с мека, екструдирана пластмаса, почти 3D стил. В момента този дизайн е в тенденция в интернет и се използва широко от дизайнерите и разработчиците.

Ако искате да изпробвате неморфизма за следващия си проект, ето няколко кодови фрагмента, за да започнете.

1. Неоморфни карти

Използвайте следните фрагменти на HTML и CSS код, за да създадете горните неморфни карти.

HTML код

Дизайн

Lorem ipsum dolor sit amet consectetur adipisising elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

Прочетете още
















Код

Lorem ipsum dolor sit amet consectetur adipisising elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

Прочетете още










instagram viewer












Стартиране

Lorem ipsum dolor sit amet consectetur adipisising elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

Прочетете още

CSS код

@import url (' https://fonts.googleapis.com/css? семейство = Poppins: 400 500 600 700 800 900 & display = суап ');
*
{
марж: 0;
подплата: 0;
оразмеряване на кутия: бордюр;
семейство шрифтове: 'Poppins', sans-serif;
}
тяло
{
дисплей: flex;
justify-content: център;
align-items: център;
мин-височина: 100vh;
фон: # ebf5fc;
}
.контейнер
{
позиция: относителна;
дисплей: flex;
justify-content: space-around;
align-items: център;
гъвкаво обвиване: обвиване;
ширина: 1100px;
}
.контейнер .карта
{
ширина: 320px;
марж: 20px;
подложка: 40px 30px;
фон: # ebf5fc;
граница-радиус: 40px;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: hover
{
box-shadow: вмъкване -6px -6px 20px rgba (255,255,255,0.5), вмъкване 6px 6px 20px rgba (0,0,0,0.05);
}
.container .card .imgBx
{
позиция: относителна;
подравняване на текст: център;
}
.container .card .imgBx img
{
максимална ширина: 120px;
}
.container .card .contentBx
{
позиция: относителна;
margin-top: 20px;
подравняване на текст: център;
}
.container .card .contentBx h2
{
цвят: # 32a3b1;
тегло на шрифта: 700;
размер на шрифта: 1.4em;
интервал между букви: 2px;
}
.container .card .contentBx p
{
цвят: # 32a3b1;
}
.container .card .contentBx a
{
дисплей: вграден блок;
подплата: 10px 20px;
margin-top: 15px;
граница-радиус: 40px;
цвят: # 32a3b1;
размер на шрифта: 16px;
декорация на текст: няма;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: hover
{
box-shadow: вложка -4px -4px 10px rgba (255,255,255,0.5), вложка 4px 4px 10px rgba (0,0,0,0.1);
}
.container .card a: hover span
{
дисплей: блок;
трансформация: мащаб (0.98);
}
.container .card: hover .imgBx,
.container .card: hover .contentBx
{
трансформация: мащаб (0.98);
}

2. Неоморфна форма

Използвайте следните HTML и CSS кодови фрагменти, за да създадете горната неморфна форма.

HTML код

Регистрирай се










 Влизам

CSS код

тяло, html {
фон-цвят: # EBECF0;
}
body, p, input, select, textarea, button {
семейство шрифтове: "Montserrat", sans-serif;
интервал между букви: -0,2px;
размер на шрифта: 16px;
}
div, p {
цвят: #BABECC;
text-shadow: 1px 1px 1px #FFF;
}
форма {
подплата: 16px;
ширина: 320px;
марж: 0 автоматично;
}
.segment {
подплата: 32px 0;
подравняване на текст: център;
}
бутон, въведете {
граница: 0;
контур: 0;
размер на шрифта: 16px;
граница-радиус: 320px;
подплата: 16px;
фон-цвят: # EBECF0;
text-shadow: 1px 1px 0 #FFF;
}
етикет {
дисплей: блок;
margin-bottom: 24px;
ширина: 100%;
}
вход {
поле вдясно: 8px;
box-shadow: вложка 2px 2px 5px #BABECC, вложка -5px -5px 10px #FFF;
ширина: 100%;
оразмеряване на кутия: бордюр;
преход: всички 0.2s лекота навлизане;
външен вид: няма;
-webkit-външен вид: няма;
}
вход: фокус {
box-shadow: вмъкване 1px 1px 2px #BABECC, вмъкване -1px -1px 2px #FFF;
}
бутон {
цвят: # 61677C;
шрифт-тегло: получер;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
преход: всички 0.2s лекота навлизане;
курсор: указател;
шрифт-тегло: 600;
}
button: hover {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
бутон: активен {
box-shadow: вмъкване 1px 1px 2px #BABECC, вмъкване -1px -1px 2px #FFF;
}
бутон .icon {
поле вдясно: 8px;
}
button.unit {
граница-радиус: 8px;
височина на линията: 0;
ширина: 48px;
височина: 48px;
дисплей: inline-flex;
justify-content: център;
align-items: център;
марж: 0 8px;
размер на шрифта: 19.2px;
}
button.unit .icon {
поле-дясно: 0;
}
button.red {
дисплей: блок;
ширина: 100%;
цвят: # AE1100;
}
.input-group {
дисплей: flex;
align-items: център;
justify-content: flex-start;
}
.input-group label {
марж: 0;
гъвкавост: 1;
}

3. Neumorphic Navbar

Използвайте следните HTML, CSS и JavaScript кодови фрагменти, за да създадете горната неморфна лента за навигация.

HTML код

Свързани: Най-добрите сайтове за качествени примери за HTML кодиране

Neumorphic Navbar

CSS код

* {
марж: 0;
подплата: 0;
оразмеряване на кутия: бордюр;
}
тяло {
фон-цвят: #efeeee;
}
.nav {
ширина: 100vw;
височина: 100px;
фон-цвят: #efeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0.07);
граничен радиус: 0 0 10px 10px;
дисплей: flex;
justify-content: flex-end;
align-items: център;
подплата: 0 3rem;
list-style-type: няма;
}
.nav li.logo {
поле вдясно: автоматично;
семейство шрифтове: "Roboto", sans-serif;
размер на шрифта: 1.5rem;
цвят: dimgray;
тегло на шрифта: 900;
text-shadow: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px бяло;
}
.nav li: not (.logo) {
марж: 0 1rem;
подплата: 0.5rem 1.5rem;
граница: 2px твърд rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px бяло;
граница-радиус: 10px;
семейство шрифтове: "Roboto", sans-serif;
курсор: указател;
преход: лекота за оцветяване 0.2s, облекчаване за 0.2s;
цвят: dimgray;
}
.nav li: not (.logo): hover {
преобразуване: мащаб (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px бяло;
}
.nav li: not (.logo): focus {
контур: няма;
преобразуване: мащаб (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px white, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) вложка, -4px -4px 10px бяла вложка;
}
.nav li: not (.logo): hover, .nav li: not (.logo): focus {
цвят: оранжевочервен;
}

JavaScript код

feather.replace ();

4. Неоморфен текст и форми

Използвайте следните фрагменти на HTML и CSS код, за да създадете горния неморфен текст и фигури.

HTML код

Свързани: HTML Essentials Cheat Sheet

Кръг

Поничка

Квадрат

Гладък квадрат

Тумблер

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

Добре дошли в MUO

CSS код

Свързани: Прости примери за CSS кодове, които можете да научите за 10 минути

*, *::преди след {
оразмеряване на кутия: бордюр;
}
: root {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0.5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0.5);
}
тяло {
марж: 0;
семейство шрифтове: sans-serif;
мин-височина: 100vh;
дисплей: flex;
align-items: център;
justify-content: център;
гъвкаво обвиване: обвиване;
фон: var (- nColor);
}
.n-outset,
.n-inset {
дисплей: flex;
align-items: център;
justify-content: център;
}
.n-кръг {
цвят на фона: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
граница-радиус: 50%;
ширина: 200px;
височина: 200px;
марж: 10px;
}
.n-поничка {
цвят на фона: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
граница-радиус: 50%;
ширина: 200px;
височина: 200px;
марж: 10px;
}
.n-donut .n-inset {
цвят на фона: var (- nColor);
box-shadow: вмъкване var (- brShadow), вмъкване var (- tlShadow);
граница-радиус: 50%;
ширина: 50%;
височина: 50%;
марж: 0;
}
.n-tumbler {
цвят на фона: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
граница-радиус: 50%;
ширина: 200px;
височина: 200px;
марж: 10px;
}
.n-tumbler .n-outset {
цвят на фона: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
граница-радиус: 50%;
ширина: 80%;
височина: 80%;
марж: 0;
}
.n-square {
цвят на фона: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
граница-радиус: 0;
ширина: 200px;
височина: 200px;
марж: 10px;
}
.n-smooth-sq {
цвят на фона: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
граница-радиус: 10%;
ширина: 200px;
височина: 200px;
марж: 10px;
}
.n-text {
цвят: var (- nColor);
text-shadow: var (- brShadow), var (- tlShadow);
размер на шрифта: 6em;
шрифт-тегло: получер;
}

5. Неоморфни бутони

Използвайте следните кодови фрагменти на HTML, CSS и JavaScript, за да създадете горните неморфни бутони.

HTML код

Натиснете бутоните




play_arrow


пауза





разбъркване

CSS код

@import url (' https://fonts.googleapis.com/icon? семейство = Материал + Икони ');
тяло {
фон-цвят: # 6ec7ff;
}
.btn-holder {
дисплей: блок;
марж: 0 автоматично;
margin-top: 64px;
подравняване на текст: център;
}
.intro-text {
margin-bottom: 48px;
семейство шрифтове: 'Quicksand', sans-serif;
цвят: бял;
размер на шрифта: 18px;
}
.btn {
ширина: 110px;
височина: 110px;
размер на шрифта: 30px;
граница-радиус: 30px;
граница: няма;
цвят: бял;
вертикално подравняване: отгоре;
-webkit-преход: .6s лекота за навлизане;
преход: .6s лекота навлизане;
}
.btn: hover {
курсор: указател;
}
.btn: focus {
контур: няма;
}
.btn: първи от тип {
поле вдясно: 30px;
}
.neumorphic {
фон: линеен градиент (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
граница: 3px твърд rgba (255, 255, 255, .4);
}
.пневморфно пресован {
фон: линеен градиент (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: вмъкване 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: вмъкване 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: вложка 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neumorphic: фокус, .neumorphic: hover, .neumorphic: focus, .neumorphic: hover, .neumorphic-pressed: focus, .neumorphic-press: hover {
граница: 3px твърд rgba (46, 74, 112, .75);
}
.material-icon {
семейство шрифтове: „Материални икони“;
тегло на шрифта: нормално;
стил на шрифта: нормален;
размер на шрифта: 32px;
дисплей: вграден блок;
височина на линията: 1;
преобразуване на текст: няма;
разстоянието между буквите: нормално;
обгръщане на думи: нормално;
бяло пространство: сега
посока: ltr;
-webkit-шрифт-изглаждане: сгладен;
рендиране на текст: optimizeLegibility;
-moz-osx-изглаждане на шрифта: сива скала;
настройки на шрифта-функция: 'liga';
}
#pause {
цвят: # 143664;
дисплей: няма;
}

JavaScript код

функция changeStyle (btnPress) {
var btn = document.getElementById (btnPress);
btn.classList.toggle ("neumorphic");
btn.classList.toggle ("неморфно натиснат");
if (btnPress 'play-pause') {
възпроизвеждане ();
} else if (btnPress 'shuffle-btn') {
разбъркване ();
}
}
функция възпроизвеждане () {
var playBtn = document.getElementById ('възпроизвеждане');
var pauseBtn = document.getElementById ('пауза');
if (playBtn.style.display 'none') {
playBtn.style.display = 'блок';
pauseBtn.style.display = 'няма';
} друго {
playBtn.style.display = 'няма';
pauseBtn.style.display = 'блок';
}
}
разбъркване на функцията () {
var shuffleBtn = document.getElementById ('shuffle-btn');
if (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} друго {
shuffleBtn.style.color = 'бял';
}
}

Ако искате да разгледате пълния изходен код, използван в тази статия, ето Хранилище на GitHub.

Забележка: Кодът, използван в тази статия, е MIT лицензиран.

Оформете уебсайта си с неморфизъм

Можете да използвате минималистичната дизайнерска концепция на неморфизма, за да оформите уебсайта си. Осигурява естетически приятен външен вид. Но все пак, неморфизмът има ограничения за достъпност.

Има различни начини да придадете на уебсайта елегантен вид. Ако искате да оформите меки полета на вашия уебсайт, опитайте CSS свойството box-shadow.

Юврадж Чандра (Публикувани 33 статии)

Yuvraj е студент по компютърни науки в Университета на Делхи, Индия. Той е запален по Full Stack Web Development. Когато не пише, той изследва дълбочината на различните технологии.

Още от Юврадж Чандра