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:


Image css target concept





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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Pengenalan Elemen CSS Target
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

12 komentar

  1. Pencerahan tentang kode css target, saya hanya mengenal css tapi
    Masih kurang paham unsur unsur lainya Mbak. masih perlu belajar deh :)

    BalasHapus
    Balasan
    1. hehe....!! devy juga masih perlu belajar kok mas.

      Hapus
    2. sudah ketinggalan, mas aldino nyusul saja ya.?

      Hapus
  2. mbak devi baru belajar? ah masa? :d ini mah dah jago hehe..

    BalasHapus
    Balasan
    1. serius mas, devy juga baru belajar kok, usia blog devy saja belum ada 1 tahun kan..

      Hapus
  3. Wah hebat banget mbak Devy kalo membahas CSS, saya pribadi udah angkatan deh urusan ginian,,, btw trims ilmunya hehe...

    Salam Blogging dari Pulau Dollar

    BalasHapus
    Balasan
    1. jangan terlalu memuji begitu mas, ntar devy jatuh lagi kebanyakan dipuji, hehehe..

      kalau mereka yang kurang memahamu. mungkin karena lebih ke ribetnya mas, sehingga males bermain-main dengan perkodean pada HTML

      Hapus
  4. mba devi pinter ihh, klo yang ini bisa kayaknya.. uji coba kemarin lumayan, cuma ga rapi kyk disini..

    BalasHapus
    Balasan
    1. bukannya pinter teh, hanya tahu sedikit tentang CSS, kalau teh santika kan lebih pinter apalagi kalu membahas tentang manfaat tentang buah.

      Hapus
  5. mbak devy nih emang jago dah cantik pinter lagi... thanks mbak infonya, perlu banyak belajar dari mbak devy nih.
    sukses selalu buat mbak devy...

    BalasHapus
    Balasan
    1. emang gak ada ya mas cewek dalam kategory kurang cantik itu pinter, karena buat saya ya semua cewek pasti cantik, kalau ganteng itu milik cowok, setuju mas. hehe..

      salam sukses juga ya mas, dan terimakasih sudah bertamu di blog devy

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK