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

 

A post shared by UX/UI/MOTION DESIGN SECRETS (@alexunderhess.design) on

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);
}
Download