Неоморфизм - это новая тенденция дизайна, сочетающая плоский дизайн и скевоморфизм. Это минималистичный способ создания дизайна из мягкого экструдированного пластика, почти стилизованного под 3D. В настоящее время этот дизайн популярен в Интернете и широко используется дизайнерами и разработчиками.

Если вы хотите опробовать неоморфизм в своем следующем проекте, вот несколько фрагментов кода, с которых можно начать.

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

Используйте следующие фрагменты кода HTML и CSS для создания вышеуказанных неуморфных карточек.

HTML код

Дизайн

Lorem ipsum dolor sit amet conctetur adipisicing elit. Quisquam labouriosam omnis dolore amet sequi nobis Provisionnt nisi esse optio recusandae quod.

Читать далее
















Код

Lorem ipsum dolor sit amet conctetur adipisicing elit. Quisquam labouriosam omnis dolore amet sequi nobis Provisionnt nisi esse optio recusandae quod.

Читать далее










instagram viewer












Запуск

Lorem ipsum dolor sit amet conctetur adipisicing elit. Quisquam labouriosam omnis dolore amet sequi nobis Provisionnt nisi esse optio recusandae quod.

Читать далее

Код CSS

@import url (' https://fonts.googleapis.com/css? family = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
маржа: 0;
отступ: 0;
размер коробки: рамка-рамка;
семейство шрифтов: 'Poppins', без засечек;
}
тело
{
дисплей: гибкий;
justify-content: center;
align-items: center;
мин-высота: 100vh;
фон: # ebf5fc;
}
.контейнер
{
положение: относительное;
дисплей: гибкий;
justify-content: пространство вокруг;
align-items: center;
flex-wrap: обертка;
ширина: 1100 пикселей;
}
.container .card
{
ширина: 320 пикселей;
маржа: 20 пикселей;
отступ: 40 пикселей 30 пикселей;
фон: # ebf5fc;
радиус границы: 40 пикселей;
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
{
максимальная ширина: 120 пикселей;
}
.container .card .contentBx
{
положение: относительное;
маржа сверху: 20 пикселей;
выравнивание текста: центр;
}
.container .card .contentBx h2
{
цвет: # 32a3b1;
font-weight: 700;
размер шрифта: 1.4em;
межбуквенный интервал: 2 пикселя;
}
.container .card .contentBx p
{
цвет: # 32a3b1;
}
.container .card .contentBx a
{
дисплей: встроенный блок;
отступ: 10 пикселей 20 пикселей;
маржа сверху: 15 пикселей;
радиус границы: 40 пикселей;
цвет: # 32a3b1;
размер шрифта: 16 пикселей;
текстовое оформление: нет;
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: диапазон наведения
{
дисплей: блок;
преобразовать: масштаб (0,98);
}
.container .card: hover .imgBx,
.container .card: hover .contentBx
{
преобразовать: масштаб (0,98);
}

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

Используйте следующие фрагменты кода HTML и CSS, чтобы создать вышеупомянутую неуморфную форму.

HTML код

Зарегистрироваться










 Авторизоваться

Код CSS

body, html {
цвет фона: # EBECF0;
}
body, p, input, select, textarea, button {
семейство шрифтов: "Montserrat", без засечек;
межбуквенный интервал: -0,2 пикселей;
размер шрифта: 16 пикселей;
}
div, p {
цвет: #BABECC;
тень текста: 1px 1px 1px #FFF;
}
форма {
отступ: 16 пикселей;
ширина: 320 пикселей;
маржа: 0 авто;
}
.segment {
отступ: 32px 0;
выравнивание текста: центр;
}
button, input {
граница: 0;
наброски: 0;
размер шрифта: 16 пикселей;
радиус границы: 320 пикселей;
отступ: 16 пикселей;
цвет фона: # EBECF0;
тень текста: 1px 1px 0 #FFF;
}
метка {
дисплей: блок;
нижнее поле: 24 пикселя;
ширина: 100%;
}
Вход {
поле справа: 8 пикселей;
box-shadow: вставка 2px 2px 5px #BABECC, вставка -5px -5px 10px #FFF;
ширина: 100%;
размер коробки: рамка-рамка;
переход: все 0,2 с легкость входа-выхода;
внешний вид: нет;
-webkit-appearance: нет;
}
input: focus {
box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
кнопка {
цвет: # 61677C;
font-weight: жирный;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
переход: все 0,2 с легкость входа-выхода;
курсор: указатель;
font-weight: 600;
}
button: hover {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
button: active {
box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
button .icon {
поле справа: 8 пикселей;
}
button.unit {
радиус границы: 8 пикселей;
высота строки: 0;
ширина: 48 пикселей;
высота: 48 пикселей;
дисплей: встроенный гибкий;
justify-content: center;
align-items: center;
маржа: 0 8px;
размер шрифта: 19,2 пикселей;
}
button.unit .icon {
маржа справа: 0;
}
button.red {
дисплей: блок;
ширина: 100%;
цвет: # AE1100;
}
.input-group {
дисплей: гибкий;
align-items: center;
justify-content: гибкий старт;
}
.input-group label {
маржа: 0;
гибкость: 1;
}

3. Неуморфный навигатор

Используйте следующие фрагменты кода HTML, CSS и JavaScript, чтобы создать вышеупомянутую неуморфную панель навигации.

HTML код

Связанный: Лучшие сайты для качественных примеров кодирования HTML

Неуморфный навигатор

Код CSS

* {
маржа: 0;
отступ: 0;
размер коробки: рамка-рамка;
}
тело {
цвет фона: #efeeee;
}
.nav {
ширина: 100ввт;
высота: 100 пикселей;
цвет фона: #efeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
радиус границы: 0 0 10 пикселей 10 пикселей;
дисплей: гибкий;
justify-content: гибкий конец;
align-items: center;
набивка: 0 3 бэр;
тип-стиль-список: нет;
}
.nav li.logo {
маржа-право: авто;
семейство шрифтов: "Робото", без засечек;
размер шрифта: 1,5 бэр;
цвет: тускло-серый;
font-weight: 900;
text-shadow: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px белый;
}
.nav li: not (.logo) {
маржа: 0 1бэр;
набивка: 0,5 бэр, 1,5 бэр;
граница: 2px solid rgba (255, 255, 255, 0.3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px белый;
радиус границы: 10 пикселей;
семейство шрифтов: "Робото", без засечек;
курсор: указатель;
переход: ослабление цвета 0,2 с, затухание трансформации 0,2 с;
цвет: тускло-серый;
}
.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 белый, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) вставка, -4px -4px 10px белая вставка;
}
.nav li: not (.logo): hover, .nav li: not (.logo): focus {
цвет: оранжево-красный;
}

Код JavaScript

перо. заменить ();

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

Используйте следующие фрагменты кода HTML и CSS, чтобы создать вышеупомянутый неуморфный текст и формы.

HTML код

Связанный: Шпаргалка по HTML Essentials

Круг

Пончик

Квадратный

Гладкий квадрат

Стакан

Неуморфный текст

Добро пожаловать в MUO

Код CSS

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

*, *::до после {
размер коробки: рамка-рамка;
}
:корень {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0.5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
тело {
маржа: 0;
семейство шрифтов: без засечек;
мин-высота: 100vh;
дисплей: гибкий;
align-items: center;
justify-content: center;
flex-wrap: обертка;
фон: var (- nColor);
}
.n-outset,
.n-inset {
дисплей: гибкий;
align-items: center;
justify-content: center;
}
.n-circle {
цвет фона: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
радиус границы: 50%;
ширина: 200 пикселей;
высота: 200 пикселей;
маржа: 10 пикселей;
}
.n-donut {
цвет фона: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
радиус границы: 50%;
ширина: 200 пикселей;
высота: 200 пикселей;
маржа: 10 пикселей;
}
.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%;
ширина: 200 пикселей;
высота: 200 пикселей;
маржа: 10 пикселей;
}
.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;
ширина: 200 пикселей;
высота: 200 пикселей;
маржа: 10 пикселей;
}
.n-smooth-sq {
цвет фона: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
радиус границы: 10%;
ширина: 200 пикселей;
высота: 200 пикселей;
маржа: 10 пикселей;
}
.n-text {
цвет: var (- nColor);
тень текста: var (- brShadow), var (- tlShadow);
размер шрифта: 6em;
font-weight: жирный;
}

5. Неуморфные кнопки

Используйте следующие фрагменты кода HTML, CSS и JavaScript для создания вышеуказанных неуморфных кнопок.

HTML код

Нажимайте кнопки




play_arrow


Пауза





тасовать

Код CSS

@import url (' https://fonts.googleapis.com/icon? семья = Материал + Иконки ');
тело{
цвет фона: # 6ec7ff;
}
.btn-holder {
дисплей: блок;
маржа: 0 авто;
верхнее поле: 64 пикселя;
выравнивание текста: центр;
}
.intro-text {
нижнее поле: 48 пикселей;
семейство шрифтов: «Зыбучие пески», без засечек;
цвет белый;
размер шрифта: 18 пикселей;
}
.btn {
ширина: 110 пикселей;
высота: 110 пикселей;
размер шрифта: 30 пикселей;
радиус границы: 30 пикселей;
граница: нет;
цвет белый;
вертикальное выравнивание: сверху;
-webkit-transition: легкость установки .6s;
переход: легкость входа-выхода .6s;
}
.btn: hover {
курсор: указатель;
}
.btn: focus {
наброски: нет;
}
.btn: first-of-type {
поле справа: 30 пикселей;
}
.neumorphic {
фон: линейно-градиентный (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
граница: 3px solid rgba (255, 255, 255, .4);
}
.neumorphic-press {
фон: линейно-градиентный (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: focus, .neumorphic: hover, .neumorphic: focus, .neumorphic: hover, .neumorphic-press: focus, .neumorphic-press: hover {
граница: сплошной RGBB размером 3 пикселя (46, 74, 112, 0,75);
}
.material-icon {
семейство шрифтов: «Значки материалов»;
шрифт: нормальный;
стиль шрифта: нормальный;
размер шрифта: 32 пикселя;
дисплей: встроенный блок;
высота строки: 1;
текст-преобразование: нет;
межбуквенный интервал: нормальный;
перенос слов: нормальный;
белое пространство: nowrap;
направление: ltr;
-webkit-font-smoothing: сглаживание;
текст-рендеринг: optimizeLegibility;
-moz-osx-font-smoothing: оттенки серого;
настройки-особенности-шрифта: 'лига';
}
#Пауза {
цвет: # 143664;
дисплей: нет;
}

Код JavaScript

function changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle («неуморфный»);
btn.classList.toggle («неуморфно-отжатый»);
if (btnPressed 'play-pause') {
играть();
} else if (btnPressed 'shuffle-btn') {
перемешать ();
}
}
function play () {
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 = 'блок';
}
}
function shuffle () {
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 статей)

Юврадж - студент бакалавриата по информатике в Университете Дели, Индия. Он увлечен веб-разработкой Full Stack. Когда он не пишет, он исследует глубину различных технологий.

Ещё от Yuvraj Chandra