Cascading Style Sheet (CSS) Level 3

Cascading Style Sheet Level 3 ?

Seperti yang saya tahu CSS adalah Sekumpulan script-script yang berfungsi untuk mengatur setingan layout Web, biasanya dimulai dengan tanda "#" untuk sebuah setingan area DIV dan "." untuk setingan/aturan sebuah class (imho). CSS3 adalah teknologi baru dalam dunia web, Effect-efect kerennya dan animasi yang ditampilkan hampir sama dengan sebuah animasi Flash ataupun plugin Jquery, bagi Anda yang terbiasa menggunakan CSS untuk mendesain sebuah web tapi belum mengenal script-script baru dalam dunia CSS 3 sebaiknya Anda mempelajarinya karena banyak kelebihan dari CSS 3 yang membuat Website Anda makin keren dan semakin di depan. Anda cukup menggabungkan CSS 3 dan jQuery untuk membuat sebuah website masa depan.

Menurut Wikiperdia

CSS 3 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 dan Anda tidak terlalu pusing untuk mempelajarinya.

Kelebihan CSS3
-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.

Contoh Script dasar CSS3

Membuat lekungan pada kotak

#kotak {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background:#00C4FD;
width: 250px;
height: 70px;
line-height: 50px;
}

 Menggambar lingkaran dengan kode CSS3

#lingkaran {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background:#000;
width: 70px;
height: 70px;
line-height: 70px;
}

Membuat bayangan tidak perlu menggunakan gambar cukup dengan CSS3

#shadow {
-webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
-moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;
box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
background:#00C4FD;
width: 240px;
height: 60px;
line-height: 50px;}

Effect Animasi hover berputar dengan CSS3

#hoveranimasi {
border-radius: 5px;
background:#00C4FD;
width: 260px;
height: 60px;
line-height: 80px;
-webkit-transition: all 0.6s ease-in-out;
}
.hoveranimasi:hover {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);}

Script lainnya Anda cari sendiri di Internet :p

Sumber : Klik disini