Fitur-fitur Desain CSS 3
20 Jan 2010
Cascading Style Sheets (CSS) adalah suatu notasi scripting yang digunakan untuk mengatur tampilan suatu dokumen berbahasa markup. Penggunaan yang paling umum dari CSS adalah untuk mengatur format halaman web yang HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
Hingga saat artikel ini dibuat, spesifikasi CSS Level 3 (sebut saja CSS3) belum dirilis dan dipublikasikan secara resmi. Meskipun demikian, berbagai browser modern telah menerapkan berbagai fitur yang akan muncul pada CSS3. Tentu yang dimaksud browser modern adalah browser berbasis mesin Mozilla-Gecko (Firefox, Flock) dan Webkit (Apple Safari, Chrome), tidak termasuk MSIE :p.
Berikut berbagai fitur-fitur desain yang dapat diterapkan pada CSS3:
Warna Transparan
Browser: Apple Safari 4+, Firefox 3.0.5+, Google Chrome 1+
Setting warna transparan memerlukan spesifikasi nilai warna dengan notasi RGB skala 0-255 (bukan hexadesimal), dengan tambahan nilai A yang nilainya mulai dari 0 (transparan) hingga 1 (solid).
Unit baru ini disebut nilai RGBA (red, green, blue, alpha).
.box1 {
color: rgba(255, 255, 255, 0.75);
background-color: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.65);
}
Bulatan Sudut
Browser: Apple Safari 3+, Firefox 1+, Google Chrome 1+
Bulatan sudut (atribut border-radius) mengatur tingkat kelengkungan tiap sudut dalam suatu box, membuat sudut box menjadi tampak memiliki lingkaran dengan radius tertentu.
Meskipun border-radius akan menjadi bagian dari spesifikasi CSS3, browser bermesin Mozilla dan Webkit menerapkan versi untuk mereka sendiri masing-masing.
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Tabel perbandingan atribut:
| CSS3 (umum) |
Mozilla | Webkit |
|---|---|---|
border-top-right-radius |
-moz-border-radius-topright |
-webkit-border-top-right-radius |
border-bottom-right-radius |
-moz-border-radius-bottomright |
-webkit-border-bottom-right-radius |
border-bottom-left-radius |
-moz-border-radius-bottomleft |
-webkit-border-bottom-left-radius |
border-top-left-radius |
-moz-border-radius-topleft |
-webkit-border-top-left-radius |
border-radius |
-moz-border-radius |
-webkit-border-radius |
Bayangan Teks
Browser: Apple Safari 3+, Firefox 3.0.5+, Google Chrome 1+
Atribut text-shadow menambahkan bayangan pada teks, termasuk menentukan bagian per bagian (kiri/kanan dan atas/bawah) serta warna.
text-shadow: -2px 2px 10px rgba(0,0,0,.5);
Bayangan Box
Browser: Apple Safari 4+, Firefox 3+, Google Chrome 1+
Atribut box-shadow menambahkan bayangan pada box, sebagaimana text-shadow untuk teks.
-webkit-box-shadow: 0 0 10px rgb(0,0,0); -moz-box-shadow: 0 0 10px rgb(0,0,0); box-shadow: 0 0 10px rgb(0,0,0);
Rotasi
Browser: Apple Safari 4+, Firefox 3.5+, Chrome 1+
Fitur ini tidak menjadi bagian dari spesifikasi CSS3 yang sedang disusun saat ini. Akan tetapi, Webkit menerapkan implementasi transformasi ini, dan kemudian Mozilla mulai mengikutinya.
-webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg);
February 20th, 2010 at 12:15
Keren…keren…:D
June 11th, 2010 at 08:31
Maksih Infonya gan, lg newbie CSS…^^