MEMBUAT ANIMASI GALERI UNIK DENGAN CSS3

Setelah sekian minggu tidak update akhirnya saya dapat meluangkan waktu untuk kembali meng-update blog ini dengan posting-postingan yang sobat tunggu-tunggu (siapa yang nunggu? -_-") tentunya saya akan kembali share apa yang saya ketahui tentang keindahan css3, heuheuheu..

Pada kesempatan kali ini saya akan mengajak sobat untuk membuat Animasi Galeri dengan Css3 yang pasti unik dan menarik dilihat mata (o.o).
Fitur utama Css pada tutorial ini adalah z-index yang berfungsi untuk menempatkan suatu objek didepan ataupun dibelakang objek lainnya.

Silahkan saksikan live demonya :
hanya di http://se-avancee.blogspot.com

FACEBOOK SE AVANCEE TWITTER

/* First Css States */

ul#index_SE {
margin-top:10px;
text-align:center;
}

ul#index_SE li {
background:#ccc;
height:300px;
width:130px;
display:block;
float:left;
border:1px solid #666;
padding: 0 10px;
position:relative;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 2px 10px #000;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#SE-Gallery1 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
}

#SE-Gallery2 {
background-color:#69732B;
z-index:3;
}

#SE-Gallery3 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
}

/* Hover States */

ul#index_SE li:hover {
z-index:4;
}

#SE-Gallery1:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
}

#SE-Gallery2:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
}

#SE-Gallery3:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
}

/* Content Styling */

ul#index_SE li img {
background:#fff;
margin-top: -5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 5px #aaa;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}

h5 {
font-family: comic Sans MS;
padding-bottom: 10px;
}

<ul id="index_SE">
<li id="SE-Gallery1">
<h5>
FACEBOOK</h5>
<a href="http://facebook.com/" target="_blank"><img alt="Facebook" height="auto" src="https://lh4.googleusercontent.com/-RFxyYq_BUE0/Tqa5zp0XFvI/AAAAAAAABko/o39fosqkw3Q/s232/IpodFB.png" title="Facebook" width="auto" /></a>
</li>

<li id="SE-Gallery2">
<h5>
SE AVANCEE</h5>
<a href="http://se-avancee.blogspot.com/" target="_blank"><img alt="Se Avancee" height="auto" src="https://lh5.googleusercontent.com/-ok-U5R1v3pA/Tqa5zESyUrI/AAAAAAAABkg/wxsBkBrElJU/s232/ipodSA.png" title="Se Avancee" width="auto" /></a>
</li>

<li id="SE-Gallery3">
<h5>
TWITTER</h5>
<a href="http://twitter.com/" target="_blank"><img alt="Twitter" height="auto" src="https://lh4.googleusercontent.com/-_3zsJsBOYec/Tqa5yqYrQlI/AAAAAAAABkc/lFRj5oaSFxQ/s232/IpodTW.png" title="Twitter" width="auto" /></a>
</li>
</ul>

Catatan :

* -webkit-transform: rotate(10deg); & -moz-transform: rotate(10deg); berfungsi untuk membuat suatu objek menjadi miring atau terbalik, 10deg menunjukan nilai kemiringan 10 derajat.
* -moz-transform: scale(1.1) rotate(-8deg); & -webkit-transform: scale(1.1) rotate(-8deg); berfungsi untuk membuat suatu objek miring atau terbalik (rotate) sekaligus membesarkan suatu objek, scale atau skala 1.1 adalah nilainya.

Pertanyaan lebih lanjut silahkan salurkan pada komentar dibawah ini.

Learn More

ANIMASI 2 GAMBAR DENGAN HOVER POSITION

Kembali lagi akhirnya saya akan posting yang berkaitan dengan kategori Tutorial Blog dan Css untuk membuat Animasi 2 gambar dengan hover position, postingan ini adalah sebuah request dari salah seorang sahabat saya yaitu Rahman Al Firous pemilik blog Mbah Qopet doi request postingan ini karena terinspirasi dari logo blog Se Avancee.

Jadi sobat yang lain tidak perlu membayangkan lagi apa yang akan saya bahas dihalaman ini karena sudah ada live demonya :D. Sebenarnya tutorial ini hanya memerlukan 1 gambar, tetapi sobat harus membuat 2 gambar tersebut menjadi 1 seperti ini :

<--- Lihat contoh 2 gambar yang saya jadikan satu.
Usahakan gambar agar sama besar dan sama rata kiri-kanan-atas-bawah, agar pada saat gambar disentuh dengan kursor (hover) sobat tidak terlalu sulit untuk mengatur posisinya.

Ok, saya akan memberikan dua demo dengan tambahan transisi -moz-transition-duration: 1s; agar gambar akan terlihat seperti berjalan.

#Putra { background: url('URL GAMBAR') no-repeat scroll center top transparent; height: 210px; margin-top: -39px; width: 240px; } #Putra:hover { background: url('URL GAMBAR') no-repeat scroll center bottom transparent; margin-top: -26px; }	#Tenzhung { background: url('URL GAMBAR') no-repeat scroll center top transparent; height: 210px; margin-top: -39px; width: 240px; } #Tenzhung:hover { background: url('URL GAMBAR') no-repeat scroll center bottom transparent; margin-top: -26px; -moz-transition-duration: 1s; }
<div id="Putra"> Disini lahan kosong, silahkan sobat berkreasi sendiri sesuka hati atau boleh juga dikosongkan asal jangan dicoret-coret</div>	<div id="Tenzhung"> Disini lahan kosong, silahkan sobat berkreasi sendiri sesuka hati atau boleh juga dikosongkan asal jangan dicoret-coret</div>

Catatan :

