bikin multi border box dengan 1 elemen ~ Opic Blog

18 Nov 2014

Pada dasarnya, ini dibuat dengan pseudo-elemen menggunakan CSS (:before dan :after) dan Untuk memberikan beberapa latar belakang dan perbatasan,elemen diletak an balik lapisan konten dan disematkan ke titik-titik yang diinginkan dari elemen HTML menggunakan posisi absolute

Pseudo-elemen tidak mengandung konten yang benar dan benar-benar diposisikan. Ini berarti bahwa box dapat ditarik untuk tetap di atas area dari elemen induk tanpa mempengaruhi isinya. Hal ini dapat dilakukan dengan menggunakan kombinasi nilai untuk bagian atas, kanan, bawah, kiri, lebar, dan tinggi merupakan kunci untuk fleksibilitas border box

pseudo-elemen

#borders {
   position: relative;
   z-index: 1;
   padding: 30px;
   border: 5px solid #f00;
   background: #ff9600;
}
#borders:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #ffea00;
   background: #4aa929;
}
#borders:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid #00b4ff;
   background: #fff;
}

<div id='borders'>isi konten disini </div>

Ini adalah salah satu contoh bikin border lebih dari 1 border atau multi border dengan menggunakan pseudo-elements CSS(:before and :after)

Bikin multi border pada 1 elemen dengan css bisa di kreasikan lagi sesuai kebutuhan dan selera
source : http://nicolasgallagher.com

bikin multi border box dengan 1 elemen

Tidak ada komentar