Membuat Profile Card UI dengan Gaya Neumorphism

Cara Membuat Profile Card dengan Gaya Neumorphism

Halo teman-teman! Selamat datang di Blog Tutorial. Hari ini kami berbagi tutorial tentang cara Desain UI Kartu Profil Neumorfisme Bergaya di situs Blogger.

Sebelum kita mulai, alangkah lebih baiknya kalian lihat contoh tampilannya berikut ini:

Live Demo

Langkah Membuat Profile Card UI Neumorphism

Berikut ini Cara langkah mudah Membuat Kartu Profil Desain UI dengan gaya Neumorfisme:

1. Langkah 1 : Buka Dashboard Blogger Anda.
2. Langkah 2 : Buat postingan / halaman baru atau edit Postingan / Halaman yang sudah ada.
3. Langkah 3 : Klik tombol pena di sisi kiri atas lalu beralih ke Tampilan HTML.
4. Langkah 4 : Salin dan tempel kode di bawah ini.

   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
   
   <div class="wrapper">
       <div class="img-area">
         <div class="inner-area">
           <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghn76W5EaCeffQqOIovv2Z7EUTRqEvEGNfE7WmKOGdXDbKcAaVssMGoN17eRdXT94ppSV9neZxBizbrWgAyoiZBQaeCuR5RPHHsWoPnIkNDbaMsZJh3_gT2wDP4h0JCG5UprNTPjUt4pDTHNMLig_Cn3QgPjbPQGrmExpf9niLn0keSrwi4A7Xx-6omytH/s1600-rw/Manager.jpg" />
         </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">elzeno.id</div>
       <div class="about">Bisa Karena Biasa</div>
       <div class="social-icons">
         <a class="fb" href="https://www.facebook.com/elzenod2/"><i class="fab fa-facebook"></i></a>
         <a class="twitter" href="https://x.com/elzenoid"><i class="fab fa-twitter"></i></a>
         <a class="insta" href="https://instagram.com/elzenoid"><i class="fab fa-instagram"></i></a>
         <a class="yt" href="https://www.youtube.com/ELZENOStudio"><i class="fab fa-youtube-square"></i></a>
       </div>
       <div class="buttons">
         <button><a href="&lt;a href=&quot;https://penulis.elzeno.id/p/contact.html&quot; class=&quot;yt&quot;&gt;">Message</a></button>
         <button><a href="&lt;a href=&quot;https://www.blogger.com/follow-blog.g?blogID=3141116456099866094&quot; class=&quot;yt&quot;&gt;">Subscribe</a></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>
   
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}.wrapper,.wrapper .img-area,.social-icons a,.buttons button{background:#ffffff;box-shadow:-3px -3px 7px #ffffff,3px 3px 5px #ceced1}.wrapper{position:relative;width:350px;padding:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}.wrapper .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}.wrapper .icon i{position:relative;z-index:9}.wrapper .icon.arrow{left:15px}.wrapper .icon.dots{right:15px}.wrapper .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}.wrapper .name{font-size:23px;font-weight:500;color:#31344b;margin:10px 0 5px 0}.wrapper .about{color:#44476a;font-weight:400;font-size:16px}.wrapper .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,.wrapper .icon:hover::before,.buttons button:hover:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;border-radius:50%;background:#ffffff;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}.wrapper .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}.wrapper .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}
   </style>

5. Langkah 5 : Edit nama saya dan ubah tautan sosial saya menjadi tautan sosial Anda.
6. Langkah 6 : Anda juga dapat mengubah ikon yang saya gunakan dengan bantuan Font Awesome.
7. Langkah 7 : Lalu Simpan Postingan.

---

Demikian postingan kali ini tentang Cara Neumorfisme Kartu Profil Bergaya Desain UI untuk Blogger. Saya harap Anda menyukai artikel ini dan ikuti blog kami agar mengetahui update artikel kami, beri tahu kami pendapat Anda tentang postingan tersebut dan jika Anda memiliki pertanyaan, Anda dapat Menghubungi kami atau berkomentar melalui kolom komentar di bawah postingan ini.

Live Demo

elzeno.id

Bisa Karena Biasa

20.4k

14.3k

12.8k

Sumber: https://www.techydarshan.eu.org/2021/12/how-to-make-stylish-neumorphism-profile.html

Lanjut ke Link Tujuan

Anda mungkin tertarik artikel ini :

Terima kasih telah membaca artikel kami yang berjudul: Membuat Profile Card UI dengan Gaya Neumorphism, jangan lupa + IKUTI website kami dan silahkan bagikan artikel ini jika menurut Anda bermanfaat. Simak artikel kami lainnya di Google News.

Dukung kami dengan memilih salah satu metode donasi di bawah ini:

Donasi via Saweria Donasi via Trakteer Donasi via PayPal

Dana / OVO / GoPay 0858 6878 6809