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.

Comments for this entry

Wisata Murah

wah keren ne,, ini yang ane lagi cari MEMBUAT ANIMASI GALERI UNIK DENGAN CSS3 biar agak kerenen dikit tampilan blog.hehe thnks dah dishare

happy blogging

Asis Sugianto

keren nih animasinya sob, sepertinya bisa dicoba sobat...

earth-inside

wah.. keren nih sob
thnks infonya
ok

BlogS of Hariyanto

sungguh menarik animasinya sobat :) terimakasih sudah berbagi ilmu

Shinobi Caemk

keren yaaCh .... :)
emang paling keren dha' trik dari blog ini ... !!

Putra Tenzhung

@ All : Thank you bro.. semoga berguna buat kalian :D

Putra Tenzhung

@ Shinobi Caemk : Ckck thanks sob.. bisa aja :P

Majalah Masjid Kita

yang bgini nih yang jempolan... baik hasil maupun usahanya patut dapat 'tepuk tangan berdiri' :) sukses mas!!!

asuransioke

mantap mas tutorialnya.... lanjuuut, tks

Putra Tenzhung

@ Majalah Masjid Kita : Wah jadi terharu saya kang.. hehe terlalu berlebihan itu kang.

@asuransioke : Ok.. :)

Farixsantips

wahhh ane tau nih pernah lihat :d tapi gak tau tutorialnya :D makasih yah udah share tutorialnya :D

Bisnis Online Blog

patut di coba nih, siap meluncur sobat.Trims sob panduannya ^_^

ZONA DOWNLOAD GRATIS

wah keren banget sob,patut dicoba ne yg seperti ini.

A-NX

Keren ini sob, Harus dicoba

Rama88

wuasemmmm,, ketinggalan ane,, :'( kemaren ane liat2 gak ada postingan,, hadehhh,, asem dah,, -___-" keren tuh ya sob,, ntar gw coba ahh pasang di blog gw,, cari tempat yg cocok dulu,, :D

Mbah Qopet

akhirnya posting juga nih , wah keren tuh pas banget ane lagi belajar z-index transform rotate.thanks mas

DAW-XP

wihh keren ya, mantab banget jadi kartu blog ane nih. Tak simpen dulu yah :D

Mbah Qopet

mampir lagi ah , sambil bawa posting baru

Cek Info

asem mas kalo d chrome gk suport ame code d atas tp kemarin ane pake FF suport tuh :'(

Musa Khairul Umam

Wihhh keren2,memang nih blog,masternya css :D

Putra Tenzhung

@ Farixsanstips : Iya broo sama-sama :) Semoga berguna

@ Bisnis Online Blog : Iyaa kang thanks semoga berguna

@ ZONA DOWNOAD GRATIS : Silahkan sob.. good luck :)

Putra Tenzhung

@ AN-X : Siip.. Silahkan

@ Rama88 : haha emang ngapa sob ketinggalan?? iya buat naro foto2 ente lumayan :p

@ Mbah Qopet : wee makin pinter aja nanti ente maenan css mulu :)

Putra Tenzhung

@ DAW-XP : Silahkan sob.. hati-hati ilang :P hhe

@ Cek-Info : Iya sob emang blum ane coba maklum lagi susah buat online :P

@ Musa Khairul Umam : bisa aja sob.. ente yang master design blogazine :)

Rama88

wahh foto ane cakep2 jadi gak cocok pake css,, wkkwkwkwk,, :P, ohiya sob ada award tuh untuk ente,, jika berkenan silahkan di angkut,, :v

Putra Tenzhung

@ Rama88 : Wah justru itu.. pas banget foto ente yang cakep2 ditambah css3 dibuat agak se uniq mungkin. :P hehe just kiddink sob..
Ok.! Udh ane taro ditempat yang sejuk :D

Cek Info

ow iy sob, gpp deh mungkin taun depan suport ni ama animasi yg ente buat. btw : ap kabar ni?

