Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini


CSS TRANSITION: ANIMASI
July 5, 2010
Posted by: Fauzie


Satu kelebihan webkit ialah ia berupaya membuat animasi hanya dengan menggunakan "pure CSS". Walaubagaimana pun ia tertakluk kepada browser moden sahaja seperti Firefox, Safari dan Chrome. Dari percubaan yang telah dibuat, ia sangat sesuai dengan browser Safari dan tidak terlalu sesuai dengan Firefox.

Di bawah ini ialah "Live Demo" dengan menggunakan transition effect untuk mendapatkan satu contoh animasi. Ia adalah adaptasi dari demo webpage 24ways.org dan telah saya ubahsuai untuk digunakan dalam blogger.

Sila hover cursor ke atas image dalam "Live Demo" ini.
White water rafting in Queenstown





Untuk mendapatkan efek seperti di atas, jom kita lihat kod-kod CSS dan HTMLnya.

<html>
<head>
<style type="text/css">
a.polaroid {
display: block;
margin: 10em auto 0 auto;
text-decoration: none;
color: #333;
padding: 13px 13px 26px 13px;
width: 200px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.polaroid img {
margin: 0 0 15px;
}

a img {
border: none;
display: block;
}
</style>
</head>
<body>
<div class="photo-album"><a href="http://www.flickr.com/photos/nataliedowne/2340993237/in/set-72157604232220981/" class="polaroid"><img src="http://media.24ways.org/2009/14/img/raft.jpg " alt="">White water rafting in Queenstown</a>
</div>
</body>
</html>


Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: