Pages

Minggu, 13 Oktober 2013

Pengenalan CSS 3

CSS (Cascading Style Sheets) adalah salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi  pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya. Sebelum CSS lahir dan berkembang, web programer hanya menggunakan tag <table> pada HTML untuk mengatur tata letak tampilan. 

Keuntungan memakai CSS 3:
  • Untuk mengatur dan memperindah tampilan web.
  • Lebih praktis dan menghemat penggunaan tag yang berulang-ulang
  • Bisa digunakan pada website atau webpage yang lain, misalnya website kita mempunyai 5  halaman (webpage), maka kita tidak perlu membuat pengaturan tampilan atau menulis ulang code-code untuk mengatur tata letak tampilan pada masing-masing halaman sebanyak 5 kali. Kita bisa memanfaatkan code yang sudah ada dengan memanggil tag CSS yang dibuat pada file terpisah (file.css).
Lalu, Apa Pengertian CSS3 itu?

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.

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 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.
Beberapa modul CSS 3 yang paling penting:
  • Selector
  • Model Kotak
  • Latar belakang dan Border
  • Efek teks
  • Transformasi 2D/3D
  • Animasi
  • Layout Kolom
  • User Interface
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

Contoh lain penggunaan CSS3 yaitu membuat efek 3D pada tuliasan, contohnya :


Code untuk contoh di atas sebagai berikut :


Untuk pembahasan teks effect pada CSS3 yang lainnya bisa dilihat  Disini

Referensi:
http://konteseoblog.blogspot.com
http://www.designzzz.com
http://id.wikipedia.org
http://www.jeanotnahasan.com

 

 


Tidak ada komentar:

Posting Komentar