Properti CSS untuk Membuat Hyperlink Lebih Menarik

Hyperlink tidak selalu mendapatkan perhatian yang layak dari desainer web. Tentu, kami mungkin melakukan beberapa penyesuaian. Namun, kami tidak selalu melakukan upaya ekstra untuk menjadikannya menonjol.

Mungkin itu karena pilihan gaya dulu terbatas. Warna tautan dan garis bawah adalah pilihan utama. Status arahkan kursor dan fokus tampaknya merupakan tempat terjadinya sebagian besar kreativitas. Penyempurnaan lainnya cenderung memerlukan add-on seperti JavaScript.

CSS telah mengubah permainan dalam beberapa tahun terakhir. Beberapa properti tersedia untuk menyesuaikan tampilan hyperlink. Mereka juga memberikan tingkat kontrol yang lebih tinggi mengenai detail seperti jarak dan ukuran.

Ini adalah dunia yang penuh kemungkinan baru. Mari kita periksa beberapa properti CSS yang membantu membuat hyperlink lebih menarik.

Tautan Bawaan

Kami akan mulai dengan konfigurasi tautan default. Warna tautan dan status CSS telah ditambahkan – tapi hanya itu. Ini akan berfungsi sebagai dasar saat kita menjelajahi properti CSS di bawah.

Lihat Pena Penataan Tautan: Polos oleh Eric Karkovack

text-decoration-color

Biasanya garis bawah suatu tautan harus memiliki warna yang sama dengan teksnya. Itu text-decoration-color properti memungkinkan kita memilih rona terpisah. Ini juga berfungsi dengan garis atas, coretan, dan apa pun yang diatur oleh text-decoration milik.

Kami telah menambahkan garis bawah coklat untuk melengkapi teks tautan hijau kami.

Lihat Pena Penataan Tautan: warna-dekorasi-teks oleh Eric Karkovack

text-decoration-skip-ink

Properti niche ini menentukan bagaimana dekorasi teks tautan berinteraction dengan mesin terbang. Pengaturan defaultnya adalah otomatis, di mana browser menginterupsi garis bawah dan garis atas sehingga tidak menyentuh mesin terbang. Anda akan melihat ini dengan huruf kecil yang berada di bawah garis dasar.

Menyetel properti ke none berarti garis bawah atau garis atas menggambar garis lurus – di mana pun mesin terbang berada.

Lihat Pena Penataan Tautan: tautan-dekorasi-teks oleh Eric Karkovack

text-decoration-thickness

Ketebalan garis bawah tautan biasanya mengikuti apa yang ditentukan dalam font-weight milik. Artinya, teks tebal akan menghasilkan garis bawah yang lebih tebal. Properti ini memungkinkan kita menetapkan nilai yang konsisten untuk setiap tautan dalam kaskade.

Lihat Pena Penataan Tautan:ketebalan dekorasi teks oleh Eric Karkovack

text-decoration-style

Dekorasi teks tidak harus berupa garis lurus. Properti ini memungkinkan Anda mengubah gaya menjadi dashed, dotted, doubleatau wavy garis.

Lihat Pena Penataan Tautan: gaya dekorasi teks oleh Eric Karkovack

text-underline-offset

Berikut cara untuk menentukan seberapa dekat (atau tidak) garis bawah dengan teks di atas. Menambahkan beberapa piksel ruang di antara keduanya dapat meningkatkan keterbacaan.

Perhatikan bahwa properti ini tidak memengaruhi contoh tag garis bawah HTML (<u>). Ini hanya mempengaruhi kasus di mana text-decoration properti diatur.

Lihat Pena Penataan Tautan: teks-garis bawah-offset oleh Eric Karkovack

text-underline-position

Properti khusus lainnya, text-underline-position menentukan posisi garis bawah relatif terhadap teksnya. Menyetelnya ke bawah sangat ideal untuk rumus matematika dan ilmiah. Itu membuat karakter subskrip mudah dibaca – bahkan ketika digarisbawahi.

Lihat Pena Penataan Tautan: teks-garis bawah-di bawah oleh Eric Karkovack

Melangkah Lebih Jauh dengan Gaya Tautan

Hyperlink tidak harus hambar. Sekarang ada banyak cara untuk menjadikannya bagian dari merek Anda seperti halnya elemen desain lainnya.

Semua properti di atas patut dipertimbangkan saat menata tautan. Mereka relatif mudah diterapkan dan dapat membuat tautan lebih menarik dan mudah diakses. Yang terbaik dari semuanya, ini adalah CSS asli dan tidak akan memengaruhi kinerja pemuatan halaman.

Anda juga dapat menggunakannya di luar gaya default. Gayakan untuk berbagai keadaan, seperti mengubah warna garis bawah tautan selama acara hover. Selain itu, ada peluang untuk menambahkan animasi dan transisi untuk menciptakan segala jenis interaction mikro yang menyenangkan.

Berhati-hatilah – ada kemungkinan untuk mengambil tindakan yang terlalu jauh. Selalu ingat praktik terbaik untuk meningkatkan pengalaman pengguna. Apa pun yang membuat tautan lebih sulit dibaca atau digunakan tidak layak dilakukan.

Saatnya untuk menjadi kreatif! Bereksperimenlah dengan properti CSS ini dan lihat bagaimana Anda dapat memberikan sedikit kehidupan pada tautan Anda.


Atas

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top