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:
background:url('../images/anu.jpg') repeat-x;
Sekarang bisa menggunakan seperti ini:
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444), color-stop(25%, #444), to(#000));/*safari chrome*/
background-image: -webkit-linear-gradient(#444, #444 25%, #000);
background-image: -moz-linear-gradient(top, #444, #444 25%, #000);/*mozilla*/
background-image: -ms-linear-gradient(#444, #444 25%, #000);/*msie*/
background-image: -o-linear-gradient(#444, #444 25%, #000);/*opera*/
background-image: linear-gradient(#444, #444 25%, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#000', GradientType=0);/*IE*/
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
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
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
-webkit-transition: color 0.3s linear;
-moz-transition: color 0.3s linear;
-o-transition: color 0.3s linear;
transition: color 0.3s linear;
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.
text-shadow:1px 1px #ccc; /*1px ke bawah, 1px ke kanan dan berwarna abu*/
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.