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

Unknown

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...

Unknown

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 ... !!

Anonim

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

Anonim

@ 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

Anonim

@ 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

Rama Saputra Zylgwyne

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

Anonim

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

@ Bisnis Online Blog : Iyaa kang thanks semoga berguna

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

Anonim

@ 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 :)

Anonim

@ 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

Anonim

@ 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

Anonim

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

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

Sinto

Keren Nih Boleh juga

Anisayu Nastutik

wah sangat keren dan menarik jugga cantik nih

Anonim

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

Unknown

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

Anonim

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

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

Anonim

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

mawardi

mantab bisa dicoba

Anonim

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

@ Mawardi : Ok..!

ADMIN BB

Hmm,.. Keren Sob :D

Frzhrdynt

hehehehe sob request postingan barunya dong tenzung :P hihihi

Anonim

@ Remix-7 : Iyaa thanks

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

Liandri eko

bikin berat gax ya sob kira2?

Anonim

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

koko bota

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

Aeferes / Al Firous

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

Anonim

@ Gerald Assa : :D

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

Ijal Fauzi

keren bang !

Unknown

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

Aeferes / Al Firous

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

Frzhrdynt

apa saja kok sob hahaha :)

Anonim

@ 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.

Aeferes / Al Firous

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 :)..

Frzhrdynt

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

Saka

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

Unknown

wahh pangjang bener ya yang coment hehehe

kiki

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

Unknown

berkunjung ap kabar mas?
sory spamm :D

Syamsul Bachri

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

Nabil

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

Kimchi

thx for infonya

Muhajirin

Lama gak jumpa kawan

Chandra Septian

templatenya mantep mas :D haha

Unknown

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.