Neumorphism adalah tren desain baru yang menggabungkan flat design dan skeuomorphism. Ini adalah cara minimal untuk mendesain dengan tampilan plastik yang lembut dan diekstrusi, hampir bergaya 3D. Saat ini, desain ini sedang tren di internet dan banyak digunakan oleh para desainer dan pengembang.

Jika Anda ingin mencoba neumorfisme untuk proyek Anda berikutnya, berikut adalah beberapa cuplikan kode untuk Anda mulai.

1. Kartu Neumorfik

Gunakan cuplikan kode HTML dan CSS berikut untuk membuat kartu neumorfik di atas.

Kode HTML

Rancangan

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

Baca selengkapnya
















Kode

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

Baca selengkapnya










instagram viewer












Meluncurkan

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

Baca selengkapnya

Kode CSS

@impor url(' https://fonts.googleapis.com/css? family=Poppin: 400.500.600.700.800.900&display=swap');
*
{
margin: 0;
bantalan: 0;
ukuran kotak: kotak perbatasan;
font-family: 'Poppins', sans-serif;
}
tubuh
{
tampilan: fleksibel;
justify-content: pusat;
align-item: tengah;
min-tinggi: 100vh;
latar belakang: #ebf5fc;
}
.wadah
{
posisi: relatif;
tampilan: fleksibel;
justify-content: ruang-sekitar;
align-item: tengah;
bungkus-fleksibel: bungkus;
lebar: 1100 piksel;
}
.wadah .kartu
{
lebar: 320 piksel;
margin: 20 piksel;
bantalan: 40px 30px;
latar belakang: #ebf5fc;
batas-radius: 40px;
bayangan kotak: -6px -6px 20px rgba (255.255.255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: hover
{
box-shadow: inset -6px -6px 20px rgba (255.255.255,0.5), sisipan 6px 6px 20px rgba (0,0,0,0.05);
}
.container .card .imgBx
{
posisi: relatif;
perataan teks: tengah;
}
.container .card .imgBx img
{
lebar maks: 120 piksel;
}
.container .card .contentBx
{
posisi: relatif;
margin-atas: 20px;
perataan teks: tengah;
}
.container .card .contentBx h2
{
warna: #32a3b1;
font-berat: 700;
ukuran font: 1.4em;
spasi huruf: 2px;
}
.container .card .contentBx p
{
warna: #32a3b1;
}
.container .card .contentBx a
{
tampilan: blok sebaris;
bantalan: 10px 20px;
margin-atas: 15px;
batas-radius: 40px;
warna: #32a3b1;
ukuran font: 16px;
dekorasi teks: tidak ada;
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: inset -4px -4px 10px rgba (255.255.255,0.5), sisipan 4px 4px 10px rgba (0,0,0,0.1);
}
.container .card a: rentang hover
{
tampilan: blok;
mengubah: skala (0,98);
}
.container .card: arahkan .imgBx,
.container .card: arahkan .contentBx
{
mengubah: skala (0,98);
}

2. Bentuk Neumorfik

Gunakan potongan kode HTML dan CSS berikut untuk membuat bentuk neumorfik di atas.

Kode HTML

Daftar










 Gabung

Kode CSS

tubuh, html {
warna latar belakang: #EBECF0;
}
badan, p, masukan, pilih, area teks, tombol {
font-family: "Montserrat", sans-serif;
spasi huruf: -0,2px;
ukuran font: 16px;
}
div, p {
warna: #BABECC;
teks-bayangan: 1px 1px 1px #FFF;
}
untuk m {
bantalan: 16px;
lebar: 320 piksel;
margin: 0 otomatis;
}
.segmen {
bantalan: 32px 0;
perataan teks: tengah;
}
tombol, masukan {
batas: 0;
garis besar: 0;
ukuran font: 16px;
batas-radius: 320px;
bantalan: 16px;
warna latar belakang: #EBECF0;
teks-bayangan: 1px 1px 0 #FFF;
}
label {
tampilan: blok;
margin-bawah: 24px;
lebar: 100%;
}
memasukkan {
margin-kanan: 8px;
box-shadow: sisipan 2px 2px 5px #BABECC, sisipan -5px -5px 10px #FFF;
lebar: 100%;
ukuran kotak: kotak perbatasan;
transisi: semua kemudahan masuk 0,2 detik;
penampilan: tidak ada;
-penampilan webkit: tidak ada;
}
masukan: fokus {
box-shadow: sisipan 1px 1px 2px #BABECC, sisipan -1px -1px 2px #FFF;
}
tombol {
warna: #61677C;
font-berat: tebal;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
transisi: semua kemudahan masuk 0,2 detik;
kursor: penunjuk;
font-berat: 600;
}
tombol: arahkan {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
tombol: aktif {
box-shadow: sisipan 1px 1px 2px #BABECC, sisipan -1px -1px 2px #FFF;
}
tombol .ikon {
margin-kanan: 8px;
}
tombol.unit {
batas-radius: 8px;
tinggi garis: 0;
lebar: 48px;
tinggi: 48 piksel;
tampilan: inline-flex;
justify-content: pusat;
align-item: tengah;
margin: 0 8px;
ukuran font: 19.2px;
}
tombol.unit .ikon {
margin-kanan: 0;
}
tombol.merah {
tampilan: blok;
lebar: 100%;
warna: #AE1100;
}
.input-grup {
tampilan: fleksibel;
align-item: tengah;
justify-content: flex-start;
}
.label grup masukan {
margin: 0;
fleksibel: 1;
}

3. Navbar Neumorfik

Gunakan cuplikan kode HTML, CSS, dan JavaScript berikut untuk membuat navbar neumorfik di atas.

Kode HTML

Terkait: Situs Terbaik untuk Contoh Pengkodean HTML Berkualitas

Navbar Neumorfik

Kode CSS

* {
margin: 0;
bantalan: 0;
ukuran kotak: kotak perbatasan;
}
tubuh {
warna latar belakang: #efeeee;
}
.nav {
lebar: 100vw;
tinggi: 100 piksel;
warna latar belakang: #efeeee;
kotak-bayangan: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
batas-radius: 0 0 10px 10px;
tampilan: fleksibel;
justify-content: flex-end;
align-item: tengah;
bantalan: 0 3rem;
list-style-type: tidak ada;
}
.nav li.logo {
margin-kanan: otomatis;
font-family: "Roboto", sans-serif;
ukuran font: 1.5rem;
warna: redup;
font-berat: 900;
text-shadow: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px putih;
}
.nav li: tidak(.logo) {
margin: 0 1rem;
bantalan: 0.5rem 1.5rem;
perbatasan: 2px solid rgba (255, 255, 255, 0.3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px putih;
batas-radius: 10px;
font-family: "Roboto", sans-serif;
kursor: penunjuk;
transisi: warna 0.2s ease-out, transform 0.2s ease-out;
warna: redup;
}
.nav li: tidak(.logo):arahkan {
mengubah: skala (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px putih;
}
.nav li: tidak(.logo):fokus {
garis besar: tidak ada;
mengubah: skala (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px putih, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) sisipan, -4px -4px 10px sisipan putih;
}
.nav li: not(.logo):hover, .nav li: not(.logo):fokus {
warna: oranye;
}

Kode JavaScript

bulu.ganti();

4. Teks dan Bentuk Neumorfik

Gunakan cuplikan kode HTML dan CSS berikut untuk membuat teks dan bentuk neumorfik di atas.

Kode HTML

Terkait: Lembar Cheat Esensi HTML

Lingkaran

Donat

Kotak

Kotak Halus

Segelas

Teks Neumorfik

Selamat datang di MUO

Kode CSS

Terkait: Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

*, *::sebelum setelah {
ukuran kotak: kotak perbatasan;
}
:akar {
--nWarna: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0.5);
--tlBayangan: 6px -6px 10px rgba (255.255.255,0.5);
}
tubuh {
margin: 0;
font-family: sans-serif;
min-tinggi: 100vh;
tampilan: fleksibel;
align-item: tengah;
justify-content: pusat;
bungkus-fleksibel: bungkus;
latar belakang: var(--nColor);
}
.n-awal,
.n-inset {
tampilan: fleksibel;
align-item: tengah;
justify-content: pusat;
}
.n-lingkaran {
warna latar belakang: var(--nColor);
bayangan kotak: var(--brShadow), var(--tlShadow);
batas-radius: 50%;
lebar: 200 piksel;
tinggi: 200 piksel;
margin: 10 piksel;
}
.n-donat {
warna latar belakang: var(--nColor);
bayangan kotak: var(--brShadow), var(--tlShadow);
batas-radius: 50%;
lebar: 200 piksel;
tinggi: 200 piksel;
margin: 10 piksel;
}
.n-donat .n-inset {
warna latar belakang: var(--nColor);
box-shadow: inset var(--brShadow), inset var(--tlShadow);
batas-radius: 50%;
lebar: 50%;
tinggi: 50%;
margin: 0;
}
.n-tumbler {
warna latar belakang: var(--nColor);
bayangan kotak: var(--brShadow), var(--tlShadow);
batas-radius: 50%;
lebar: 200 piksel;
tinggi: 200 piksel;
margin: 10 piksel;
}
.n-tummbler .n-outset {
warna latar belakang: var(--nColor);
bayangan kotak: var(--brShadow), var(--tlShadow);
batas-radius: 50%;
lebar: 80%;
tinggi: 80%;
margin: 0;
}
.n-persegi {
warna latar belakang: var(--nColor);
bayangan kotak: var(--brShadow), var(--tlShadow);
batas-radius: 0;
lebar: 200 piksel;
tinggi: 200 piksel;
margin: 10 piksel;
}
.n-halus-sq {
warna latar belakang: var(--nColor);
bayangan kotak: var(--brShadow), var(--tlShadow);
batas-radius: 10%;
lebar: 200 piksel;
tinggi: 200 piksel;
margin: 10 piksel;
}
.n-teks {
warna: var(--nColor);
teks-bayangan: var(--brShadow), var(--tlShadow);
ukuran font: 6em;
font-berat: tebal;
}

5. Tombol Neumorfik

Gunakan cuplikan kode HTML, CSS, dan JavaScript berikut untuk membuat tombol neumorfik di atas.

Kode HTML

Tekan tombol




play_panah


berhenti sebentar





mengacak

Kode CSS

@impor url(' https://fonts.googleapis.com/icon? keluarga=Bahan+Ikon');
tubuh{
warna latar: #6ec7ff;
}
.btn-pemegang{
tampilan: blok;
margin: 0 otomatis;
margin-atas: 64px;
perataan teks: tengah;
}
.intro-teks{
margin-bawah: 48px;
font-family: 'Quicksand', sans-serif;
warna putih;
ukuran font: 18px;
}
.btn{
lebar: 110 piksel;
tinggi: 110 piksel;
ukuran font: 30px;
batas-radius: 30px;
perbatasan: tidak ada;
warna putih;
vertikal-align: atas;
-webkit-transisi: .6s ease-in-out;
transisi: .6s ease-in-out;
}
.btn: arahkan kursor{
kursor: penunjuk;
}
.btn: fokus{
garis besar: tidak ada;
}
.btn: tipe pertama{
margin-kanan: 30px;
}
.neumorfik{
latar belakang: gradien linier (145 derajat, #76d5ff, #63b3e6);
bayangan kotak: 30px 30px 40px #1e7689,
-30px -30px 40px #7fe5ff;
perbatasan: 3px solid rgba (255, 255, 255, .4);
}
.neumorphic-ditekan{
latar belakang: gradien linier (145 derajat, #63b3e6, #76d5ff);
-webkit-box-shadow: sisipan 15px 15px 20px -20px rgba (0,0,0,.5);
-moz-box-shadow: sisipan 15px 15px 20px -20px rgba (0,0,0,.5);
box-shadow: inset 15px 15px 20px -20px rgba (0,0,0,.5);
}
.neumorphic: fokus, .neumorphic: hover, .neumorphic: fokus, .neumorphic: hover, .neumorphic-pressed: fokus, .neumorphic-pressed: hover {
perbatasan: 3px solid rgba (46, 74, 112, .75);
}
.material-ikon {
font-family: 'Ikon Material';
font-berat: normal;
gaya font: normal;
ukuran font: 32px;
tampilan: blok sebaris;
tinggi garis: 1;
transformasi teks: tidak ada;
spasi huruf: normal;
bungkus kata: biasa;
spasi putih: nowrap;
arah: ltr;
-webkit-font-smoothing: antialias;
perenderan teks: optimalkan Keterbacaan;
-moz-osx-font-smoothing: skala abu-abu;
font-feature-settings: 'liga';
}
#jeda {
warna: #143664;
tampilan: tidak ada;
}

Kode JavaScript

fungsi changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle("neumorfik");
btn.classList.toggle("tekanan neumorfik");
if (btnDitekan 'play-pause') {
bermain();
} else if (btnTekan 'shuffle-btn') {
acak();
}
}
fungsi bermain() {
var playBtn = document.getElementById('bermain');
var pauseBtn = document.getElementById('pause');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blok';
pauseBtn.style.display = 'tidak ada';
} lain {
playBtn.style.display = 'tidak ada';
pauseBtn.style.display = 'blok';
}
}
fungsi acak() {
var shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '#143664';
} lain {
shuffleBtn.style.color = 'putih';
}
}

Jika Anda ingin melihat kode sumber lengkap yang digunakan dalam artikel ini, ini dia Repositori GitHub.

Catatan: Kode yang digunakan dalam artikel ini adalah Berlisensi MIT.

Gaya Situs Web Anda Dengan Neumorfisme

Anda dapat menggunakan konsep desain minimalis neumorphism untuk menata situs web Anda. Ini memberikan tampilan yang estetis. Tapi tetap saja, neumorfisme memiliki keterbatasan aksesibilitas.

Ada berbagai cara untuk memberikan situs web tampilan yang elegan. Jika Anda ingin menata kotak hambar di situs web Anda, cobalah properti CSS box-shadow.

Yuvraj Chandra (33 Artikel Diterbitkan)

Yuvraj adalah mahasiswa sarjana Ilmu Komputer di University of Delhi, India. Dia bersemangat tentang Pengembangan Web Full Stack. Ketika dia tidak menulis, dia menjelajahi kedalaman teknologi yang berbeda.

More From Yuvraj Chandra