6/29/2010

CSS3 : Belajar Membuat Box, Border, Background, dan coloumn

CSS3 : Belajar Membuat Box, Border, Background, dan coloumn - Belajar membuat variasi box dengan CSS3. 
Box Sizing
#box-sizing {
padding: 0 30px 0 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;}
Deskripsi : Memungkinkan Sobat untuk mengubah cara browser menghitung lebar suatu elemen, yaitu, apakah atau tidak untuk memasukkan padding, perbatasan, dan margin, dalam perhitungan lebar atau tinggi.Browser Support:  IE8 +, Firefox 3 +, Opera 9.6 +, Chrome 2 +, Safari 3.1 +
Box Shadow

#box-shadow {
 -webkit-box-shadow: #244766 5px 5px 10px;
 -moz-box-shadow: #244766 10px 10px 10px;
 box-shadow: #244766 10px 10px 10px;
}


Deskripsi:  Membuat efek drop-shadow pada kotak.
Dukungan Browser:  Firefox 3.5 +, Chrome 2 +, Safari 4 +


RGBA Color








#rgba {
 background: rgba(98, 135, 167, .5);
}









Deskripsi: Memungkinkan alpha (transparansi) nilai yang akan diberikan, bersama dengan RGB.Dukungan Browser: Firefox 3 +, Opera 10,1 +, Chrome 2 +, Safari 3.1 +












HSLA Color










#hsla {
 background: hsla(207,38%,47%,.8);
}







Deskripsi: Memungkinkan warna harus ditetapkan oleh Hue, Saturation, Lightness, dan Alpha (transparansi).Dukungan Browser: Firefox 3 +, Opera 10,1 +, Chrome 2 +, Safari 3.1 +








Border Radius










#border-radius {
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
}





Deskripsi: Membuat sudut bulat pada kotak, memungkinkan Anda untuk menentukan sudut dibulatkan.Dukungan Browser: Firefox 3 +, Chrome 4 +, Safari 3.1 +












Multiple Bacground








#multi-bg {
 background: url(images/bg-cake.gif) center center no-repeat, url(images/bg-diamond.gif) top left repeat;
}

/* Below is for IE6-8 */
#multi-bg {
 background: transparent url(images/bg-diamond.gif) repeat top left;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-cake.gif', sizingMethod='crop');
 -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-cake.gif', sizingMethod='crop')";
}





Deskripsi: Memungkinkan lebih dari satu latar belakang untuk ditempatkan pada elemen HTML tunggal.Dukungan Browser: Firefox 3,6 +, Chrome 2 +, Safari 3.1 +(Catatan: contoh kode yang juga mencakup solusi Hacky untuk IE6 +)
























Multiple Coloumn










#columns {
 -webkit-column-count: 2;
 -webkit-column-width: 250px;
 -webkit-column-gap: 35px;
 -webkit-column-rule: 1px solid #6d94b4;
 -moz-column-count: 2;
 -moz-column-width: 240px;
 -moz-column-gap: 35px;
 -moz-column-rule: 1px solid #6d94b4;
 column-count: 2;
 column-width: 240px;
 column-gap: 35px;
 column-rule: 1px solid #6d94b4;
}





Deskripsi: Memungkinkan teks dalam suatu elemen yang akan dibagi menjadi colums, mirip dengan tata letak surat kabar.Dukungan Browser: Firefox 3 +, Chrome 2 +, Safari 3.1 +
Labels: