CSS tutorial: link yang bling-bling


Satu-satunya elemen CSS yang bisa punya 3 kondisi berbeda adalah hyperlink atau demi kenyamanan pengetik* selanjutnya akan disingkat menjadi “link” aja. Elemen <body>, misalnya, begitu ditetapkan di CSS untuk berwarna ijo dan berukuran 8pt akan terus berwarna ijo dengan ukuran 8pt di seluruh halaman (kecuali kalo diubah di bagian tertentu menggunakan perintah berbasis HTML). Sedangkan link, yang kode HTML-nya adalah <a href=”http://blablabla”&gt; siap untuk dibedakan menjadi 3 kondisi yaitu:

  1. Kondisi awal, dengan perintah “a”
  2. Kondisi saat lagi di-mouse-over / disenggol-senggol menggunakan ujung mouse-pointer, dengan perintah “a:hover”
  3. Kondisi saat link udah pernah diceklik / dikunjungi, dengan perintah “a:visited”

Ketiga kondisi ini bisa kita atur berbeda satu dengan lainnya dengan perintah di CSS, dan yang gue maksud di sini bener-bener bisa beda buangeeet – terserah selera kita. Ekstrimnya, bisa aja kita buat link yang belum diceklik berukuran raksasa, misalnya 20pt, saat di-mouse-over mengkerut jadi 8pt; dan setelah pernah dikunjungi jadi berukuran 30pt. Bebas-bebas aja. Atau bisa juga dibedakan berdasarkan parameter-parameter font lainnya, misalnya saat belum diceklik ada garis bawah (underline) tapi saat dimouse-over garis bawahnya hilang. Terserah si pembuatnya.

Selain nampak lebih menarik, perbedaan 3 kondisi link juga membantu para pengunjung untuk mengingat link mana aja yang udah pernah dia klik. Tapi gue sarankan, sebaiknya ketiga kondisi link ini nggak dibedakan dari segi ukuran, baik dari segi “font-size” maupun “font-weight”-nya. Kenapa? Karena perbedaan ukuran yang terlalu drastis akan bikin seluruh halaman menjadi “goyang” sehingga kurang rapih saat perbedaan kondisi tersebut terjadi. Misalnya, bayangin kalo contoh yang ada di alinea sebelumnya, di mana link berukuran 20pt bisa mengkerut ke 8pt saat di-mouseover, akan membuat tulisan-tulisan di bagian lainnya bergeser akibat selisih ukuran tersebut. Efek seperti ini akan cukup ‘annoying’ bagi para pengunjung.

Ok biar lebih jelas kita lanjut ke contoh aja deh.

Gue membuat perintah CSS sebagai berikut:

a {
color: green;
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: red;
}
a:visited {
color: navy;
text-decoration: none;
}

Perintah CSS di atas, dalam bahasa manusia berbunyi:

Setiap hyperlink akan berwarna hijau tanpa garis bawah, tapi kalo di-mouseover akan berubah warna menjadi merah dan ada garis bawahnya, serta nanti kalo udah diceklik akan berwarna biru tua tanpa garis bawah.

Hasilnya adalah seperti yang tercantum di kotak kuning di bawah ini. Linknya berada di tulisan “VCO”. Coba mouse-over dan klik untuk ngeliat perbedaan efeknya!

“Minum VCO setiap hari, badan sehat penyakit lumat.”

Latihan:
Coba buat efek ukuran yang ekstrim untuk ketiga kondisi link, dan lihat sendiri dampaknya terhadap kerapihan tampilan web yang lo buat.

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS
Memformat font pake CSS

*yaitu gue sendiri

foto seperti biasa dari picturequest.com, udah dimodifikasi warna dan animasinya.


Iklan baris:

Iklan
Tinggalkan komentar

45 Komentar

  1. thanks about cssnya klo bisa kasih tau saya lagi

    Suka

    Balas
  2. binun 🙂

    Suka

    Balas
  3. eldrazit said: tetep blom ngerti.harus dipraktekkan

    ya, coba deh dipraktekin, nggak akan terlalu sulit kok.

    Suka

    Balas
  4. tetep blom ngerti.harus dipraktekkan

    Suka

    Balas
  5. dianpurnamalia said: mas… gminana sihh maksudnya???.. gwngga ngerti… ajarin doooongg…. gw pengen bikin effect blink blink yg gambar rantai diatas… bisa berubah warna ijo.. merah..biru…

    kalo efek gambar blink2 rantai sih topik lain lagi, nggak ada hubungannya dengan css. itu dibuat pake program adobe image ready. kalo mau belajar, coba deh cari di google dengan keyword ‘gif animation tutorial’

    Suka

    Balas

