yes
no
10/Promotion/slider
no

Fungsi Z-Index Pada CSS

Tidak ada komentar
Pernah melihat teks diatas gambar pada website? Hal ini tidak bisa dibuat dengan menggunakan HTML. Jika kita berusaha untuk mencoba membuatnya dengan HTML, maka tidak akan berhasil. Untuk membuat teks berada diatas gambar/objek lain, dapat dilakukan dengan CSS (Cascading Stylesheet) dengan menggunakan atribut z-index yang mempunyai nilai -1 atau 1. Kita dapat memberikan nilai z-index = -1 atau z-index=1 baik gambar atau teks (salah satunya), yang akan diletakkan diatas atau dibawah objek lain. 

Objek (gambar/teks) dengan nilai z-index=1 akan terletak diatas objek lain, sedangkan objek (gambar/teks) dengan nilai z-index=-1 akan terletak dibawah objek lain. Z-Index digunakan pada slider website, menu website dan lain-lain. Penggunaan z-index pada slider adalah untuk memberikan keterangan berupa teks diatas gambar yang tampil pada slider tersebut. Sedangkan penggunaan z-index pada menu, yaitu untuk menampilkan teks menu diatas alas menu yang berupa gambar/image.

CSS adalah bahasa pemrograman stylesheet yang berfungsi untuk mengatur tampilan halaman website. CSS  dapat dipelajari di Lembaga Pendidikan Kursus Komputer atau IT Training Center. Computer First adalah lembaga pendidikan kursus komputer yang membuka program kursus CSS. Selain CSS, Computer First juga membuka program kursus yang lainnya, diantaranya : HTML, PHP, Javascript, Dreamweaver, Visual Basic, Visual Basic.Net, Java, Desain Grafis, Ms. Office, Robotic dan program kursus lainnya.

Untuk lebih memahami tentang z-index, penulis sudah membuat contoh penggunaan z-index dengan CSS dengan skrip sebagai berikut :

Nama File : z-index.html
<!DOCTYPE html>
<html>
  <head>
    <style>
    img
   {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
   }
    </style>
  </head>
  <body>
    <h1 style="color: #0F3">This is a heading</h1>
    <img src="gambar/Koala.jpg" width="100" height="140" />
    <p style="color:#F00">Because the image has a z-index of -1, it will be placed behind the text.</p>
  </body>
</html>

Jika file dijalankan dibrowser, maka akan tampil hasilnya sebagai berikut :









Demikian artikel ini penulis buat, semoga bermanfaat bagi semua pembaca blog Computer First. Jangan lupa untuk dicoba sendiri dan beri komentarnya.




author profile image
Abdelghafour

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tidak ada komentar

Posting Komentar

no
Computer First - First Choice in IT Training Center - menyediakan jasa pelatihan Kursus Komputer di Jakarta sejak dari usia dini yaitu sejak anak-anak sampai dengan dewasa. Computer First berdiri pada tahun 2001, Visi Computer First ingin menjadi First Choice in IT Training Center melalui pendidikan dan pelatihan komputer yang berkualitas terbaik [Computer First Indonesia] (http://computerfirst.co.id/images/logo/logo1.png)