Neumorphism, atau yang dikenal sebagai Soft UI, adalah gaya desain modern yang menggabungkan warna latar belakang, bentuk, gradasi, highlight, dan bayangan untuk menciptakan efek tampilan yang halus dan hampir menyerupai 3D. Dalam artikel ini, kita akan belajar bagaimana membuat Neumorphism Circle Card menggunakan HTML dan CSS.
Jika Anda tertarik dengan desain UI yang menarik, Anda juga dapat membaca artikel sebelumnya tentang Neumorphism Login Form. Jangan lupa untuk membagikan artikel ini dan mengikuti media sosial kami agar tetap terhubung dengan konten terbaru.
Apa Itu Neumorphism?
Neumorphism adalah gaya desain yang menggabungkan teknik dari Skeuomorphism, Realism, dan Flat Design. Gaya ini menghasilkan elemen yang tampak seperti terangkat dari latar belakang atau seolah ditekan ke dalamnya. Neumorphism sering digunakan dalam pembuatan tombol, kartu informasi, dan elemen UI lainnya yang membutuhkan tampilan elegan dan futuristik.
Penggunaan CSS Box-Shadow dalam Neumorphism
Dalam Neumorphism, properti CSS box-shadow sangat penting karena digunakan untuk menciptakan efek cahaya dan bayangan yang lembut. box-shadow memungkinkan kita menentukan:
X dan Y offset (pergeseran horizontal dan vertikal bayangan)
Blur radius (tingkat keburaman bayangan)
Spread radius (cakupan bayangan)
Warna bayangan
Dengan mengkombinasikan box-shadow positif dan negatif, kita bisa menciptakan efek terangkat atau tertekan dalam elemen UI.
Source Code: Membuat Neumorphism Circle Card
Berikut adalah kode lengkap untuk membuat Neumorphism Circle Card menggunakan HTML dan CSS. Anda dapat langsung menyalin dan menggunakannya dalam proyek Anda.
1. File HTML (index.html)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neumorphism Circle Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="card">
<div class="circle-one">
<div class="purple"></div>
</div>
</div>
<div class="med-card">
<div class="circle">
<img src="logo.png" alt="Logo" />
<h3>Neumorphism Design</h3>
<p>
Neumorphism adalah tren desain UI modern yang memberikan tampilan 3D yang lembut dan elegan.
</p>
<div class="dots-items">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<div class="card">
<div class="circle-two">
<div class="yellow"></div>
</div>
</div>
</div>
</body>
</html>
2. File CSS (style.css)
body {
background: rgb(214, 214, 214);
font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
}
.container {
width: 1000px;
margin: 150px auto;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 250px;
height: 250px;
background: rgb(214, 214, 214);
box-shadow: 5px 5px 10px #b6afaf, -5px -5px 10px #ffffff;
border-radius: 50%;
margin: 70px 20px;
}
.circle-one, .circle-two {
width: 230px;
height: 230px;
border-radius: 50%;
margin: 8px;
display: flex;
justify-content: center;
align-items: center;
}
.purple, .yellow {
width: 30px;
height: 30px;
border-radius: 50%;
}
.purple {
border: 20px solid purple;
}
.yellow {
border: 20px solid blue;
}
.med-card {
width: 400px;
height: 400px;
background: rgb(214, 214, 214);
box-shadow: 5px 5px 10px #b6afaf, -5px -5px 10px #ffffff;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
.med-card img {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.med-card h3 {
color: #333;
font-size: 1.5rem;
}
.med-card p {
color: #665e5e;
padding: 0 20px;
}
.dots-items {
width: 80px;
display: flex;
justify-content: center;
margin-top: 20px;
}
.dot {
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
margin: 0 5px;
}
Dengan mengikuti tutorial ini, Anda telah berhasil membuat Neumorphism Circle Card menggunakan HTML dan CSS. Gaya Neumorphism memberikan tampilan UI yang elegan dan modern, serta cocok digunakan dalam berbagai proyek desain web.
Jika Anda menyukai artikel ini, jangan lupa untuk membagikannya di media sosial dan tetap terhubung untuk mendapatkan tutorial terbaru tentang desain UI dan pengembangan web. Selamat mencoba! 🚀
Posting Komentar