[CSS] Fitur-fitur Memperindah Halaman dalam CSS3

CSS versi 3.x memberikan berbagai macam fitur yang siap digunakan untuk keperluan mobile dan memperingan halaman dengan animasi yang lebih lengkap. Dengan menggunakan fitur-fitur CSS3, pembuatan template dapat sangat lebih mengurangi gambar dan animasi non CSS. Beberapa fitur diantaranya adalah:

Gradasi Warna

Jika di masa lalu, membuat Gradasi Warna harus menggunakan gambar image kecil yang dijadikan background secara repeat, maka CSS3 akan memberikan cara yang berbeda.

 
Jika dulu adalah seperti ini , tentu dengan gambar yang harus ada:

Sekarang bisa menggunakan seperti ini:

Perhatikan bahwa kode warna yang ada adalah menunjukkan start warna, tujuan warna dan akan berhenti di sekian persen dari warna.

Box Shadow
Jika di masa lalu dengan cara yang sama dengan diatas kita membuat sebuah kotak dengan bayangan gelap adalah dengan menggunakan image, maka sekarang dapat menggunakan CSS. Cara yang digunakan adalah menggunakan box-shadow

Transisi warna untuk mouse over pada sebuah link
Di masa lalu penggunaan transisi warna dibentuk dengan menggunakan javascript. Jika sekarang dapat menggunakan kode CSS seperti berikut

Text Shadow
Ini juga sering dipakai. Untuk memembentuk efek tertentu seperti timbul dan tenggelam dalam sebuah text, dapat digunakan teknik CSS berikut, Biasanya, jika background terang dan tulisan gelap, jika bayangan lebih gelap, akan muncul tulisan timbul.

Masih banyak kode CSS3 seperti rotate image dan lain sebagainya. Namun cukup ini lebih dulu, selengkapnya dapat dipelajari di situs w3schools. Untuk Internet Explorer, CSS3 ini tidak begitu mudah dijalankan, yang akhirnya harus menggunakan javascript untuk mengantisipasinya. Namun menengok bahwa CSS3 dan HTML5 sangat siap untuk keperluan gadget mobile, dan dengan web browser yang makin tidak didominasi Internet Explorer, maka tidak ada salahnya menggunakan CSS3 ini.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">