Postingan
Pengenalan CSS3
Pengertian CSS
CSS3 merupakan generasi ke-3 dari perkembangan
CSS sebelumnya. Jadi pada dasarnya, pengertian CSS3 sama saja dengan pengertian
CSS generasi paling awal. Hanya saja, beberapa standar baru untuk CSS3
menggantikan CSS2 dan mungkin akan membuat kiat dapat bereksplorasi lebih dalam
lagi untuk membuat tampilan situs lebih menarik dan mulai meninggalkan situs
yang membuat menunggu dengan loading yang lama.
CSS3 adalah
versi CSS terbaru
yang masih dikembangkan oleh
W3C.Namun beberapa web browser sudah mendukung
CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan,
hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah
apapun.
CSS 3 memiliki beberapa fitur baru, seperti:
- Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight
- Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word- wrap".
- Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts".
- Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah- ubah, transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi
warna hingga animasi
3D. Dengan CSS3 desainer
lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan
fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti:
multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.
Beberapa kelebihan yang ada pada CSS3 :
- CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya di dalam objek ‘blockquote’ bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri. CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS2/CSS2.1, dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS.
- Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.
- Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound situs.
CSS3 memiliki fasilitas untuk shadow dari suatu div layout, fitur transparansi,
gradien warna pada border, warna pada teks yang diseleksi, fitur skala
memperkecil atau memperbesar layout, kolom pada teks, dan fitur gradien pada
background. CSS 3 kini Menjadi salah satu bentuk style yang
sepertinya wajib ada dalam pembuatan website, blog, atau sejenisnya.
Satu atau dua tahun yang lalu mungkin pernah mengetahui CSS versi 3 telah
keluar, meskipun saat itu masih beta tapi ini menjadi kabar yang
menggembirakan, karena CSS3 tidak akan dirilis jika tidak membawa banyak sekali
fitur-fitur baru di dalamnya, namun pada saat itu baru sedikit browser internet
yang mendukung CSS3 ini. Browser yang mensupport CSS baru Safari v.3, namun
sekarang Firefox pada versi ke 3.6 sudah mendukung CSS3. Bagi anda yang mungkin
belum mengetahui CSS, CSS digunakan dalam pembuatan layout yang tableless,
artinya pembuatan layout tidak lagi menggunakan metode table, karena dampak
dari penggunaan table yang paling terasa adalah beratnya layout yang dihasilkan
karena begitu banyak kode-kode dari hasil penggunaan table. Tableless pun
menjadi standarisasi bagi seorang SEO-er, karena sifatnya yang search engine
friendly. Tidak hanya dalam pembuatan layout, CSS3 pun efektif digunakan dalam
pembuatan style-style yang mempercantik sebuah website.
Pekembangan CSS3
Seperti Apa?
Dari
hasil pengamatan saya pada beberapa situs yang sudah menerapkan CSS3 + HTML5,
saya beranggapan bahwa fungsi jQuery sepenuhnya akan tergantikan oleh CSS3.
Perkiraan ke depan, tidak ada lagi web yang menggunakan jQuery karena sizenya
lebih besar dibanding CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga
mulai terakusisi dengan semakin berkembangnya CSS3. Menurut saya, CSS3
merupakan bahasa pemrograman olah digital gambar/citra tingkat tinggi karena
dengan CSS3, anda bisa menggambar Tokoh Kartun Doraemon seperti contoh berikut
:
Dari
contoh di atas, memang terlihat belum semua browser sudah mendukung secara
keseluruhan penggunaan CSS3, namun, masing-masing browser sudah melakukan
proses perkembangan produk agar bisa mendukung penggunaan CSS3.
Jika anda ingin melihat tentang fitur multiple background pada CSS3, dapat dilihat disini:
Jika anda ingin melihat tentang fitur multiple background pada CSS3, dapat dilihat disini:
http://vikri-newbie.blogspot.com/2013/10/fitur-multiple-background-pada-css3.html
untuk fitur warna, silahkan lihat disini:
http://nhmardianana.blogspot.com/2013/10/warna-dalam-css.html
untuk fitur border, silahkan lihat disini:
http://permanahermawan.blogspot.com/2013/10/fitur-border-pada-css3.html#more
dan untuk fitur text, silahkan lihat disini:
http://aditya-anwar.blogspot.com/2013/10/fitur-text-pada-css3.html
Semoga bermanfaat :)
untuk fitur warna, silahkan lihat disini:
http://nhmardianana.blogspot.com/2013/10/warna-dalam-css.html
untuk fitur border, silahkan lihat disini:
http://permanahermawan.blogspot.com/2013/10/fitur-border-pada-css3.html#more
dan untuk fitur text, silahkan lihat disini:
http://aditya-anwar.blogspot.com/2013/10/fitur-text-pada-css3.html
Semoga bermanfaat :)
Sumber:
