Semakin banyak kreatifitas bisa kita ciptakan dengan datangnya CSS 3, terutama CSS 3 Transition - Transformation. Hal-hal yang sebelumnya begitu sulit diciptakan, dan kalaupun bisa harus menggunakan javascript atau jQuery dan Motool, kini cukup menggunakan kode CSS terbaru yang kita kenal sebagai CSS 3. Masih cukup terbatas memang, namun cukuplah untuk sementara ini sambil menunggu para browser berlomba untuk melengkapi diri pada dukungannya terhadap CSS 3. Tak lama lagi bila opera (
Opera 1062)) dan Mozilla (
Segera download Mozilla Firefox 4.0 beta 6! Biar nggak ketinggalan kereta!) juga sudah mempercepat dukungannya terhadap semua kode CSS 3, seperti CSS3 animation, pasti akan lebih banyak lagi desain yang lebih menarik akan tercipta. Saat ini cukup kita manfaatkan semaksimal mungkin CSS3 transition dan transformation yang sudah didukung dengan cukup baik oleh Mozilla dan Opera, serta Google Chrome dan Safari (webkit).
Membuat sebuah tampilan profile blogger-blogspot dalam bentuk animasi tentulah akan sangat menarik sebagai penyegar wajah blog. Kita akan buat sebuah transparansi pada gambar profil, hingga profil blogger ini mampu membuat penasaran pengunjung karena gambar/image yang terlihat samar-samar. Melalui kondisi ini diharapkan mampu membuat pengunjung menyentuhkan cursornya ke salah satu bagian box blogger profile yang terdapat di sidebar widget (umumnya dipasang di sini!). Apabila kondisi ini terpenuhi, maka dengan segera akan terjadi reaksi pada photo yang terpajang untuk bergerak ke arah kiri dan dilanjutkan sebuah putaran untuk sedikit menciptakan keatraktifan dan baru kemudian secara perlahan gambar yang terlihat suram menjadi kelihatan tajam karena efek transparansi hilang. Animasi ini dengan sengaja memang kita buat dengan melibatkan margin supaya gerak yang tercipta lebih dinamis dan bikin mata melotot serta nafas ngos-ngosan (
memangnya lagi ngapain pakai ngos-ngosan? Ah ... bikin pikiran kotor jadi muncul di batok kepala. He ... he ... emang kamu suka yang pakai ngos-ngosan?!
langsung aja ke TKP...!!!
dl.profile-datablock {clear: both; text-align:center;}
#sidebar .Profile img.profile-img {
border: 8px solid #aaa;
opacity: 0.3;
border-radius: 6px;
margin: 20px 0 20px 60px;
padding: 4px;
background: #eee;
box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
#sidebar .Profile:hover img.profile-img {
opacity: 1.0;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 16px #222;
margin: 40px 0px 20px 10px;
-o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}
Movie : Rumah Dara
