STEP 1
Langkah pertama, buka text editor kalian. Lalu ketikkan kode di bawah ini :
<html>
<head>
<title>Box Hover</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="box">
<h1>Hover</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
<a href="#">Read More..</a>
</div>
</html>
Syntax diatas tidak ada yang aneh, maksudnya tag-tag html diatas adalah tag html yang paling dasar. Di mulai dari tag <html></html>, jelas sekali apabila kita akan membuat sebuah dokumen html, maka perlu ada tag tersebut.
STEP 2
Langkah kedua kita aka memberi efek pada box diatas. Buat file baru lalu ketikkan syntax css di bawah ini :.box { border: 1px solid #eee; transition: box-shadow 1s; width: 500px; height: 300px; box-shadow: 1px; }
Mungkin bagi yang baru mengenal css, akan sangat aneh pada tag transition, wajar. Karena tag transition adalah fitur baru dari CSS3. Tag border: 1px solid #eee; adalah untuk memberi border pada class .box. Sedangkan tag transition adalah Sebuah properti singkat untuk menetapkan sifat transisi empat ke sebuah properti tunggal. Lalu, box-shadow adalah untuk memberikan shadow pada tag .box.
STEP 3
Pada step 3 ini kita akan memberi efek hover pada box tersebut. Ketikkan syntax di bawah pada file css yang tadi di atas :.box:hover{
box-shadow: 0 0 3px #515151;
}
Sangat simple sekali, yaitu masih sama dengan yang diatas. Nah setelah mempelajari dan mempraktekan tutorial ini diharap kalian bisa mengerti dan bisa mengembangkan lebih dalam lagi mengenai Hover Animation di CSS3.
Sekian tutorial mengenai Tutorial Membuat Efek Hover Animation dengan CSS3 jika ada yang ditanyakan bisa ditanyakan di kolom komentar.
Terima kasih.
0 komentar:
Posting Komentar