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

Share this

Related Posts

Previous
Next Post »

2 comments

comments
angga
December 29, 2012 at 8:05 AM delete

Sedikit kesalahan di animasi rotate..awalnya ID (#hoveranimasi) tapi yang di hover class (.kotak2animasi:hover)

# atau disebut ID lebih berfungsi untuk memberikan identitas, contoh di dunia nyata adalah nama orang..

sedangkan . atau disebut CLASS lebih berfungsi untuk menunjukan posisi / layer..

keduanya bisa dipakai dalam satu div. Div berfungsi untuk mengelompokkan layer yang ada di dalamnya..

begitu kira".

Regards

Reply
avatar
Anonymous
December 29, 2012 at 10:37 PM delete

@angga : Wah Thanks Gan koreksinya.. udah saya benerin hhe..

Regards

Reply
avatar

Komentar disini ..