Shinobi Caemk

saya masih rada-rada bingung nih soal css ...
perlu banyak belajar nih dari sini ... :)

Cek Info

berkunjung lg maaf OOT

Putra Tenzhung

@ Cek Info : Baik sobb... gmna ente? hehe

@ Shinobi Caemk : Sama sobb.. kita sama-sama belajar :D

Zh!nTho

Keren Nih Boleh juga

anisayu

wah sangat keren dan menarik jugga cantik nih

Putra Tenzhung

@ Zh!nTho, anisayu : Iyaa sobb.. n mbak.. semoga berguna :)

Aldio

keren ni animasinya, coba dulu deh :)

Endy

mantap banget mas....tapi bagan tempat kode cssnya baiknya g di kasih goyang mas...soalnya kan cssnya mau diperhatikan, jadi kalau goyang..agak bingung sayanya:D

Putra Tenzhung

@ Aldio : Iyaa sob.. good luck yh..

@ Endy : Sipp udh ane ubah sesuai kemauan ente :D

Naufal Hanif Rabbani

tapi aku msih bingung sob,
ta' taruk dimana ini? cz blogku dah rame gadgetnya :D

Mawardi

mantab bisa dicoba

Putra Tenzhung

@ Naufal Hanif Rabbani : Terserah sob.. yang menurut ente bagus aja.. kalo menurut ane sih di footer :D

@ Mawardi : Ok..!

Remix-7

Hmm,.. Keren Sob :D

Farixsan Quilicuor (Faris Hardiyanto 177)

hehehehe sob request postingan barunya dong tenzung :P hihihi

Putra Tenzhung

@ Remix-7 : Iyaa thanks

@ Farixsan Quilicuor : Postingan tentang apa broo?? css??

Liandri eko

bikin berat gax ya sob kira2?

Putra Tenzhung

@ Liandri eko : Insyallah ngga sob.. semuanya tergantung gambar yang kita gunakan. :)

Gerald Assa

Ueeyyy MANTAP mas bro......:D

Mbah Qopet

mampir belum ada post baru ya ? wee Blockquotenya ganti keren tuh :D

Putra Tenzhung

@ Gerald Assa : :D

@ Mbah Qopet : Iyaa lagi males posting, wkwk yg kmrn gambarnya kurang pas. kya gini aja sderhana

Ijal Fauzi

keren bang !

kehidupanremaja

nah,,ini dia yang ane tunggu,,,mantabs sob.
thank's.

Mbah Qopet

mas request kode Tab View yg di sidebar yg isinya Chatbox Link dong kasih di grup ya...

Farixsan Quilicuor (Faris Hardiyanto 177)

apa saja kok sob hahaha :)

Putra Tenzhung

@ Ijal Fauzi : iye jal :P

@ kehidupanremaja : sama-sama

@ Mbah Qopet : :D

@ Farixsan Quilicuor : Ok.. tunggu aja y.. lg belom sempet nih.. bw juga ngga sempet.

Mbah Qopet

mejeng ah nunggu makanan (posting maksudnya)

Pradisz Wardhana

Wah, tutorial-tutorial designnya keren disini :) thanks infonya sob, mungkin dilain waktu akan berguna :D

socafahreza's blog

wah keren banget nih..
thanks ya :)..

Farixsan Quilicuor (Faris Hardiyanto 177)

datang kemari sob.. datang kesini sekaligus ikut meramaikan suasana blog ini :) hehehehe

saka

keren banget mas.. bagus nih kalo dicoba.. :D

Edy Sant

wahh pangjang bener ya yang coment hehehe

Free Pc Games

Keren.. Wuih... Ajaib!! 8D

Asmara Susanto

berkunjung ap kabar mas?
sory spamm :D

Syamsul Bachri

