Pengenalan Elemen CSS Target

Pengenalan Elemen CSS Target - Sebagian orang mungkin tidak asing lagi apa yang disebut dengan css:target, namun buat mereka yang kurang memahami hal seperti ini, akan mengatakan "Saya Tidak Paham Apa itu CSS Target", karena memang bukan ini bidang keahlian mereka sehingga tidak sedikit juga di antara mereka yang kurang mengenal elemen-elemen pada CSS. Tetapi, Anda mengelola sebuah web atau blog, yang keseluruhan tampilannya dibentuk oleh struktur elemen CSS, HTML dan JavaScript yang tertata pada halaman Kode Markup Template Anda.

Lalu apa itu CSS Target?
Kita ambil kata target, berarti sesuatu yang harus bisa kita dapatkan untuk kita akhiri, sedangkan CSS hanya merupakan pembentukan gaya/desain bagaimana cara untuk meraih target tersebut. Agar Anda tidak bingung dalam pengenalan elemen CSS Target ini, sebagai contoh kecil saat Anda berkomentar, sebelum komentar Anda ditampilkan, maka blog akan melakukan efek loading, setelahnya halaman blog akan melakukan scroll secara otomatis untuk menampilkan komentar Anda yang jauh dibawah halaman tanpa Anda perintahkan (tidak berlaku buat komentar moderasi). Jadi, saya simpulkan CSS Target adalah sebuah deklarasi elemen untuk melakukan sebuah lompatan yang dapat mengubah kondisi elemen yang jauh berada diluar pemicu seperti a:link dengan nilai href seperti ini:

<a href='#target1'>Tampilkan Target 1</a>
<a href='#target2'>Tampilkan Target 2</a>
<a href='#target3'>Tampilkan Target 3</a>


<div class='box-color' id='target1'>
...
deklarasi element
...
</div>

<div class='box-color' id='target2'>
...
deklarasi element
...
</div>

<div class='box-color' id='target3'>
...
deklarasi element
...
</div>

.box-color {
  width:200px;
  height:120px;
  margin:10px;
  font:normal 25px/normal Arial,Sans Serif;
  padding:5px;}

.box-color:target {
  background:-webkit-linear-gradient(left, red, orange, yellow, green, blue);
  background:-moz-linear-gradient(left, red, orange, yellow, green, blue);
  background:-ms-linear-gradient(left, red, orange, yellow, green, blue);
  background:-o-linear-gradient(left, red, orange, yellow, green, blue);
  background:linear-gradient(left, red, orange, yellow, green, blue);}

DEMO SHOW



Seperti yang sudah Anda lihat bagaimana cara kerja css:target pada tombol DEMO SHOW diatas. Saat link di "KLIK" halaman akan melakukan lompatan secara otomatis dan berhenti pada titik focus dimana elemen tersebut sudah merupakan sebuah target yang sudah Anda tentukan.

Seperti tampilan ► DAFTAR ISI pada situs wikipedia. Yang jika salah satu link Anda "KLIK" maka halaman akan melompat secara langsung untuk menuju ke judul artikel yang sudah Anda pilih tanpa Anda melakukan scroll.

KESIMPULAN:

Bila sebuah link menuju ke sebuah hash, maka halaman akan meloncatkan dirinya secara otomatis dan segera mengangkat semua elemen yang menjadi target ke area terdekat, hal inilah yang disebut dengan css:target.
Sebagai contoh, saya telah menggunakan perintah ini pada artikel saya sebelumnya tentang ► 4 Model Desain Menu Navigasi Blogger

Bilamana hal seperti ini tidak Anda butuhkan karena nice blog tidak membahas tentang perkodean, tetapi suatu saat mungkin tutorial ini Anda butuhkan untuk membuat sebuah lompatan halaman saat tulisan artikel Anda terlalu panjang dan banyak. Dengan pengenalan CSS Target seperti ini, maka akan dengan mudah Anda Membuat Profil Menu Efek Slot Tab dengan gaya Anda sendiri.