Beberapa Contoh Kehebatan Teknologi CSS 3

Posted Posted by Heru Riadyawan in

Seperti yang sudah kita tahu, khususnya bagi teman2 yg mengenal dunia web tentunya selain mengenal bahasa html juga pasti mengenal CSS (Cascading Style Sheet). Ya, CSS yang kita tahu selama ini memang sangat bermanfaat dan memudahkan kita dalam mengatur tampilan sebuah halaman web/blog. Terlebih lagi pada generasi terbaru dari CSS, yaitu CSS3 memiliki berbagai kehebatan yang tidak pernah kubayangkan sebelumnya bahwa hanya dengan CSS kita dapat membuat dan menampilkan hal2 menakjubkan yang sebelumnya hanya dapat dilakukan melalui javascript atau flash.

Dengan CSS3 kita bisa membuat animasi baik 2 dimensi maupun 3 dimensi, membuat button gradasi yang sebelumnya hanya bisa dibuat dengan me-load gambar kini kita tak lagi harus menggunakan file gambar untuk membuat button gradasi, alhasil berimbas pada page load time yang semakin cepat dan ringan.


Berikut adalah berbagai kehebatan yang kini dimungkinkan untuk diterapkan pada halaman web melalui CSS3 :

Pure CSS Coke Can

Note : Klik pada gambar disamping utnuk menuju TKP.
Didalam halaman tersebut kita bisa melihat kehebatan fungsi CSS3 dimana kita dapat memutar kaleng cola tersebut secara 3 dimensi [atau semi 3D] dengan menggulung horizontal scrollbar ke kanan dan kekiri.






Morphing Cubes

Note : Klik pada gambar disamping utnuk menuju TKP.
Didalam halaman tersebut kita akan melihat sebuah animasi kubus yang berputar searah jarum jam dan hebatnya lagi ketika kita meng-klik button "Toogle Shape" yang ada disitu kubus kumpulan kubus tersebut akan berubah bentuk dengan pola melingkar.






Poster Circle


Note : Klik pada gambar disamping utnuk menuju TKP.
Didalam halaman tersebut kita juga akan melihat sebuah animasi sekumpulan angka dengan background kubus bersegi tumpul yang memiliki pola berbentuk seperti kaleng dan berputar dalam pola tertentu.






3D Rotating Cube

Note : Klik pada gambar disamping utnuk menuju TKP.
Didalam halaman tersebut kita akan melihat sebuah kubus transparan yang dapat dianimasikan dengan kendali tombol arrow pada keyboard. Tekan panah kanan atau kiri untuk merotasikan kubus kekanan atau kekiri dan tekan tombol panah atas atau bawah untuk merotasikan kubus keatas atau kebawah.






Multi Cubes Slide

Note : Klik pada gambar disamping utnuk menuju TKP.
Didalam halaman tersebut kita dapat melihat sebuah animasi dimana ketika kita mengarahkan kursor mouse ke salah satu diantara 3 kubus maka kubus tersebut akan bergerak kekanan secara perspektif 3 dimensi.







3D Photo Slide Carousel

Note : Klik pada gambar disamping utnuk menuju TKP.
Didalam halaman tersebut teman2 bisa melihat sebuah galeri foto yang cukup unik berupa slide kumpulan foto yang beritasi berlawanan arah jarum jam. Silahkan langsung ke TKP untuk melihat sendiri kehebatan galeri foto yang dibuat dengan CSS3 tersebut.


Stack Image Gallery

Note : Klik pada gambar disamping utnuk menuju TKP.
Didalam halaman tersebut teman2 bisa melihat satu lagi galeri foto yang unik, dibuat dengan CSS3. Daripada diriku banyak bicara panjang lebar tanpa makna lebih baik teman2 langsung saja menuju TKP.






Pollaroid Gallery

Note : Klik pada gambar disamping utnuk menuju TKP.
Masih seputar CSS3 yang dimanfaatkan untuk membuat galeri foto, kali ini tak perlu penjelasan karena hampir mirip ma yg diatas. ^.^a





Spotlight Text Shadow

Note : Klik pada gambar disamping utnuk menuju TKP.
Nah di halaman tersebut teman2 bisa melihat efek spotlight pada sebuah text yang dibuat dengan CSS3 dan bisa dikendalikan dengan kursor mouse.




Stack Card

Note : Klik pada gambar disamping utnuk menuju TKP.
Untuk yang satu ini cukup menarik, dalam halaman tersebut teman2 bisa melihat efek stack pada beberapa konten yang didesain seperti kartu dan akan bereaksi jika teman2 menggerakkan kursor mouse diatas salah satu kartu. Silahkan langsung menuju TKP saja untuk melihat langsung.






Yah sebenarnya masih banyak efek lain yang ga' kalah keren dari beberapa efek diatas yang memungkinkan ditampilkan pada halaman web dengan memanfaatkan kecanggihan teknologi CSS3 namun karena keterbatasan waktu dan tenagaku jadi sementara kutampilkan 10 dulu. Nanti lebih lanjut menyusul pada postinganku berikutnya.

Beberapa halaman yang kupajang diatas juga mencantumkan source code pembuatannya jadi bisa teman-teman pelajari bersama.

Walau acak2an moga postinganku kali ini bisa bermanfaat buat teman2.

0 comments:

Poskan Komentar