Belajar Tentang CSS3

Apa itu CSS3 ?? - Seperti yang telah dibahas pada kesempatan sebelumnya yaitu CSS. CSS3 tak berbeda jauh dari tingkat-tingkat sebelumnya, hanya saja memiliki performa style yang jauh lebih baik dan tambahan beberapa fungsi yang menarik. Setelah W3C mengeluarkan standar untuk CSS3, banyak pengembang web browser mencoba mengadobsi CSS3 pada browsernya. Masing-masing pengembang web browser mendefinisikan metode sendiri dalam mengembangkan CSS3 pada web browser mereka. Beberapa dari produsen web browser menetapkan aturan untuk menggunakan CSS3, seperti Mozilla yang menggunakan prefix-moz-pada browser-nya untuk menerjemahkan suatu properti CSS3, sama halnya dengan Safari yang menggunakan prefix-webkit-, dan diikuti dan Opera dengan prefix-o-.

1. Mozilla CSS Extension
   Mozilla CSS Extension adalah suatu prefix yang dimengerti browser Mozilla dalam menyajikan CSS3. Penyajian tersebut didukung oleh pengolah penyajian (render-engine) Gecko.
   Aturan Penulisan:
   -moz-<properti CSS3>: <nilai>;
   Contoh:
   //Pembuatan Rounded Corner
   div { border: 2px solid;
           border-radius: 20px;
           -moz-border-radius: 20px;
   }
2. Webkit CSS Extension
   Webkit CSS Extension adalah suatu prefix yang dimengerti browser seperti Safari dan Google Chrome Browser dalam menyajikan CSS3. Penyajian tersebut didukung oleh pengolah penyajian (render engine) AppleWebkit dan KTML.
   Aturan Penulisan:
   -webkit-<properti CSS3>: <nilai>;
   Contoh:
   // Pembuatan Animasi Kotak
   div { witdh: 50px;
           height: 50px;
           background: blue;
           position: relative;
           animation: animasikotak 10s infinite;
           -webkit-animation; animasikotak 10s infinite;
   }
   @keyframes animasikotak {
   from { left: 0px:}
   to {left: 300px;}
   }
   @-webkit-keyframes animasikotak {
   from { left: 0px;}
   to {left: 300px;}
3. Opera CSS Extension
   Opera CSS Extension adalah  suatu prefix yang dimengerti browser Opera dalam menyajikan CSS3. Penyajian tersebut didukung oleh pengolah penyajian (render engine) Presto.
   Aturan Penulisan:
   -o-<properti CSS3>: <nilai>;
   Contoh:
   //Pembuatan Transformasi Rotasi Kotak
   div { width: 100px;
   height: 50px;
   border: 1px solid blue;
   background-color: green;
   transform: rotate (30deg) ;
   -o-transform: rotate(30deg) ;
   }
4. Internet Explore Filter (DHTML)
   Internet Explorer Filter adalah suatu ekstensi yang dikembangkan Microsoft untuk menyajikan efek pada halaman HTML yang dijalankan pada Web Browser Internet Explorer. Filter pada Internet Explorer menggunakan ActiveX. Tidak seperti prefix pada web browser diatas, filter memilki bentuk dan perintah yang berbeda dalam menampilkannya. Informasi lengkap dapat dilihat pada htpp://msdn.microsoft.com/en-us/libraly/aa155073.aspx
   Aturan Penulisan:
   filter:progid.DXImageTransform.Microsoft.<properti>(<atribut>) ;
   Contoh:
   //Pembuatan efek blur pada kotak
   div{ width: 110px;
   height: 50px;
   border: 1px solid blue;
   background-color: green;
   filter:progid:DXImageTransform.Microsoft.Blur (PixelRadius=' 15' ,
   MakeShadow='true' , shadowOpacity=' 0.40') ;
   }
   
   
5. Conditional CSS
   Kondisional CSS adalah suatu teknik pemilihan CSS menyesuaikan kondisi browser yang aktif, pemilihan kondisi CSS ini dikarenakan masing-masing browser memilih keterbatasan dalam penyajian CSS. Umumnya kondisional CSS digunakan untuk web browser yang memiliki karakteristik tesendiri dalam penyajiannya seperti Internet Explorer.
   Aturan Penullisan:Berlaku untuk semua versi browser Internet Explorer
   <!--{ if IE} >
                     <link rel="stylesheet" type="text/css" href='ie_only.css" />
   <![ end if]-->
   Berlaku untuk semua browser selain Interner Explorer
   <!--[if ! IE ]><!-->
                      <link rel="stylesheet" type=text/css href="not_ie.css" />
   <![ end if]-->
   Berlaku untuk browser Internet explorer dengan versi tertentu
   <!--[if ! IE ]><!-->
                      <link rel="stylesheet" type=text/css href="ie_7.css" />
   <![ end if]-->
   
   Jika kalian ingin mendalaminya mungkin bisa terbantu dengan E-Book yang satu ini:
   

   HTML5, CSS3, dan XML

   

   (13,66MB)

   Mungkin itu saja yang dapat saya uraikan mengenai CSS3 ataupun Belajar Tentang CSS3. Bila ada kesempatan di lain waktu mungkin dapat dibahas lagi. Semoga apa yang saya uraikan diatas dapat bermanfaat.