Neumorfizm, düz tasarımı ve skeuomorfizmi birleştiren yeni bir tasarım trendidir. Yumuşak, kalıptan çekilmiş plastik, neredeyse 3D tarzı bir görünümle tasarlamanın minimal bir yolu. Şu anda, bu tasarım internette trend oluyor ve tasarımcılar ve geliştiriciler tarafından yaygın olarak kullanılıyor.

Bir sonraki projeniz için neumorfizmi denemek istiyorsanız, başlamanıza yardımcı olacak bazı kod parçacıkları burada.

1. Neumorfik Kartlar

Yukarıdaki neumorfik kartları oluşturmak için aşağıdaki HTML ve CSS kod parçacıklarını kullanın.

HTML Kodu

Tasarım

Lorem ipsum dolor sit amet conectetur adipisicing elit. Quisquam Laboriosam omnis dolore amet sequi nobis ihtiyatlı nisi esse optio recusandae quod.

Devamını oku
















kod

Lorem ipsum dolor sit amet conectetur adipisicing elit. Quisquam Laboriosam omnis dolore amet sequi nobis ihtiyatlı nisi esse optio recusandae quod.

Devamını oku










instagram viewer












Başlatmak

Lorem ipsum dolor sit amet conectetur adipisicing elit. Quisquam Laboriosam omnis dolore amet sequi nobis ihtiyatlı nisi esse optio recusandae quod.

Devamını oku

CSS Kodu

@import url(' https://fonts.googleapis.com/css? family=Poppins: 400,500,600,700,800,900&display=swap');
*
{
kenar boşluğu: 0;
dolgu: 0;
kutu boyutlandırma: kenarlık kutusu;
yazı tipi ailesi: 'Poppins', sans-serif;
}
vücut
{
ekran: esnek;
haklı içerik: merkez;
hizalama öğeleri: merkez;
min-yükseklik: 100vh;
arka plan: #ebf5fc;
}
.konteyner
{
pozisyon: göreceli;
ekran: esnek;
justify-content: boşluk-etrafında;
hizalama öğeleri: merkez;
esnek sarma: sarma;
genişlik: 1100 piksel;
}
.container .kart
{
genişlik: 320 piksel;
kenar boşluğu: 20 piksel;
dolgu: 40 piksel 30 piksel;
arka plan: #ebf5fc;
sınır yarıçapı: 40 piksel;
kutu gölgesi: -6px -6px 20px rgba (255.255.255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: üzerine gelin
{
kutu gölgesi: iç metin -6px -6px 20px rgba (255.255.255,0.5), iç metin 6px 6px 20px rgba (0,0,0,0.05);
}
.container .card .imgBx
{
pozisyon: göreceli;
metin hizalama: merkez;
}
.container .card .imgBx img
{
maksimum genişlik: 120 piksel;
}
.container .card .contentBx
{
pozisyon: göreceli;
üst kenar boşluğu: 20 piksel;
metin hizalama: merkez;
}
.container .card .contentBx h2
{
renk: #32a3b1;
yazı tipi ağırlığı: 700;
yazı tipi boyutu: 1.4em;
harf aralığı: 2 piksel;
}
.container .card .contentBx p
{
renk: #32a3b1;
}
.container .card .contentBx a
{
ekran: satır içi blok;
dolgu: 10px 20px;
üst kenar boşluğu: 15 piksel;
sınır yarıçapı: 40 piksel;
renk: #32a3b1;
yazı tipi boyutu: 16 piksel;
metin-dekorasyon: yok;
kutu gölgesi: -4px -4px 15px rgba (255.255.255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: üzerine gelin
{
kutu gölgesi: ek -4px -4px 10px rgba (255.255.255,0.5), ek 4px 4px 10px rgba (0,0,0,0.1);
}
.container .card a: vurgulu yayılma
{
Ekran bloğu;
dönüştürme: ölçek (0.98);
}
.container .card: üzerine gelin .imgBx,
.container .card: .contentBx üzerine gelin
{
dönüştürme: ölçek (0.98);
}

2. Neumorfik Form

Yukarıdaki neumorfik formu oluşturmak için aşağıdaki HTML ve CSS kod parçacıklarını kullanın.

HTML Kodu

kaydol










 Oturum aç

CSS Kodu

gövde, html {
arka plan rengi: #EBECF0;
}
gövde, p, giriş, seç, metin alanı, düğme {
yazı tipi ailesi: "Montserrat", sans-serif;
harf aralığı: -0.2 piksel;
yazı tipi boyutu: 16 piksel;
}
div, p {
renk: #BABECC;
metin gölgesi: 1px 1px 1px #FFF;
}
form {
dolgu: 16 piksel;
genişlik: 320 piksel;
kenar boşluğu: 0 otomatik;
}
.segment {
dolgu: 32 piksel 0;
metin hizalama: merkez;
}
düğme, giriş {
sınır: 0;
anahat: 0;
yazı tipi boyutu: 16 piksel;
sınır yarıçapı: 320 piksel;
dolgu: 16 piksel;
arka plan rengi: #EBECF0;
metin gölgesi: 1px 1px 0 #FFF;
}
etiket {
Ekran bloğu;
kenar boşluğu-alt: 24 piksel;
genişlik: %100;
}
girdi {
sağ kenar boşluğu: 8px;
kutu gölgesi: iç metin 2px 2px 5px #BABECC, iç metin -5px -5px 10px #FFF;
genişlik: %100;
kutu boyutlandırma: kenarlık kutusu;
geçiş: tüm 0.2'ler giriş-çıkış kolaylığı;
görünüm: yok;
-webkit-görünümü: yok;
}
girdi: odak {
kutu gölgesi: iç metin 1px 1px 2px #BABECC, iç metin -1px -1px 2px #FFF;
}
buton {
renk: #61677C;
yazı tipi ağırlığı: kalın;
kutu gölgesi: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
geçiş: tüm 0.2'ler giriş-çıkış kolaylığı;
imleç: işaretçi;
yazı tipi ağırlığı: 600;
}
düğme: üzerine gelin {
kutu gölgesi: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
düğme: etkin {
kutu gölgesi: iç metin 1px 1px 2px #BABECC, iç metin -1px -1px 2px #FFF;
}
düğme .ikon {
sağ kenar boşluğu: 8px;
}
düğme.birim {
sınır yarıçapı: 8 piksel;
satır yüksekliği: 0;
genişlik: 48 piksel;
yükseklik: 48 piksel;
ekran: satır içi esnek;
haklı içerik: merkez;
hizalama öğeleri: merkez;
kenar boşluğu: 0 8 piksel;
yazı tipi boyutu: 19.2 piksel;
}
düğme.birim .ikon {
sağ kenar boşluğu: 0;
}
düğme.kırmızı {
Ekran bloğu;
genişlik: %100;
renk: #AE1100;
}
.input-grubu {
ekran: esnek;
hizalama öğeleri: merkez;
haklı içerik: esnek başlangıç;
}
.input-group etiketi {
kenar boşluğu: 0;
esnek: 1;
}

3. Neumorfik Navbar

Yukarıdaki neumorfik gezinme çubuğunu oluşturmak için aşağıdaki HTML, CSS ve JavaScript kod parçacıklarını kullanın.

HTML Kodu

İlişkili: Kaliteli HTML Kodlama Örnekleri için En İyi Siteler

Neumorfik Navbar

CSS Kodu

* {
kenar boşluğu: 0;
dolgu: 0;
kutu boyutlandırma: kenarlık kutusu;
}
vücut {
arka plan rengi: #efeeee;
}
.nav {
genişlik: 100vw;
yükseklik: 100 piksel;
arka plan rengi: #efeeee;
kutu gölgesi: 10px 10px 12px 0 rgba (0, 0, 0, 0.07);
sınır yarıçapı: 0 0 10px 10px;
ekran: esnek;
haklı içerik: esnek uç;
hizalama öğeleri: merkez;
dolgu: 0 3rem;
liste stili türü: yok;
}
.nav li.logo {
sağ kenar boşluğu: otomatik;
yazı tipi ailesi: "Roboto", sans-serif;
yazı tipi boyutu: 1.5rem;
renk: karartma;
yazı tipi ağırlığı: 900;
metin gölgesi: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px beyaz;
}
.nav li: değil(.logo) {
marj: 0 1rem;
dolgu: 0.5rem 1.5rem;
kenarlık: 2px katı rgba (255, 255, 255, 0.3);
kutu gölgesi: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px beyaz;
sınır yarıçapı: 10 piksel;
yazı tipi ailesi: "Roboto", sans-serif;
imleç: işaretçi;
geçiş: renk 0.2s hareket hızı, dönüşüm 0.2s hareket hızı;
renk: karartma;
}
.nav li: not(.logo):hover {
dönüştürme: ölçek (1.05);
kutu gölgesi: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px beyaz;
}
.nav li: not(.logo):odak {
anahat: yok;
dönüştürme: ölçek (0.95);
kutu gölgesi: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px beyaz, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) iç metin, -4px -4px 10px beyaz iç metin;
}
.nav li: değil(.logo):hover, .nav li: not(.logo):odak {
renk: turuncu;
}

JavaScript Kodu

tüy.replace();

4. Neumorfik Metin ve Şekiller

Yukarıdaki neumorfik metin ve şekilleri oluşturmak için aşağıdaki HTML ve CSS kod parçacıklarını kullanın.

HTML Kodu

İlişkili: HTML Essentials Hile Sayfası

Daire

Tatlı çörek

Meydan

Pürüzsüz Kare

bardak

Neumorfik Metin

MUO'ya hoş geldiniz

CSS Kodu

İlişkili: 10 Dakikada Öğrenebileceğiniz Basit CSS Kod Örnekleri

*, *::önce sonra {
kutu boyutlandırma: kenarlık kutusu;
}
:kök {
--nRenk: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0.5);
--tlShadow: 6px -6px 10px rgba (255.255.255,0.5);
}
vücut {
kenar boşluğu: 0;
yazı tipi ailesi: sans-serif;
min-yükseklik: 100vh;
ekran: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
esnek sarma: sarma;
arka plan: var(--nColor);
}
.n-başlangıç,
.n-iç metin {
ekran: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
}
.n-daire {
arka plan rengi: var(--nColor);
kutu gölgesi: var(--brShadow), var(--tlShadow);
sınır yarıçapı: %50;
genişlik: 200 piksel;
yükseklik: 200 piksel;
kenar boşluğu: 10 piksel;
}
.n-donut {
arka plan rengi: var(--nColor);
kutu gölgesi: var(--brShadow), var(--tlShadow);
sınır yarıçapı: %50;
genişlik: 200 piksel;
yükseklik: 200 piksel;
kenar boşluğu: 10 piksel;
}
.n-donut .n-iç metin {
arka plan rengi: var(--nColor);
kutu gölgesi: iç metin var(--brShadow), iç metin var(--tlShadow);
sınır yarıçapı: %50;
genişlik: %50;
yükseklik: %50;
kenar boşluğu: 0;
}
.n-tumbler {
arka plan rengi: var(--nColor);
kutu gölgesi: var(--brShadow), var(--tlShadow);
sınır yarıçapı: %50;
genişlik: 200 piksel;
yükseklik: 200 piksel;
kenar boşluğu: 10 piksel;
}
.n-tumbler .n-başlangıç ​​{
arka plan rengi: var(--nColor);
kutu gölgesi: var(--brShadow), var(--tlShadow);
sınır yarıçapı: %50;
genişlik: %80;
yükseklik: %80;
kenar boşluğu: 0;
}
.n-kare {
arka plan rengi: var(--nColor);
kutu gölgesi: var(--brShadow), var(--tlShadow);
sınır yarıçapı: 0;
genişlik: 200 piksel;
yükseklik: 200 piksel;
kenar boşluğu: 10 piksel;
}
.n-pürüzsüz-sq {
arka plan rengi: var(--nColor);
kutu gölgesi: var(--brShadow), var(--tlShadow);
sınır yarıçapı: %10;
genişlik: 200 piksel;
yükseklik: 200 piksel;
kenar boşluğu: 10 piksel;
}
.n-metin {
renk: var(--nColor);
metin gölgesi: var(--brShadow), var(--tlShadow);
yazı tipi boyutu: 6em;
yazı tipi ağırlığı: kalın;
}

5. Neumorfik Düğmeler

Yukarıdaki neumorfik düğmeleri oluşturmak için aşağıdaki HTML, CSS ve JavaScript kod parçacıklarını kullanın.

HTML Kodu

düğmelere basın




play_arrow


Duraklat





Karıştır

CSS Kodu

@import url(' https://fonts.googleapis.com/icon? family=Malzeme+Simgeler');
vücut{
arka plan rengi: #6ec7ff;
}
.btn-tutucu{
Ekran bloğu;
kenar boşluğu: 0 otomatik;
üst kenar boşluğu: 64 piksel;
metin hizalama: merkez;
}
.giriş metni{
kenar boşluğu-alt: 48 piksel;
yazı tipi ailesi: 'Quicksand', sans-serif;
Beyaz renk;
yazı tipi boyutu: 18 piksel;
}
.btn{
genişlik: 110 piksel;
yükseklik: 110 piksel;
yazı tipi boyutu: 30 piksel;
sınır yarıçapı: 30 piksel;
sınır: yok;
Beyaz renk;
dikey hizalama: üst;
-webkit-geçiş: .6s giriş-çıkış kolaylığı;
geçiş: .6s giriş-çıkış kolaylığı;
}
.btn: üzerine gelin{
imleç: işaretçi;
}
.btn: odak{
anahat: yok;
}
.btn: türünün ilk örneği{
sağ kenar boşluğu: 30 piksel;
}
.neumorfik{
arka plan: doğrusal gradyan (145deg, #76d5ff, #63b3e6);
kutu gölgesi: 30px 30px 40px #1e7689,
-30px -30px 40px #7fe5ff;
kenarlık: 3px katı rgba (255, 255, 255, .4);
}
.neumorfik basılmış{
arka plan: doğrusal gradyan (145deg, #63b3e6, #76d5ff);
-webkit-box-shadow: inset 15px 15px 20px -20px rgba (0,0,0,.5);
-moz-box-shadow: inset 15px 15px 20px -20px rgba (0,0,0,.5);
kutu gölgesi: 15px 15px 20px -20px rgba (0,0,0,.5);
}
.neumorfik: odak, .neumorfik: vurgulu, .neumorfik: odak, .neumorfik: vurgulu, .neumorfik-basılmış: odak, .neumorfik-basılmış: vurgulu {
kenarlık: 3px katı rgba (46, 74, 112, .75);
}
.material-ikon {
font-family: 'Malzeme Simgeleri';
yazı tipi ağırlığı: normal;
yazı tipi stili: normal;
yazı tipi boyutu: 32 piksel;
ekran: satır içi blok;
satır yüksekliği: 1;
metin dönüştürme: yok;
harf aralığı: normal;
sözcük kaydırma: normal;
boşluk: nowrap;
yön: ltr;
-webkit-font-düzeltme: kenar yumuşatma;
metin oluşturma: optimizeLegibility;
-moz-osx-font-düzeltme: gri tonlamalı;
yazı tipi-özellik ayarları: 'liga';
}
#Duraklat {
renk: #143664;
görüntü yok;
}

JavaScript Kodu

işlev changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle("neumorfik");
btn.classList.toggle("neumorfik basılmış");
if (btnPressed 'oynat-duraklat') {
Oyna();
} else if (btnPressed 'shuffle-btn') {
Karıştır();
}
}
işlev oynatma() {
var playBtn = document.getElementById('play');
var duraklamaBtn = document.getElementById('pause');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blok';
duraklamaBtn.style.display = 'yok';
} Başka {
playBtn.style.display = 'yok';
duraklamaBtn.style.display = 'blok';
}
}
işlev karıştırma() {
var shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn.style.color == 'beyaz' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '#143664';
} Başka {
shuffleBtn.style.color = 'beyaz';
}
}

Bu makalede kullanılan kaynak kodun tamamına bir göz atmak isterseniz, işte size GitHub deposu.

Not: Bu makalede kullanılan kod MIT Lisanslı.

Web Sitenizi Neumorfizmle Stillendirin

Web sitenize stil vermek için minimalist tasarım konsepti neumorfizm kullanabilirsiniz. Estetik açıdan hoş bir görünüm sağlar. Ancak yine de, neumorfizmin erişilebilirlik sınırlamaları vardır.

Bir web sitesine zarif bir görünüm kazandırmanın farklı yolları vardır. Web sitenizde mülayim kutulara stil vermek istiyorsanız, kutu gölgesi CSS özelliğini deneyin.

Yuvraj Chandra (33 Makale Yayınlandı)

Yuvraj, Hindistan Delhi Üniversitesi'nde Bilgisayar Bilimleri lisans öğrencisidir. Full Stack Web Geliştirme konusunda tutkulu. Yazmadığı zamanlarda farklı teknolojilerin derinliğini keşfediyor.

Yuvraj Chandra'dan Daha Fazla