CSS3 box-sizing Untuk Mempermudah Proses Pembuatan Template

CSS3 Box Sizing
Pada kesempatan kali ini, saya akan membagian sebuah tutorial kecil yang sempat saya bagikan dan waktu luang saya yaitu CSS3 box-sizing. Properti ini bisa dibilang properti yang paling berguna dalam proses pembuatan template dan saya menemukan box-sizing ini seminggu yang lalu pada sebuah situs zell-weekeat, pada CSS3 ini bisa membantu kita dalam mengatur lebar area/elemen sehingga jika dilakukan penambahan padding pada elemen tersebut maka lebar dari elemen tersebut tidak akan berubah/tetap.
box-sizing sudah mempunyai atribut default yaitu content-box, border-box, dan ada juga padding-box(namun atribut padding-box ini tidak medukung/kompatibel untuk FF).

Jenis-Jenis Atribut pada box-sizing
Pada gambar diatas anda bisa melihat perbedaan lebar dari masing-masing properti. Sejauh ini box-sizing tidak mendukung pada IE7, namun anda bisa memperbaikinya dengan menggunakan Scheep.

Untuk penerapannya pada semua elemen bisa menggunakan kode dibawah ini:

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Atau kamu ingin menerapkan box-sizing ini pada elemen tertentu yang anda miliki, anda bisa menggunakan kode dibawah ini:

namaelemen {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Ganti namaelemen dengan nama id/class elemen yang anda miliki.

nah, demikian penjelasan singkat tentang box-sizing yang mungkin bisa anda pahami,
Semoga dengan CSS3 ini dapat membantu anda dalam membangun layout yang anda miliki sendiri.


Sumber referensi artikel - Zell Liew · MKR

6 komentar

thanks for the article, may be useful for me, if I may save the first page, though later I can see again next time :-bd
Reply Delete
yes-yes yes .... hehe
Thank you, I hope you like to see and often visited in this blog. :-bd
mantap bro lanjutkan...
Reply Delete

Posting Komentar

no Spam :)

Cancel Reply