itu dmn nyimpen.a bang?
ane bingung? :(

kautau.com

Cantik sob .. ringan lagi.. loading nya dan gak makan banwic

Ms.LoVee

thx for infonya

NFS Reload

Lama gak jumpa kawan

Chandra Septian

templatenya mantep mas :D haha

IBU RAHMA DI JAWA TIMUR

kami panjatkan syukur dan terima kasih kepada AKI SUBALA JATI,saya hanya pedagang tomat di pasar yang penghasilannya tidak seberapa,tapi setelah kami dapat nomornya AKI di internet kami coba-coba menghubunginya dan minta bantuannya melalui angka-angka goipnya yang di jamin tembus,angka yang AKI berikan 4d [6194] ternyata benar-benar terbukti,sekali lagi terima kasih AKI walaupan cuma 4d nya kami sangat bersyukur di bandingkan hasil dagangan sehari-hari yang pendapatannya tidak seberapa,bagi anda yang ingin angka goip hasil ritual yang di jamin tembus hbg AKI SUBALA JATI di nmr; 082=318=816=444,angka yang di keluarkan AKI SUBALA JATI di jamin 100% kemenangan,terima kasih

klik http://angkaramalanakysubalajaty.blogspot.com

kami panjatkan syukur dan terima kasih kepada AKI SUBALA JATI,saya hanya pedagang tomat di pasar yang penghasilannya tidak seberapa,tapi setelah kami dapat nomornya AKI di internet kami coba-coba menghubunginya dan minta bantuannya melalui angka-angka goipnya yang di jamin tembus,angka yang AKI berikan 4d [6194] ternyata benar-benar terbukti,sekali lagi terima kasih AKI walaupan cuma 4d nya kami sangat bersyukur di bandingkan hasil dagangan sehari-hari yang pendapatannya tidak seberapa,bagi anda yang ingin angka goip hasil ritual yang di jamin tembus hbg AKI SUBALA JATI di nmr; 082=318=816=444,angka yang di keluarkan AKI SUBALA JATI di jamin 100% kemenangan,terima kasih

klik http://angkaramalanakysubalajaty.blogspot.com

PAK WAWANG DI BALI

PARA PENCINTA TOGEL YANG INGIN ANGKA YANG BENAR-BENAR JITU DAN AKURAT BISA MEMBAWA ANDA DALAM SEBUAH KEBERUNTUNGAN,SILAHKAN SAJA HUB; AKI DARMO DI NO-082-310-142-255,KARNA BELIAU AKAN SELALU MEMBANTU ANDA DENGAN ANGKA RITUALNYA YANG DI JAMIN 100% TEMBUS DAN MEMANTAU ANDA SELAMA PEMASANGAN ANGKA (SGP/HKG/MALAYSIA/ ) SAMPAI AKHIR PUTARAN ANGKA TOGEL SELESAI DI PUTAR,


082-310-142-255 Anda Bisah Membantu Menggiring Dana Biaya Paket Yang Anda Mintah sebagai biaya ritual untuk di belikan peralatan sesajen seperti :
KEMBANG,KEMENYANG,PISANG DAN TELUR AYAM KAMPUNG.
Setelah biaya di kirim maka AKI DARMO akan membantu anda dengan ritual ghoib.
Biaya yang anda keluarkan tidak sebanding dengan angka hasil ritual yang di berikan kepada anda semua.tapi ingat setelah tembus sisihkan sedikit buat yang memerlukan biar berkah.
DAPATKAN SEKARANG JUGA
ANGKA TEMBUS AKI DARMO
Call / Sms 082-310-142-255.

GHOIB: singapur 2D/3D/4D/

angka GHOIB: hongkong 2D/3D/4D/

angka GHOIB; malaysia 4D/6D/8D/

angka GHOIB; toto magnum 4D/5D/6D/

angka GHOIB; laos 4D/6D/8D

angka GHOIB; thailan

angka GHOIB; macau

angka ghoib; sidney

Leave your comment

Thank you.