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 CONTOH KE 3
July 5, 2010
Posted by: Fauzie


Contoh berikut merupakan kombinasi contoh-contoh animasi polaroid sebelum ini dan aplikasinya telah diperluaskan bagi memberi effect animasi yang tidak kurang hebatnya.

Bagi contoh ke tiga ini kita membuat kepinggan "polaroid" seolah-olah bertaburan dan saiznya pula berbeza di antara satu dengan lain.

Jika anda ingin memcubanya, sila copy paste kod-kod CSS dan htmlnya dan upload gambar-gambar favorite anda.


<html>
<head>
<style type="text/css">

.amp {
font-family:Garamond,Baskerville,Georgia,serif !important;
font-style:italic;
font-weight:normal;
border: none;
}
a.polaroid {
font-family:"Lucida handwriting", "Snell Roundhand", "Helvetica Neue",Arial,Helvetica,sans-serif;
font-size: 18px;
display: block;
text-decoration: none;
color: #333;
padding: 10px 10px 20px 10px;
width: 150px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.7em;
-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-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;
width: 150px;
height: 150px;
}

a img {
border: none;
display: block;
}


.photo-album {
position: relative;
width: 80%;
margin: 0 auto;
margin-left:50px;
max-width: 70em;
height: 450px;
margin-top: 5em;
min-width: 400px;
max-width: 470px;
}
.photo-album .polaroid {
position: absolute;
}
.photo-album h2 {
osition: absolute;
z-index: 5;
top: 150px;
text-align: center;
width: 100%;
line-height: 1.9;
}

.photo-album h2 span {
background-color: white;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
padding: 0.4em 0.8em 0.3em 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);
border: 1px solid #6A6A6A;
}
.photo-album .small {
width: 75px;
padding: 6px 6px 12px 6px;
font-size: 0.6em;
}
.photo-album .small img {
width: 75px;
height: 75px;
}
.photo-album .medium {
width: 200px;
padding: 13px 13px 26px 13px;
font-size: 0.8em;
}
.photo-album .medium img {
width: 200px;
height: 200px;
}
.photo-album .large {
width: 300px;
padding: 20px 20px 30px 20px;
font-size: 1em;
}
.photo-album .large img {
width: 300px;
height: 300px;
}

.photo-album .img1 {
bottom: 10px;
right: 365px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}


.photo-album .img2 {
top: 50px;
right: 20px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.photo-album .img3 {
left: 400px;
top: 0;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}

.photo-album .img4 {
top: 10px;
left: 495px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}

.photo-album .img5 {
bottom: 0;
right: 0;
-webkit-transform: rotate(1deg);-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.photo-album .img6 {
bottom: 10px;
right: 156px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.photo-album .img7 {
bottom:0;
left:350px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photo-album .img8 {
bottom: -20px;
left: 400px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img9 {
bottom: 0;
left: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img10 {
top: 0;
left: 20px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.photo-album .img11 {
top: 0;
right: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img12 {
top: 0;
left: 470px;
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
transform: rotate(18deg);
}
.photo-album .img13 {
bottom: -20px;
right: 430px;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.photo-album .img14 {
top: 90px;
left: 430px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
.photo-album .img15 {
left:176px;
top:20px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}

a:hover,
a:focus {
z-index: 5;
}
</style>
</head>
<body>
<div class="photo-album">
<h2><span>Come<abbr title="and" class="amp">&amp;</abbr> Experience True Holiday</span></h2>
<a href="#" class="polaroid img2">
<img src="#" width="150" height="150" alt="">ayat di sini</a>
<a href="#" class="small polaroid img3"><img src="#" alt="">ayat di sini</a>
<a href="#" class="polaroid img5"><img src="#" width="150" height="150" alt="">ayat di sini</a>
<a href="#" class="polaroid img6"><img src="#" alt="">ayat di sini</a>
<a href="#" class="polaroid img7"><img src="#" width="150" height="200" alt="">ayat di sini</a>
<a href="#" class="small polaroid img8"><img src="#" alt="">ayat di sini </a>
<a href="#" class="medium polaroid img9"><img src="#" width="200" height="200" alt="">ayat di sini</a>
<a href="#" class="polaroid img10"><img src="#" width="150" height="150" alt="">ayat di sini</a>
<a href="#" class="small polaroid img11"><img src="#" alt="">ayat di sini</a>
<a href="#" class="small polaroid img12"><img src="#" alt="">ayat di sini</a>
<a href="#" class="small polaroid img13"><img src="#" width="75" height="75" alt="">ayat di sini</a>
<a href="#" class="small polaroid img14"><img src="#" alt="">ayat di sini</a>
<a href="#" class="polaroid img15"><img src="#" width="150" height="150" alt="">ayat di sini</a>
</div>
</body>
</html>


Nota:Sila ganti "#" yang terdapat dalam markup <img src="#" alt="">ayat di sini</a> kod dengan url image yang hendak dimasukkan.

"Live Demo"
Sila hover mouse ke atas image

Credit: 24ways.org

Come& Experience True Holiday

This lovely waterfall was at Tawau, SabahTea PlantationBig bird of Geruda over Langkawi IslandAn amazing peak of Mount Kinabalu, SabahEye on KL facing the Petronas Twin Tower
Orang Utan Putrajaya Mosque by the lake
Langkawi IslandBeachFishing village
LangkawiCuti-cutiEnjoying the beach at night, Pulau Perhentian





Kembali kepada | Archives →

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