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



BULATKAN GAMBAR DENGAN CARA "TRANSITION"
October 21, 2010
Posted by: Fauzie


Apabila memperkatakan tentang webkit dan moz transition serta transform ini, terlalu banyak effect yang mudah untuk dibuat. Effect yang selalunya dibuat atau dibina sebelum ini dengan menggunakan JavaScript, sekarang boleh dibuat dengan hanya menggunakan kod CSS3.

Malangnya kebanyakan effect ini hanya boleh dilihat dengan sempurna dalam browser-browser moden seperti Safari, Firefox dan juga Chrome.

Satu lagi contoh yang menarik dengan penggunaan kod-kod webkit dan moz ini ialah "membulatkan" (rounded) gambar atau image. Jika anda hover mouse ke atas image dalam contoh "Live Demo" di bawah ini, anda akan dapati image akan bertukar dari empat segi (square)kepada bulat atau circle.

Effect ini terjadi dengan menggunakan kod "transition duration" seperti di bawah ini.

-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;


Di mana 1s bermaksud 1 saat jangka masa (duration) yang diambil bagi transisi ini (dari empat segi menjadi bulat). Transisi akan lebih lambat jika ditukar kepada 2s atau 3s.

"Live Demo": Sila hover mouse ke atas image

merdeka


Kod mark-up atau HTML serta kod CSS3 untuk contoh di atas adalah seperti berikut. Untuk mencubanya anda hanya perlu copy & paste kod-kod ini ke dalam Notepad dan save file dengan memberi nama fail mempunyai extension .html (contoh: imagebulat.html)

Nota: Fail yang disimpan dalam Notepad hanya boleh dibuka dalam browser apabila nama fail ditambah dengan .html

<html>
<head>
<style type="text/css">
.bulat {
padding: 10px;
display: inline-block;
overflow: auto;

}
.bulat .BOX1 {
width: 250px;
height: 250px;
margin: 10px;
background:url
('http://farm2.static.flickr.com/1275/1122307795_eca4fac0ca.jpg ')no-repeat;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

background-color: #f00;
border: 2px solid #900;

line-height: 200px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.bulat:hover .BOX1 {
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;

background-color: #fa0;
border: 5px solid #930;

font-size: 50px;
color:red;
text-shadow: 0px 0px 4px black;
}

</style>
</head>
<body>
<div class="bulat">
<div class="animable BOX1">Merdeka! </div>
</div>
</body>
</html>


Kembali kepada | Archives →

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