Ada komentar?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

  • Komentar Terbaru

    mbot pada [2012-011] Ajaran ‘sesat…
    Fefiana Diny pada siapa yang sering kesetrum sep…
    syifa pada Nostalgia Tentang Benda Ajaib…
    disca dista pada siapa yang sering kesetrum sep…
    wentyaranan pada [2012-011] Ajaran ‘sesat…
    Sally “M” Marcelina pada siapa yang sering kesetrum sep…
    Feni Febrianti pada siapa yang sering kesetrum sep…
    mbot pada My Wonder Woman
    bayutrie pada My Wonder Woman
    mbot pada My Wonder Woman
  • Terfavorit

  • Terbanyak diklik

  • Masukin email lu di sini agar dapat notifikasi tiap kali ada tulisan baru

    Bergabunglah dengan 6.583 pengikut lainnya

  • Twitnya @mbot

  • Agung ‘si mbot’ Nugroho

  • Arsip

  • Penunggu blog ini

    mbot

    mbot

    Seorang pegawai biasa-biasa aja

    Tautan-tautan Pribadi

    Layanan Terverifikasi

    Tampilkan Profil Lengkap →

  • RSS Nonton Deh!

    • Hal yang Perlu Disiapin Sebelum Nonton "A Quiet Place" 15 April 2018
      Buat yang belum tau, "A Quiet Place" menceritakan kehidupan sebuah keluarga dengan 3 anak yang hidupnya sama sekali nggak boleh berisik, karena kalo bersuara dikit aja bisa diserang oleh 'sesuatu' (no spoiler ahead).Tentunya ini sedikit menimbulkan pertanyaan bagi gue, lantas gimana kalo mereka eek. Mungkin suara ngedennya bisa diredam, s […]
    • Benarkah Pacific Rim Uprising Jelek? 25 Maret 2018
      Soal keputusan untuk nonton atau nggak nonton sebuah film kadang cukup pelik. Di satu sisi, inginnya nonton semua film yang rilis. Di sisi lain, tiket bioskop deket rumah sekarang udah mencapai 60 ribu (harga weekend). Belum termasuk pop corn yang ukuran mediumnya 50 ribu dan air putih di botol 330 ml seharga 10 ribu*. Artinya: filmnya harus beneran dipilih […]
    • Review: Designated Survivor (Serial TV 2016) 15 Maret 2018
      Semua berawal gara-gara Netflix.Di suatu hari yang selo, nyalain Netflix tanpa tau mau nonton apa, tiba-tiba trailer film ini muncul.Ida langsung tertarik. "Nonton ini aja, suami. Istri seneng nonton film yang gini-gini," katanya, tanpa keterangan yang lebih operasional mengenai batasan film yang masuk dalam kategori 'gini-gini'.Ternyata […]
    • Review: Peter Rabbit (2018) Bikin Penonton Doain Tokoh Utama Celaka 11 Maret 2018
      Biasanya film kan dikemas sedemikian rupa biar penonton bersimpati pada tokoh utamanya, ya. Biar kalo tokoh utamanya dalam posisi terancam, penonton deg-degan, berdoa biar selamat sampai akhir film. Khusus untuk film ini, gue sih terus terang doain Peter Rabbit-nya cepetan mati. Digambarkan dalam film ini Peter Rabbit adalah kelinci yang sotoy, sangat iseng […]
    • Sensasi Nonton Pengabdi Setan Bareng Emak-Emak Setan 8 Oktober 2017
      Sejak lama, Joko Anwar terobsesi dengan film horor. Menurutnya, horor adalah genre film yang paling jujur. Tujuannya ya nakut-nakutin penonton, bukannya mau ceramah, motivasi, atau menyisipkan pesan moral. Di kesempatan berbeda, gue juga pernah denger dia bilang, secara komersial film horor lebih berpotensi laku. Alasannya sederhana: karena takut, orang cend […]
    • Parodi Film: Jailangkung (2017) 26 Juni 2017
      SPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTFerdi (Lukman Sardi) diketemukan nggak sadar di sebuah rumah terpencil oleh pilot pesawat carterannya. Dia dirawat di ICU, tapi dokter nggak bisa menemukan apa penyakitnya.Anak Ferdi, Bella (Amanda Rawles), tentu kepikiran. Dia minta bantuan Rama (Jefri Nichol), seorang... yah, dib […]
    • Parodi Film: Suicide Squad (2016) 14 Agustus 2016
      SPOILER ALERT!Jangan baca kalo masih ingin penasaran dengan cerita film ini.SPOILER ALERT!SPOILER ALERT!SPOILER ALERT!Amanda Waller, pejabat intelijen, presentasi di depan sekumpulan pejabat militer. AMANDA: “Kita beruntung Superman yang barusan ini, yang sekarang lagi mati suri dan dipastikan akan hidup kembali dalam film berikut karena demikianlah pakem da […]
    • Parodi Film: Bangkit (2016) 12 Agustus 2016
      SPOILER ALERT!Jangan baca kalo masih ingin penasaran dengan cerita film ini.SPOILER ALERT!SPOILER ALERT!SPOILER ALERT!Ada bus kejeblos jurang. Muncul sang pahlawan, anggota Basarnas, bernama Addri. Ya, dengan 2 huruf D. Addri: “Saya akan menyelamatkan Anda semua, satu per satu. Kita mulai dari wanita dan anak-anak!”Beberapa menit kemudian, hampir semua penum […]
    • Kalo Fans Turun Tangan Ngeberesin Trailer Film 15 Mei 2016
      Hari gini, jadi produsen film 'mainstream' itu semakin nggak gampang. Masalahnya, software pembuat film makin gampang didapat, film bisa dibikin secara "rumahan" dan akibatnya: penonton makin kritis. Sepuluh tahun lalu, saat produsen film melempar trailer promosi ke pasar, kemungkinannya cuma dua: orang tertarik atau nggak tertarik. Sekar […]
    • Review: My Stupid Boss (2016) 14 Mei 2016
      Nggak kerasa udah 7 tahun sejak gue pertama kali bikin review tentang buku My Stupid Boss. Dalam kurun waktu tersebut bukunya udah masuk jilid 5, plus sempet ada antologi cerita boss-boss bego kiriman pembaca juga, dan… difilmkan!Kemarin gue kembali beruntung dapet kesempatan nonton premiere film My Stupid Boss the Movie, sebagai (kalo nggak salah) premiere […]
  • RSS Bisnis bareng Ida Yuk!

    • Diamond Conference Tokyo 2018: Part 1-- Keberangkatan! 8 Mei 2018
      [Senin, 17 April 2018] Jalan-jalan Conference kali ini rasa excitednya agak sedikit beda karenaaaaa ini adalah DIAMOND CONFERENCE PERTAMA AKU... 😍😍😍😍😍😍 Selama ini aku pergi kan untuk Gold Conference, yaitu reward buat title Gold Director and up. Sedangkan seperti namanya, Diamond Conference ini adalah reward khusus buat yg titlenya Diamond and up! Selama ini […]
    • Seminar "Katakan TIDAK Pada Investasi Ilegal"-- MLM vs Money Game. 8 Mei 2018
      Diamond and up Oriflame bersama Top Management Oriflame foto bareng. Tanggal 2 Mei 2017 tahun lalu, sebagai salah satu Diamond Director-nya Oriflame, aku dapat sebuah undangan eksklusif untuk hadir ke acara Seminar Nasional yg diselenggarakan oleh Satuan Tugas Waspada Investasi dan APLI (Asosiasi Penjualan Langsung Indonesia). Judul seminar ini adalah-- KATA […]
    • Sewa Modem Wifi Buat Ke jepang? Di HIS Travel Aja! 26 April 2018
      Ceritanyaaa.. aku dan agung baru aja pulang dari Diamond Conferencenya Oriflame di Tokyo.. Ada banyaaaaak banget yg pengen aku ceritain. Satu-satu deh ya nanti aku posting. Tapi aku mau mulai dari soal INTERNETAN selama di sana.. ahahahaha.. PENTING iniii! Untuk keperluan internetan di tokyo kemarin aku dan agung sempet galau. Mau pakai roaming kartu atau se […]
    • Penyebab Kapas Ini Kotor Adalah... 17 Maret 2018
      Kapas ini bekas aku bersihin muka tadi pagi bangun tidur.. Lhoo kok kotor?Emangnya gak bersihin muka pas tidur?Bersihin dong. Tuntas malahan dengan 2+1 langkah.Lalu pakai serum dan krim malam. Kok masih kotor? Naaah ini diaaaa.. Tahukah teman2 kalau kulit wajah kita itu saat malam hari salah satu tugasnya bekerja melakukan sekresi atau pembersihan?Jadi krim […]
    • Join Oriflame Hanya Sebagai Pemakai? Boleh! 16 Maret 2018
      Aku baru mendaftarkan seseorang yg bilang mau join oriflame karena mau jadi pemakai..Dengan senang hatiiii tentunyaaa aku daftarkan..😍😍😍 Mbak ini bilang kalau udah menghubungi beberapa orang ingin daftar oriflame tapi gak direspon karena dia hanya ingin jadi pemakai aja.. Lhoooooo.. Teman2 oriflamers..Member oriflame itu kan ada 3 tipe jenisnya--Ada yg join […]
    • Semua karena AKU MAU 16 Maret 2018
      Lihat deh foto ini..Foto rafi lagi asyik mainan keranjang orderan di Oriflame Bulungan dulu sebelum pindah ke Oriflame Sudirman sekarang. Tanggal 1 Juli 2010.Jam 00.20 tengah malam. Iya, itu aku posting langsung setelah aku foto.Dan jamnya gak salah.Jam setengah satu pagi. Hah?Masih di oriflame? IyaNgapain? Beresin tupo. Jadi ya teman2, jaman sistem belum se […]
    • Kerja Keras yang Penuh Kepastian... Aku Suka! 15 Maret 2018
      Dari club SBN--Simple Biznet, ada 3 orang yg lolos challenge umroh/uang tunai 40 juta.Sedangkan dari konsultan oriflame se-indonesia raya konon ada total sekitar 60-an orang yg dapat hadiah challenge ini. Inilah yg aku suka dari oriflame.Level, title, cash award, maupun hadiah challengenya gak pernah dibatasin jumlahnya! Mau berapapun jumlah orang yg lolos k […]
    • Tendercare Oriflame: Si Kecil Ajaib 14 Maret 2018
      Buat teman-teman yg pemakai oriflame, atau at least pernah liat katalognya, mungkin pernah dengar atau justru pemakai setia si Tender Care ini.Bentuknya keciiil, mungiiil, lha cuma 15 ml doang.. Eh tapi kecil-kecil gini khasiatnya luar biasa.Tender Care ini produk klasiknya oriflame, termasuk salah satu produk awal saat oriflame pertama kali mulai dagang di […]
    • Sharing di Dynamics Sunday Party 4 Maret 2018
      Agenda hari minggu ini berbagi ilmu dan sharing di acara bulanannya teh inett Inette Indri-- DSP, Dymamics Sunday Party! Yeaaaaay! Teh inet udah lama bilang kalau pengen undang aku kasih sharing di grupnya. Aku dengan senang hari meng-iya-kan. Karena buatku berbagi ilmu gak pernah rugi. Jadilah kebetulan wiken ini aku ke Bandung untuk kasih kelas buat team b […]
    • Kelas Bandung, Sabtu 3 Maret 2018 3 Maret 2018
      Ah senaaaang ketemuan lagi sama team bandungku tersayang..😍😍😍😍😍 Hari ini aku bawain materi tentang mengelola semangat.Ini materi sederhana tapi sangat amat POWERFULL.Karena betul2 bikin ngaca sama diri sendiri.Yang banyak dibahas adalah soal MINDSET. Kelas kali ini Agung Nugroho juga ikut berbagi ilmu..Bapak Diamond kasih kelas juga lhooo..😍😍😍😍😍 Seneng […]
  • Iklan
%d blogger menyukai ini: