Hallo guys, kali ini admin Mrchllaja akan membagikan artikel Cara Membuat Profile Card Neumorphism Hanya Menggunakan HTML CSS.
Apa Sih Itu Neumorphism?
Neumorphism adalah gaya desain yang digunakan dalam antarmuka pengguna grafis. Hal ini biasanya diidentifikasi dengan tampilan lembut dan ringan dengan elemen yang tampak menonjol atau penyok ke latar belakang daripada melayang di atasnya. Kadang-kadang dianggap sebagai media antara skeuomorfisme dan desain datar.
Gaya desain ini menggabungkan elemen dari skeuomorphism dan flat design, sehingga menciptakan tampilan yang realistis namun minimalis dan elegan.
Gaya desain ini memungkinkan pengguna untuk menciptakan tampilan yang lebih halus, lebih dalam, dan lebih realistis dengan sentuhan modern.
Oleh karena itu, admin Mrchllaja membagikan artikel Cara Membuat Profile Card Neumorphism Hanya Menggunakan HTML CSS ini agar tampilan website anda terlihat realistis. Ingin melihat tutorial cara memasangnya? yuk liat dibawah ini :)
Table of Contents
Cara Membuat Profile Card Neumorphism
Ikuti turorial langkah demi langkah yang ada dibawah ini.
Sebelum memasang, disarankan untuk mem-backup source code kalian agar tidak terjadi hal hal yang tidak di inginkan seperti bug di website.
Langkah 1: Memasang kode (CSS)
Buka source code css, lalu tempel kode dibawah ini di file css kalian
.mProfileCard,
.mProfileCard .img-area,
.social-icons a,
.buttons button{
background: #ecf0f3;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
}
.mProfileCard{
position: relative;
width: 350px;
padding: 30px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mProfileCard .icon{
font-size: 17px;
color: #31344b;
position: absolute;
cursor: pointer;
opacity: 0.7;
top: 15px;
height: 35px;
width: 35px;
text-align: center;
line-height: 35px;
border-radius: 50%;
font-size: 16px;
}
.mProfileCard .icon i{
position: relative;
z-index: 9;
}
.mProfileCard .icon.arrow{
left: 15px;
}
.mProfileCard .icon.dots{
right: 15px;
}
.mProfileCard .img-area{
height: 150px;
width: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.img-area .inner-area{
height: calc(100% - 25px);
width: calc(100% - 25px);
border-radius: 50%;
}
.inner-area img{
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.mProfileCard .name{
font-size: 23px;
font-weight: 500;
color: #31344b;
margin: 10px 0 5px 0;
}
.mProfileCard .about{
color: #44476a;
font-weight: 400;
font-size: 16px;
}
.mProfileCard .social-icons{
margin: 15px 0 25px 0;
}
.social-icons a{
position: relative;
height: 40px;
width: 40px;
margin: 0 5px;
display: inline-flex;
text-decoration: none;
border-radius: 50%;
}
.social-icons a:hover::before,
.mProfileCard .icon:hover::before,
.buttons button:hover:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background: #ecf0f3;
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
z-index: -1;
border-radius: 5px;
}
.social-icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
line-height: 40px;
}
.social-icons a.fb i{
color: #4267B2;
}
.social-icons a.twitter i{
color: #1DA1F2;
}
.social-icons a.insta i{
color: #E1306C;
}
.social-icons a.yt i{
color: #ff0000;
}
.mProfileCard .buttons{
display: flex;
width: 100%;
justify-content: space-between;
}
.buttons button{
position: relative;
width: 100%;
border: none;
outline: none;
padding: 12px 0;
color: #31344b;
font-size: 17px;
font-weight: 400;
border-radius: 5px;
cursor: pointer;
z-index: 4;
}
.buttons button:first-child{
margin-right: 10px;
}
.buttons button:last-child{
margin-left: 10px;
}
.mProfileCard .social-share{
display: flex;
width: 100%;
margin-top: 30px;
padding: 0 5px;
justify-content: space-between;
}
.social-share .row{
color: #31344b;
font-size: 17px;
cursor: pointer;
position: relative;
}
.social-share .row::before{
position: absolute;
content: "";
height: 100%;
width: 2px;
background: #e0e6eb;
margin-left: -25px;
}
.row:first-child::before{
background: none;
}
.social-share .row i.icon-2{
position: absolute;
left: 0;
top: 50%;
color: #31344b;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.row:nth-child(1):hover i.fa-heart,
.row:nth-child(2):hover i.fa-comment{
opacity: 1;
pointer-events: auto;
}
Langkah 2: Memasang Ikon Fontawesome
Salin kode link ikon dari Fontawesome dibawah ini, lalu tempel diatas kode </head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
Jika kalian merasa sudah memasang link ikon dari Fontawesome yang seperti diatas ini, kalian tidak harus memasangnya lagi.
Langkah 3: Memasang Profile Card (HTML)
Salin kode HTML dibawah ini, lalu letakkan dimanapun sesuai keinginan kalian masing - masing
<div class="mProfileCard">
<div class="img-area">
<div class="inner-area">
<img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</div>
</div>
<div class="icon arrow"><i class="fas fa-arrow-left"></i></div>
<div class="icon dots"><i class="fas fa-ellipsis-v"></i></div>
<div class="name">Mrchllaja</div>
<div class="about">Designer & Developer</div>
<div class="social-icons">
<a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="insta"><i class="fab fa-instagram"></i></a>
<a href="#" class="yt"><i class="fab fa-youtube"></i></a>
</div>
<div class="buttons">
<button>Message</button>
<button>Subscribe</button>
</div>
<div class="social-share">
<div class="row">
<i class="far fa-heart"></i>
<i class="icon-2 fas fa-heart"></i>
<span>20.4k</span>
</div>
<div class="row">
<i class="far fa-comment"></i>
<i class="icon-2 fas fa-comment"></i>
<span>14.3k</span>
</div>
<div class="row">
<i class="fas fa-share"></i>
<span>12.8k</span>
</div>
</div>
</div>
Dari semua tutorial, disarankan untuk untuk me-modifikasi, karena dari semua kode tidak langsung sama persis seperti contoh.
Selesai, jika langkah - langkah dilakukan dengan benar seharusnya Profile Card Neumorphism bekerja dengan benar.
Demo
Untuk demo kalian bisa melihatnya di Codepen melalui tombol dibawah ini :)
Sekian, tutorial Cara Membuat Profile Card Neumorphism Hanya Menggunakan HTML CSS ini, semoga bermanfaat bagi kalian :)
Referensi:
https://www.codingnepalweb.com/neumorphism-profile-card-html-css
Apa Reaksimu Setelah Membaca Artikel Ini?