Apa Kabar Semua Temen-Temen Pada Kesempatan Kali ini Kami Mau Berbagi
Potingan Kemrin Menu Gaya Koran Sekarang Dengan Css3 Murni
CSS3 Menu Dilipat Origami Menu
Ini adalah menu lipat relatif baru, seperti kita seperti melipat kertas, lipatan layar.
Sebelum mencapai lipat, untuk melakukan tata letak tidak dilipat Kalu Mous
Sobat Sudah Di Atas Nya Maka Akan Terbuka Seperti Sobat Membuka Buku Heheheheh..?
Mari Kita Lihat Sama-Sama Demo Nya Genk..
Buat Sobat Yang Berminat Silakan Ambil Code Nya Di Bawah
Tapi Sebelum Copy Code Di Bawah Sobat Masuk Dulu Di Blog Sobat
Cari Code </b:skin> Lalu Copy Code Di Bawak Pastekan Code Di Atas Code </b:skin>
Lalu Simpan Template Lihat Hasilnya Mantap D:.
Code CSS3
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
.produter {width:250px; height:35px; margin:0 auto 350px auto; position:relative; z-index:100;
-webkit-perspective:300px;
-moz-perspective:300px;
perspective:300px;
-webkit-perspective-origin: 50% 100%;
-moz-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
}
/* produterDalam satu set terpadu div semua*/
.produter div {position:absolute; padding:10px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:230px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.produter .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.produter .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.produter .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.produter .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.produter:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}
.produter .sub img {display:block; float:left; padding:0 10px 10px 0;}
.produter .sub p {font: normal 12px/15px arial, sans-serif; color:#000; padding:0; margin:0;}
.produter .sub p span {display:block; font: bold 14px/18px arial, sans-serif; color:#ea0;}
.produter .sub p a {font: normal 12px/15px arial, sans-serif; color:#09c;}
.produter .sub p a:hover {text-decoration:none;}
.produter a.main {display:block; font: bold 15px/35px arial, sans-serif; text-align:center; text-decoration:none; color:#fff; background:#069; border-radius:10px 10px 0 0; position:relative; z-index:100;}
Sekarang Tinggal Copy Code Di Bawah Genk
Tapi Masuk Dulu Cari Tata Letak Lalu Pilih HTML/JavaScript
Lalu Copy Code Di Bawah Ini Lalu Simpan Selsai D: Genk...?
Code Html
Sekian Dulu Postingan Menu Dilipat Origami Menu
Semoga Berguna Buat Yang Membutuhkan Sobat Amin...?
{ 55 comentários... read them below or Comment }
1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
wow keren gan.. ane numpang belajar CSS disini ya..:)
BalasHapuslangsung coba ahh biar tambah keren blog ane
BalasHapusini origami yang lebih keren
BalasHapuslipat melipatnya lebih rumit hehe
selamat malam genk,...
BalasHapussepertinya ini sangat baru buat saya genk, saya pelajari dulu yah,terima kasih telah berbagi
nyimak aja nih genk buat lipat melipat... hehehe.. :)
BalasHapusMake yg biasa aja dh.. Hehehe tapi tutorialnya mantap
BalasHapusblog-supercoolzz@ trmkasi spot dan knjungannya kawan salam hangat slalu.
BalasHapusdonny pratama@ trksih spot dan knjungannya kawan smga kita slalu d bri kmdahan dalam melanjutkan perjalannan hidup. slakan sobat kalu berminat heheh.
BalasHapusDedaunan Hijau@ mlm sobat iya benar skali kalu lipat melipat emang sulut apa lgi nglipat uang heheh..?
BalasHapusPenyuluh Perikanan@ mlm jga kawan. silakn di pelajari heheh. sobat kan dah tau slam hangat genk.
BalasHapusAndy Borneo@ silakan di simak Filemnya genk heheh..?
BalasHapusgenfruz.us@ iya genk emang biasa tapi luar biasa heheh
BalasHapus.. kayaknya aq pernah liat dech. he..86x ..
BalasHapuskeren2, perlu dicoba genk...Terima kasih tutornya sob.
BalasHapusKeren sob. Pengen nyoba tp mls.
BalasHapus♥VPie◥♀◤MahaDhifa♥ @ heheheh lihat di sini'y wkwkwkw. trmkasi knjungan mlm nya mbk
BalasHapusKraeng Francisco@ trmkas bali sobat telh mmberi spot
BalasHapusWah keren gan..
BalasHapusKira2 gak bikin berat ni kan gan??
YoGi VipRe@ trmkasi spot dan knjungan mlm nya genk. kyk nya gk genk.
BalasHapusZevin@ trmks spot nya kawan klu mls'y di biarin hheheheeh
BalasHapusanee save dlu ya gan.
BalasHapusSilakan sobat di save. trmkasi dah brknjng sobat
BalasHapuskeren nih tutornya..thx ya bang..
BalasHapusSalam sehat selalu..
By : Luhurfatah10 Blogz
ijin praktik sobat
BalasHapusluhur fatah@ sma2 sobat anda jga smga shat slalu di lndungi Allah
BalasHapuskelihatan agenk ini sudah pakar ahli Css3 ya... Selamat terus berkarya genk and selamat siang..
BalasHapussangat menarik bisa dilipat
BalasHapuskukan nyoba, mudah2an bisa... :)
Wah mantap sobat, sobat ni rajnya css ya hehehehe
BalasHapuscik awi@ met sore sobat trmkasi atas spot dan kunjungannya sobat smga anda slalu di berikan kmdahan dalam mnjalankan aktvtas salam hangat slalu genk
BalasHapusnyimak tutor cssnya genk..mmang jadi mantap buat blog, thanks
BalasHapusPantun Cinta@ trmkasi banyak sobat dah mau meluangkan waktu buat berkunjung kemari kunjungan nda ada lah salah satu penghargaan sobat
BalasHapusMasnady@ slamat sore sobat trmkasi knjungan yang sangat membantu blok ini bertambah ide2 yang di jwab tmn2 smua.
BalasHapuswongcrewchild@ trmkasi spot dan krtikannya sobat smga kritikan tmn2 bisa mnjadi sebuah pengalaman kami sobat
BalasHapusselamat sore genk.. :)
BalasHapusbloggnya semakin bagus.. ^_^
selamat malam genk... Apa kabar and happy blogging..
BalasHapuslukman hakim@ met mlm sobat trmkasi spot dan kunjungannya sobat.
BalasHapuscik awi@ trmkas spot nya sobat met mlm'j
BalasHapus.. he..86x. hu um kawan. tau aja nich. he..86x ..
BalasHapus♥VPie◥♀◤MahaDhifa♥@ mlm kawan gk krang banyk he..nya ko cma 86X gk skalian 2000X hahahah
BalasHapusMalam genk....
BalasHapusDari kemarin sudah saya otak atik tapi gagal terus genk, apa karena templatenya mungkin yg gak cocok kali yah...
keren nih bro,tapi buat beban loading blog ga ya?
BalasHapusblog sobat kok makin berat aja,apa line internet aq yg lemod ya :D
Penyuluh Perikanan@ kbisa gitu genk.. trmkasi spot dan sarannya sobat
BalasHapusReo Adam@ aq jga gk tau bro pdahal udah aq buang satu prsatu heheh. trmkasi krtik dan sarannya ntar aq perbaiki. soalnya klu aq buka jga biasa2'j wkwkwkwk..
BalasHapuswau super keren gan! thx sdh berbagi.. *smile
BalasHapusRohis Facebook@ trmakasi banyk sobat atas spot dan kunjungannya.
BalasHapusmasih juga belum berhasil saya coba genk, sepertinya template saya kurang cocok genk, tapi boleh juga infonya genk, lain kali kucoba lagi
BalasHapusterima kasih yah
Penyuluh Perikanan@ trmkasi sobat spot dan kunjungan
BalasHapusdemonya kok ga bisa dilihat ea?
BalasHapusmasa,c sob orang bisa ko heheh
BalasHapusKayanya Keren Nih Izin Di Coba Aja Dah Bang !!
BalasHapus#http://miki-maru.blogspot.com/
Silakan bang kalu berminat bole ko heheh. trmksi knjungannya genk salam kenal'y
Hapuskayakx keren ni jadi pingin xobak.
BalasHapussalam kenal yak
trmksi sobat knjungannya salam knl balik sobat.
Hapuspengin belajar juga dari sini, salam kenal bro
BalasHapussma2 sobat trmksi dah berknjung sobat
Hapus