Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Saturday, October 9, 2010

Mengenal Fungsi Z-index pada kode CSS 3

Bagi yang pernah menggunakan software photoshop,pastinya sudah tidak asing lagi dengan penggunaan layer pada program tersebut. Sesuai dengan namanya, layer bisa diartikan sebagai pelapis atau lapisan. Kehadirannya mirip sebuah lapisan plastik yang tembus pandang (transparan),dimana sebuah gambar bisa terdiri dari beberapa tumpuk layer,  dan setiap layer berisi gambar dengan fungsinya masing-masing.

Agak sulit memahaminya? oce, sekarang kita gunakan salah satu hasil design saya,yang dibuat menggunakan fungsi layer.

jalan Vera bayangan

( Dari kiri ke kanan : Layer 1, Layer 2, Layer 3 )

Ketiga gambar diatas adalah gambar yang terpisah,namun di masukkan dalam layer yang berbeda. Layer 1 kita ibaratkan adalah backgroundnya.Sedangkan gambar yang lainnya adalah gambar yang ingin kita gabungkan kedalamnya. Jika Layer 2 kita tumpukkan diatas Layer 1,maka hasilnya akan seperti ini.

gabung1 
Selanjutnya, Layer 3 kita tumpukan lagi ke atas Layer 1 dan 2.

Vera copy

Ketiga gambar yang tadinya terpisah,sekarang menjadi sebuah gambar yang baru. Dengan lapisan (Layer) yang berbeda,setiap gambar bisa saling di tumpukkan,tanpa mengganggu lapisan yang lainnya. (Lihat bayangan si cewek yang tidak menutup gambar mobil dijalanan).

CSS 3 pun kemudian menyerap penggunaan layer tersebut,dengan cara menambahkan fungsi z-index. Dalam hal ini, Z-index digunakan untuk mengatur urutan lapisan yang akan tampil. Agar lebih mudah memahaminya,buka notepad pada windows anda,copy dan masukkan kode berikut ke dalam notepad.

<html>
<head>
<style type="text/css">

body {font:30px trebuchet ms;color:#fff;}

#layer1 {width:300px;height:150px;background:#00a;padding:30px;
left:40px;top:50px;position:absolute;
z-index:1;
}
#layer2 {width:300px;height:150px;background:#f00;padding:30px;
left:100px;top:100px;position:absolute;
z-index:2;
}
#layer3 {width:300px;height:150px;background:#00aa00;padding:30px;
left:160px;top:160px;position:absolute;
z-index:3;
}

</style>

</head>

<body>

<div id="layer1">
Ini adalah elemen yang diberikan kode z-index 1
</div>
<div id="layer2">
Ini adalah elemen yang diberikan kode z-index 2
</div>
<div id="layer3">
Ini adalah elemen yang diberikan kode z-index 3
</div>

</body>
</html>

Kalo sudah, kemudian file tersebut disave dengan nama Layer.htm  (save as type nya diganti menjadi all files)

Jangan tutup notepadnya. Sekarang,bukalah file Layer.htm yang barusan anda buat. Halaman baru akan terlihat di browser anda.

 layer

Kembali lagi ke notepad, disini saya akan mencoba menjelaskan kode-kode elemennya satu persatu.

Dalam kode yang saya berikan ini,saya hanya memasukkan 3 elemen layer, yaitu #layer1 , #layer2 dan #layer3. Layer1 saya berikan warna background biru, layer2 berwarna merah dan layer3 berwarna hijau.

Setiap layer diberikan z-index yang berbeda. #layer1 diberikan z-index:1 , dan selanjutnya berurut ke elemen-elemen berikutnya.

Pada elemen #layer1 , anda bisa melihat adanya kode z-index:1;  yang menandakan bahwa elemen ini nantinya akan berada dibawah elemen yang ber z-index 2 dan 3.

Sekarang coba anda ganti angka 1 pada z-index elemen #layer1 menjadi 4. Save kembali notepad anda,dan refresh halaman browsernya. Apa yang terjadi?

layer2

Karena tampilan z-index diurut berdasarkan angka, maka angka terbesar akan ditempatkan diatas angka yang lebih kecil. Ketika anda merubah z-index elemen #layer1 menjadi 4, maka elemen ini akan berada diatas elemen ber z-index 2 dan 3.

Jika ingin membuat elemen #layer2 yang berada di lapisan paling atas, maka anda tinggal mengganti z-index nya ke angka yang terbesar. Dalam contoh diatas,anda tinggal mengganti z-index nya menjadi 5. Save, dan refresh lagi browser anda. Sekarang elemen #layer2 sudah berada di tumpukan paling atas.

Beberapa contoh kreasi menggunakan fungsi z-index dan menggabungkan nya dengan Jquery :

CardtrikCard Trick :
http://demos.sixrevisions.com/2010/08/26/Demo.html

