Efek Lubang Tag Elemen DIV Html Menggunakan Css

Efek lubang pada tag elemen html menggunakan Css
(Efek lubang pada tag elemen html menggunakan Css)
Membuat Efek Lubang Atau Sorot dalam elemen html sebenarnya sangat mudah. Efek Lubang yang dimaksud adalah menutup tepat diatas halaman html menggunakan tag elemen div atau span secara transparan sehingga akan memberikan efek gelap. Sekedar mengingatkan, pada tutorial ini hanya menggunakan css murni tanpa javascript. Kemudian tag tersebut akan diberikan lingkaran yang seoalah-olah terlihat bolong sehingga pada bagian lingkaran tersebut akan memperlihatkan halaman secara jelas. Silahkan klik tombol dibawah untuk lebih jelasnya.

Preview
(Klik Kemudian Scroll)

Fitur seperti ini biasa digunakan oleh para pengembang website untuk menyoroti daerah tertentu untuk memandu para pengunjung baru dalam menggunakan website miliknya. Misalnya untuk menyorot tombol download sehingga para pengunjung dapat mengetahui cara download dengan mudah, menyorot tombol saldo sehingga para pengunjung mengetahui bagaimana melihat saldo kita dll. Fitur seperti ini dibuat untuk mempermudah para pengunjung dalam menggunakan website yang sedang di kunjungi.

Baca : Belajar HTML5 - Elemen Dasar Untuk Pemula


Langkah Pembuatan:

Sebenarnya, untuk membuat efek ini hanya perlu memanipulasi tag seperti div, span dll sehingga akan nampak seperti bolong dengan sisi gelap (transparant). Silangkan perhatikan dan ikuti langkah-langkah berikut:

Siapkan Halaman Asli

Kode Html dibawah merupakan file asli yang nantinya akan kita beri efek lubang di atasnya. File kerangka ini tak harus sama dengan file yang ane tulis. Jika Ente punya website atau blog silahkan gunakan saja website atau blog tersebut. Namun jika tidak punya maka silahkan gunakan html yang sudah ane siapkan.
Silahkan di salin kedalam notepad untuk mempersingkat waktu, lalu simpan dengan nama lubang.html

Baca : Pahami Tag Dasar HTML5 dari Nol Hingga Mahir WEB


Klik tombol preview untuk melihat file sebelum di tambahkan efek lubang.

Tambahkan Tag DIV

Setelah kita memiliki file html, maka kita tambahkan tag div yang berisi id didalam file tersebut. Tambahkan kode berikut tepat di bawah tag <body>


Perhatikan penempatan div pada kode berikut:
*) kode lainnya...
<body>
<div id="preview">
   <div id="lobang"></div>
</div>
*) kode lainnya...
</body>
*) kode lainnya...
Tag Div inilah yang nantinya kita ubah menjadi Hole (Lubang).

Tambahkan Css Lubang

Berikut adalah kode css untuk memberikan efek lubang pada div yang telah kita pasang.

Silakan tambahkan kode css tepat diatas tag </head>, Silahkan perhatikan contoh berikut :
      *) kode lainya...
<head>
      *) kode lainya...
      Letakan Kode Css Lubang disini...
</head>
      *) kode lainya...

Baca juga : Efek Bolong Tag DIV Html Dengan Tombol Show Hide


Sampai ke tahap ini file sudah jadi, silahkan save lalu jalankan di browser. Jika tidak sesuai harapan. Silahkan gunakan kode html yang telah ane tambahkan efek bolong pada kolom kode berikut kemudian save dengan format *.html



Efek Hole atau lubang ini dapat ente digunakan untuk memberikan tanda ke suatu halaman web untuk menyorot daerah tertentu. Sekian tutorial cara membuat Efek lubang pada tag elemen html menggunakan Css. Semoga berguna untuk menambahkan fitur di website atau blog ente :D

0 komentar :