SOFTWARE PENCIPTA MENU DENGAN MUDAH


Adalah Css Tab Designer. software yang memudahkan blogger untuk menciptakan sebuah tabmenu, software ini sangat ramah sekali untuk digunakan sehingga dengan mudah dan cepat kita bisa menghasilkan sebuah tabmenu yang indah nan elegan.

Software ini mempunyai 2 style menu yaitu horizontal menu dan vertical menu,


[Klik gambar untuk memperjelas]

Selain itu kita dapat melihat source code dari project yang kita buat.
Fitur keren lainnya adalah kita bisa mencocokan tampilan menu yang sudah kita buat ke 7 browser yang sudah disediakan :
1) Internet Explorer
2) Netscape
3) Opera
4) Mozilla Firefox
5) Konqueror
6) Safari
7) Camino

Download via : Mediafire | Css Tab Designer v2.0 [1.45Mb]
Learn More

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
    Facebook


  • SE AVANCEE
    Se Avancee


  • TWITTER
    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