* Ubahlah nilai margin pada css apabila posisi gambar belum pas,  karena beda ukuran gambar maka akan beda juga pengaturan nilai margin nya.
* -Moz-transition-duration: 1s berfungsi untuk memperlambat reaksi ketika disentuh kursor (hover), artinya lama durasi pada reaksinya, 1s menunjukan nilai durasi 1 second (detik).
* Ubah nilai height (tinggi) setengah dari tinggi gambarnya, misalnya gambar mempunyai tinggi 500px maka height: 250px; namun itu tidak menjamin kalo gambar tidak sama rata.

Penjelasan lainnya, pertanyaan silahkan sobat salurkan pada komentar dibawah ini.

Learn More

MENGATASI GALAT BX-FA9WWP, BX-LK6KYQ, BX-5FI3X0

Sudah beberapa minggu ini blog saya tidak dapat update dikarenakan banyaknya kendala dan kesibukan offline yang memang tidak dapat saya tinggalkan, ditambah lagi account blogger saya tidak bisa login dan membuat blog ini semakin terbengkalai.

Problem galat bX-fa9wwp pada blog ini saya abaikan selama 3 minggu, berhubung saya juga belum punya banyak waktu untuk mengatasi problem ini. Selain galat bX-fa9wwp saya juga terkena galat bX-lk6kyq dan bX-5fi3x0, bingung saya maksud nya apa bisa ganti-ganti gitu? saya hanya bisa mencatat code galatnya dan berniat mencarikan solusinya setelah saya sempat.

Dan ini screenshot terakhir yang berhasil tertangkap kamera tersembunyi. hehe

[Klik gambar jika kurang jelas]

Pada akhirnya saya bisa mengucapkan "Alhamdulillah" blog saya akhirnya bisa kembali login dengan normal ke http://www.blogger.com/ walaupun ada sedikit perubahan :p .
Buat sobat yang mengalami Galat bX-fa9wwp, bX-lk6kyq, bX-5fi3x0 saya akan reshare solusi mengatasi problem tersebut, Cekidot :

* Login pada http://draft.blogger.com/home
* Ganti bahasa yang sobat gunakan ke bahasa inggris

[Klik gambar untuk memperjelas]

* Logout dari http://draft.blogger.com/home
* Lakukan login ke http://www.blogger.com/
* Selesai, silahkan nyengir :) .

Perhatian ! :
Jika sobat sebelumnya menggunakan bahasa inggris, silahkan sobat ganti-ganti ke bahasa lain yang menurut sobat berhasil {Indonesia, English(UK)}.

Thanks to http://rayhanzhampiet.blogspot.com/2011/08/solusi-error-galat-bx-fa9wwp-on.html

Learn More

BUTTON & MARQUEE WITH SHADOW EFFECT CSS3

Lelah sekali rasanya akhir-akhir ini untuk blogging setelah menguras otak untuk mengeluarkan inspirasi dan imajinasi saya dalam ngoprek-ngoprek css yang memang menjadi kesenangan saya saat ini, belum lagi project blogazine yang masih bersih alias masih jauh dari kata selesai. Ohh sungguh menyedihkan.. haha lebay :P

Flashback kepostingan sebelumnya tentang PENGGABUNGAN/PENULISAN SCRIPT CSS DENGAN HTML UNTUK POSTING ternyata banyak sobat yang sepertinya berminat dengan pembahasan css ini dan membuat saya jadi kecanduan ingin terus membahasnya.
Ok sebelum kita loncat ketopik utamanya, saya akan memberikan contoh untuk penulisan script sederhana untuk shadow effect :
Text-shadow: 0 0 10px #000000; --> ini untuk teks
Box-shadow: 5px 5px 5px #000000; --> ini untuk kotak

Untuk Button dengan effect shadow, hasilnya akan seperti ini :

TEKAN

<style type="text/css">
#Lontong {
background: #fff;
padding: 5px;
border: 2px hidden #bbb;
border-radius: 20px 5px 20px 5px;
box-shadow: 5px 5px 5px #0071C1;
width: 125px;
height: 25px;
opacity: 0.6;
}

#Lontong:hover {
background: #fff;
box-shadow: 0 0 10px #0071C1;
opacity: 1;
}

#Lontong a {
margin: 20px;
font-size: 24px;
text-transform: uppercase;
}
</style>

<div id="Lontong" style="text-align: center;">
<a href="http://se-avancee.blogspot.com/" target="_blank">TEKAN</a></div>

Kalau sobat perhatikan script diatas tidak jauh berbeda dengan postingan sebelumnya,, hanya diedit sedikit-sedikit saja.. ini menunjukan bahwa bermain css tidak sesulit yang kelihatannya.
Untuk sobat yang kemarin request marquee dengan effect menyala, mohon maaf saya gabungan di postingan ini juga..

Marquee Dengan Effect Text-Shadow

<style type="text/css">
#Combrow {
padding: 5px;
border: 2px solid #bbb;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 20px #FFCC00;
}

#Combrow:hover {
box-shadow: 0 0 20px #0055CC;
text-shadow: 0 0 10px #ff0000;
}

#Combrow a {
color: #ffffff;
font-weight: bold;
text-shadow: 0 0 10px #ff0000;
}
</style>

<div id="Combrow">
<marquee><a href="http://se-avancee.blogspot.com/">Marquee Dengan Effect Text-Shadow</a></marquee></div>

Ok saya rasa cukup segitu untuk pembahasan dasar tentang shadow effect, selebihnya tinggal sobat tangkap sendiri logika nya :p dan seperti biasa, jika ada yang pertanyaan atau ada yang mau menambahkan silahkan salurkan pada komentar dibawah ini. Selamat berkreasi

Learn More