Blog yang berisi seputar kode-kode web pada platform blogger.

searchCari blog ini close

CSS3 box-sizing Untuk Mempermudah Proses Pembuatan Template

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
Rizky

hanya sefruit manusia yang masih giat belajar

share_location Medan, North Sumatera, Indonesia

6 komentar

Posting Komentar

no Spam 🙂

disabled_by_defaultBatal Membalas
Selamat Datang
Halo, Selamat Datang di Males Code, Saya Memohon Maaf Website ini sedang dalam perbaikan dan pengembangan sehingga mungkin akan menemukan beberapa bug.
Oke