Kumpulan Trik dan Tips

Posted: 09 Jul 2012 08:17 AM PDT

Selamat malam sobat, belajar CSS Animasi memang perlu ketelatenan dan ke uletan. maka dari tiu saya tidak cepat bisa, soalnya masih newbie. Tapi tak apalah sedikit demi sedikit lama-lama menjadi bukit. Animasi Css Profil Blog ini merupakan salah satu dari sekian banyak efek animasi menggunakan CSS. Animasi ini akan membuat efek yang menarik saat kursor menyentuhnya. Untuk demoya silahkan Lihat profil saya yang ada di home page. Nah bagaimana cara membuat animasi css profil blog? langsung saja kita praktekkan sobat :

1. Login ke Akun Blogger sobat masing-masing.

2. Klik Design or Rancangan, kemudian pilih Edit HTML

3. Centang (Expand Widget Template)

4. Untuk keamanan lebih baik kita (Download Template Lengkap)

5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian

6. Cari kode : ]]></b:skin>

7. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

dl.profile-datablock {clear: both; text-align:center;}
#sidebar .Profile img.profile-img {
border: 8px solid #aaa;
opacity: 0.3;
border-radius: 6px;
margin: 20px 0 20px 60px;
padding: 4px;
background: #eee;
box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
#sidebar .Profile:hover img.profile-img {
opacity: 1.0;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 16px #222;
margin: 40px 0px 20px 10px;
-o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}

8. Save

9. Selamat mencoba

Ada cara untuk modifikasi link dengan animasi css, silahkan kunjungi artikel cara buat animasi link dengan css.

Keterangan:Rubah nilai magrin 60px dengan sesuka sobat semakin kecil angka semakin ke kiri gambar tersebut.

Posting Bebas

Senin, 09 Juli 2012

Kumpulan Trik dan Tips

Kumpulan Trik dan Tips

Tidak ada komentar:

Posting Komentar