CSS (Cascading Style Sheet) 3 adalah kumpulan kode-kode yang saling berkaitan untuk mengatur format atau tampilan tata letak sebuah halaman web. Kali ini saya akan membahas tentang Fitur terbaru dari CSS yaitu CSS 3.
Kehebatan fitur designer dari CSS3 yaitu :
1. Polaroid dengan Rotate, Scale, & Box Shadow
2. Glossy dengan Gradient & Rounded Corner
Untuk menghasilkan efek glossy seperti contoh di atas, saya menggunakan -moz-border-radius untuk rounded corner dan -moz-linear-gradient untuk gradasinya. Kode disamping kanan adalah kode yang saya gunakan untuk contoh efek glossy yang berwarna biru. Dan untuk tutorial lengkap pembuatan efek glossy.
3. Efek transparan dengan Opacity dan RGBA
Jika class p.trans2 diberi kode opacity:0.8 teks yang tertulis akan ikut menjadi transparan. Berbeda jika kita menggunakan kode rgba(255, 255, 255, 0.8); dimana nilai 0.8 adalah nilai opacity, maka teks tidak ikut menjadi transparan. Dengan menggunakan opacity dan warna RGBA, maka kita tidak perlu lagi menggunakan gambar dengan format *png untuk membuat efek transparan.
4. Kubus 3 dimensi dengan Skew & Rotate
Efek 3 dimensi ini masih menggunakan -moz-transform tapi ditambah dengan skewY(0deg). Dimana (0deg) adalah besar sudut pada koordinat Y. Saya mengalami kesulitan saat membuat kubus ini, karena saya harus meng-akurat-kan besar sudutnya supaya pas dengan sudut yang lain.
5. Multi-Column dengan Column, Gap, & Rule
-moz-column-count untuk menentukan jumlah kolom. -moz-column-gap untuk menentukan jarak antar kolom. -moz-column-rule untuk menambahkan sebuah garis antar kolom.
6. Animasi dengan CSS3 & Tentang Attribute Selector
Efek animasi pada contoh di atas menggunakan -moz-transition dan -webkit-transition sehingga efek animasinya akan terlihat Di browser Mozilla, Chrome, dan Safari. Pada contoh disamping menggunakan kode transisi all 0.6s ease-in-out dimana 0.6s adalah waktu gerak dan ease-in-out adalah tipe efek yang digunakan.
Selain itu kelebihan CSS3 dari CSS sebelumnya :
- Mengatur dan mempercantik interface website.
- Sebaiknya membuat file CSS3 yang terpisah dari file html (External Style Sheet) dan dapat dipanggil di file html. Hal ini dapat mempermudah kita jika terjadi pengeditan file. Karena, jika terjadi perubahan layout pada website, kita hanya perlu mengedit file cssnya saja, tanpa mengubah file htmlnya. Oleh karena itu, External Style Sheet lebih direkomendasikan daripada Inline Style Sheet.
- Dengan CSS3, situs website dapat berkembang dan lebih interaktif lagi.
- Bisa mengurangi ukuran file yang akan di-load dan lebih ringan.
- Lebih mudah dan simple serta dapat menghindari penggunaan tag yang berulang-ulang.
- Banyak yang beranggapan bahwa peran jQuery sudah tidak dibutuhkan lagi setelah CSS3 semakin berkembang kedepannya. Apalagi dari segi size, jQuery jauh lebih besar size-nya daripada CSS3. Tidak hanya jQuery saja, peran Flash saja sudah mulai tergantikan dengan adanya CSS3.
Refrensi :
refrensi 1
refrensi 2
refrensi 3
