Pada kesempatan kali ini saya akan membuat soft element UI dengan css, apa itu soft element ui ?
terinspirasi dari postingan instagram dibawah ini, saya penasaran ingin mengimplementasikannya dengan CSS.
Source code HTML dan CSS bisa didownload di halaman akhir.
View this post on Instagram
Struktur HTMLnya seperti ini :
<div class="light"> <div class="soft-ui"> <i class="fa fa-home"></i> </div> <div class="soft-ui circle"> <i class="fa fa-lock"></i> </div> </div> <div class="dark"> <div class="soft-ui"> <i class="fa fa-home"></i> </div> <div class="soft-ui circle"> <i class="fa fa-lock"></i> </div> </div>
Struktur CSS :
.soft-ui{ width: 100px; height: 100px; border-radius: 15px; margin: 0 auto; text-align: center; font-size: 28px; line-height: 100px; position: relative; box-sizing: border-box; } .soft-ui.circle{ border-radius: 50%; } .light .soft-ui{ color:#f13f6; background-color: #f13f6; /*border: 1px solid rgba(255,255,255,.2);*/ } .soft-ui::before, .soft-ui::after { content: " "; position: absolute; top:0; z-index: 1; border-radius: 15px; display: block; width: 100px; height: 100px; } .soft-ui.circle::before, .soft-ui.circle::after { border-radius: 50%; } .light .soft-ui::before{ box-shadow: -5px -5px 10px rgba(255,255,255, .7); } .light .soft-ui::after{ box-shadow: 5px 5px 10px rgba(55,84,170, 0.1); } .dark .soft-ui{ color:#f8f8f8; background-color: #181818; } .dark .soft-ui::before{ box-shadow: -5px -5px 10px rgba(0,0,0, .2); } .dark .soft-ui::after{ box-shadow: 5px 5px 10px rgba(56, 56, 56, 0.2); }
Comments