Photo Gallery :
http://demos.usejquery.com/03_z-index_gallery/

Kartu Nama :
http://designlovr.com/examples/dynamic_stack_of_index_cards/

 

 

Semoga bermanfaat.

(Tutorial berikutnya, kita akan membuat efek pita menggunakan z-index dan efek border)

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

29 comments:

owh begono ya thanks dehh

April 2, 2012 at 11:37 PM Visitor
Anonymous said...

wah mantap deh:D
Thx bgt buat infonya:)

sekarang CSS udah sampe yg versi brp yah?

thanks. sangat membantu, dan sekarang saya paham :D

Bagus mas.... sangat jelas.

tapi setauku z-index itu sudah ada sejak css2 :)
bisa dilihat di http://www.w3schools.com/cssref/ pada bagian Positioning Properties

makasih.. :)

coma bilang wOw nih hasilnya keren banget....jadi pengen belajar lebih jauh tentang photoshop....

baru tahu nih kalau photoshop bisa seperti ini..
thx infonya.....

penjelasannya yang lengkap nih makasih buat semua penjelasannya...

April 29, 2013 at 5:34 PM Visitor
Anonymous said...

I blog frequently and I seriously thank you for your content.
Your article has truly peaked my interest. I am going
to bookmark your blog and keep checking for new information about once per week.
I subscribed to your RSS feed too.

Feel free to surf to my web-site probate lawyers in San Diego

April 29, 2013 at 5:54 PM Visitor
Anonymous said...

I know all about this subject here on "Mengenal Fungsi Z-index pada kode CSS 3".
We are in OC|an OC properties.

my web site ... Anaheim realtor

April 30, 2013 at 8:17 PM Visitor
Anonymous said...

Saved as a favorite, I like your website!

Feel free to surf to my page :: our video sales

May 12, 2013 at 3:41 AM Visitor
Anonymous said...

At this time I am ready to do my breakfast, afterward
having my breakfast coming again to read
further news.

Feel free to surf to my web blog - www.rhythmplayer.com

May 16, 2013 at 4:11 PM Visitor
Anonymous said...

I appreciate, lead to I found exactly what I used to be having a
look for. You have ended my 4 day lengthy hunt!
God Bless you man. Have a great day. Bye

Feel free to visit my web blog life insurance

May 17, 2013 at 1:19 AM Visitor
Anonymous said...

whoah this blog is great i really like reading your articles.
Keep up the good work! You know, many individuals
are hunting around for this info, you can aid them greatly.


Feel free to visit my webpage ... group health insurance agent

May 21, 2013 at 5:10 PM Visitor
Anonymous said...

Good way of telling, and nice paragraph to obtain facts about my presentation topic, which i am going to present
in academy.

Feel free to surf to my blog post; video marketer

May 22, 2013 at 6:20 PM Visitor
Anonymous said...

Thanks for your marvelous posting! I really enjoyed reading it, you happen to
be a great author. I will be sure to bookmark your blog and will eventually come back in the future.

I want to encourage you to continue your great posts,
have a nice morning!

Feel free to visit my website ... http://www.gettingschoolready.org/author/VirgieMor

May 29, 2013 at 2:13 PM Visitor
Anonymous said...

I hardly create remarks, but i did a few searching and wound up here "Mengenal Fungsi Z-index pada kode CSS 3".
And I actually do have 2 questions for you if you usually
do not mind. Is it simply me or does it appear like a few
of the remarks appear like left by brain dead folks?
:-P And, if you are posting on other places, I'd like to follow everything fresh you have to post. Would you make a list of the complete urls of all your shared pages like your twitter feed, Facebook page or linkedin profile?

My site vertexmedia.com

June 6, 2013 at 5:04 PM Visitor
Anonymous said...

Wow that was strange. I just wrote an extremely long comment
but after I clicked submit my comment didn't show up. Grrrr... well I'm not writing all that over again.
Anyways, just wanted to say fantastic blog!

My web-site; Newport Beach chiropractor on harbor

postingnya mengenai css top markotop gan,ini jadi penyemangat ane untuk mulai belajar css.

Mantap penjelasannya karena saya sudah tahu apa itu fungsi z-index itu. Terima kasih infonya, mas.

Penjelasannya sangat mudah dipahami, terima kasih atas infonya. (y)
Keep updating..

Sekarang saya mengerti, jelas buanget

Wah terima kasih informasinya , sekarang saya ngerti apa itu z index

harus pelan2 memahaminya

gan sudah saya coba untuk menampilkan teks di depan gambar dengan Z-index tetapi kenapa ngak bisa ya? apa untuk teks caranya beda ya?

padat, singkat, jelas. makasih tutornya kakak.

terima kasih sudah berbagi

mantep,. sangat bermanfaat om.. makasih ilmunya .. :)

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra