Baca juga : Memasukan gambar pada web/ blog
Dengan bantuan CSS maka akan membuat gambar akan terlihat bergoyang pada saat cursor diletakan pada gambar tersebut.Baca Juga : Apa itu CSS ?
Langsung ke pembahasan bro.Yang harus disiapkan adalah
1. Siapkan folder untuk menyimpan gambar, file css, dan file html
2. Gambar yang berformat .png, Jpg, atau yang lainya
3. membuat halaman berformat css / langsung di gabungkan pada halaman memasukan gambar.
4. Membuat halaman format html, untuk coding membuat memasukan gambar dan css nya.
Perhatikan ulasan berikut untuk lebih pahamnya
1. Siapkan foldernya
3. Membuat halaman CSS
Ketik Coding berikut pada halaman notepad++
.goyang {
z-index: 20;
position: absolute;
margin: -150px 0 0 125px;
-webkit-transition: 0.4s all ease-in-out;
-moz-transition: 0.4s all ease-in-out;
-o-transition: 0.4s all ease-in-out;
-ms-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out; }
.goyang:hover {
margin-left: 100px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg); }
kemudian simpan coding tersebut dengan format misal.css didalam folder yang telah dibuat sebelumnya
4. Membuat halaman format html, untuk coding membuat memasukan gambar dan css nya.
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="misal.css"></head> // Memanggil halaman CSS
<div class="goyang"><img src="gambar.jpg" alt="gambar"></div> // Coding memasukan css dan gambar
</html>
simpan coding tersebut dengan format goyang.html didalam folder yang telah dibuat sebelumnya
Keterangan :
Jika ingin mengcopy codingnya hapus // Memanggil halaman CSS dan // Coding memasukan css dan gambar karena merupakan keterangan
Jalankan atau klik file yang berformat html tersebut
Untuk Previewnya Klik dibawah ini
0 Response to "Cara Membuat Gambar Bergoyang"
Posting Komentar