Membuat Pengaruh Rainbow Border Dengan Css

Sebenarnya ini bukan border sebenarnya, namun akan terlihat ibarat border pada sebuah kotak, dapat untuk kotak notifikasi ataupun lainnya.

Ini yakni div yang saling tindih dengan div paling luar memakai background warna-warni dan div atasnya dengan background satu warna. Padding dari div luar lah yang membuatnya menjadi ibarat border. Makin besar padding maka makin besar pula dampak border-nya.

Untuk menciptakan dampak rainbow border ini dapat memakai style CSS di bawah ini.

 .box {
   width: 100%;
   padding: 2px;
   background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
   border-radius: 6px;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box
 }
 .content {
   background: #fff;
   padding: 12px;
   font-size: 16px;
   border-radius: 4px;
   box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
 }

Dan HTML nya ibarat di bawah ini.

 <div class="box">
   <div class="content">
     <p>
       Nunc faucibus, velit sed dapibus molestie, odio tortor tempor risus, quis pellentesque odio felis ac augue. Maecenas lobortis lorem urna, sit amet iaculis nibh feugiat sed. Aenean bibendum tristique ante, eu commodo orci condimentum non. Donec dapibus, tortor vitae vulputate accumsan, nisi lacus malesuada turpis, vitae convallis ligula eros vitae sapien. Duis massa elit, pellentesque eget leo ut, ornare blandit nisl. Donec hendrerit scelerisque accumsan. Pellentesque vehicula eu tellus quis tristique.
     </p>
   </div>
 </div>

Makin besar padding pada .div maka makin besar pula dampak border-nya. Untuk background dapat Anda atur sendiri untuk warna yang ingin ditampilkan.

Penampakannya ibarat pada Fiddle di bawah ini.

Sumber https://www.kompiajaib.com/

Share this post