CSS3 box-sizing Untuk Mempermudah Proses Pembuatan Template

Box Sizing
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).

Box Sizing Atribute
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

Rio Us
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 Reply delete Delete
Ruly Jenar Nakula
yes-yes yes .... hehe
Rizky Kurniawan Ritonga
Thank you, I hope you like to see and often visited in this blog. :-bd

Posting Komentar

Blog ini tidak menerima komentar via OpenID atau Anonim.
Link aktif akan secara otomatis terhapus oleh sistem.
Untuk memasukkan link dengan aman, gunakan kode [url=http://sites.com]Teks Link[/url]
Untuk memasukkan kode, gunakan kode <i rel="code">Kode Kamu</i>
Untuk memasukkan kode yang panjang, gunakan kode <i rel="pre">Kode Panjang Kamu</i>
Untuk menyisipkan gambar, gunakan kode [img]Url Gambar[/img]
Untuk memasukkan title, gunakan kode <b rel="h4">Title kamu ...</b>
Untuk memberikan efek huruf tebal pada teks, gunakan kode <strong>Teks Kamu ...</strong>
Untuk memberikan efek huruf miring pada teks, gunakan kode <em>Teks Kamu ...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Emotikon
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Cancel Reply