Get best of the week

CSS murni: 4 metode untuk menjiwai warna tautan

Penulis artikel, terjemahan yang kami terbitkan hari ini, mengusulkan, menggunakan CSS murni, untuk membuat mekanisme untuk mengubah warna teks tautan ketika Anda mengarahkan kursor ke sana. Tapi ini seharusnya tidak menjadi perubahan warna biasa. Warna baru harus mengisi tautan dari kiri ke kanan, menggantikan yang lama.


Untuk melakukan ini, Anda dapat menggunakan salah satu dari empat metode yang dijelaskan dalam materi ini. Pertimbangkan metode ini, berikan perhatian khusus pada berbagai hal penting seperti aksesibilitas konten, kinerja solusi, dan dukungan browser.

Metode # 1: menggunakan klip-latar belakang: teks


Pada saat penulisan ini, properti background-clip: text adalah eksperimental. Ini tidak didukung di Internet Explorer 11 dan di bawah ini. Metode ini melibatkan pembuatan apa yang disebut " knockout text " (teks yang kelihatannya terpotong di permukaan tertentu dan latar belakangnya tembus) dengan gradien yang tajam . Markup HTML terdiri dari satu elemen <a>yang menjelaskan hyperlink.

<a href="#">Link Hover</a>

Mari kita mulai dengan membuat gaya untuk tautan. Penggunaan overflow: hiddenakan mengarah pada fakta bahwa ketika Anda mengubah tampilan tautan, segala sesuatu yang berada di luar cakupan elemen ini terputus.

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

Kita perlu menggunakan gradien linier tajam dengan nilai 50% untuk warna awal dan akhir tautan.

a {
  /*  ,    */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

Gunakan properti background-clipuntuk memotong gradien. Mari kita beri nilai textuntuk menampilkan teks. Kami akan menggunakan properti dari background-sizedan background-position. Ini dilakukan untuk menampilkan warna awal.

a {
  /*  ,    */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

Dan akhirnya, tambahkan properti CSS ke style dan style transitionhyperlink pseudo-class :hover. Agar warna baru mengisi tautan dari kiri ke kanan saat Anda mengarahkan kursor ke tautan, gunakan properti background-position.

a {
  /*  ,    */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

Berikut ini adalah contoh pada CodePen. Meskipun teknik ini memungkinkan Anda untuk mencapai efek yang diinginkan, Safari dan Chrome memangkas teks dan elemen bayangan. Ini berarti bahwa mereka tidak akan ditampilkan. Menerapkan gaya teks, seperti menggarisbawahi teks menggunakan properti CSS text-decoration, tidak akan berfungsi. Karena itu, jika Anda ingin tautan digarisbawahi, Anda harus mempertimbangkan cara lain untuk menyesuaikan garis bawah .


Metode # 2: menerapkan lebar / tinggi


Metode ini didasarkan pada penggunaan atribut data- * yang berisi teks yang sama dengan tag <a>. Di sini Anda menggunakan manajemen properti width(untuk mengisi tautan dengan warna dari kiri ke kanan atau kanan ke kiri) atau properti height(untuk menerapkan efek dari atas ke bawah atau dari bawah ke atas). Misalnya, dalam kasus kami, efek diterapkan ke properti width, yang, ketika Anda mengarahkan mouse ke tautan, berubah dari 0 hingga 100%. Berikut adalah markupnya:

<a href="#" data-content="Link Hover">Link Hover</a>

CSS mirip dengan yang digunakan dalam contoh sebelumnya, kecuali untuk pengaturan properti latar belakang. Di sini, di samping itu, properti akan berfungsi dengan baik text-decoration:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: royalblue;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

Di sinilah kita perlu menggunakan teks dari atribut data-content. Teks ini akan ditempatkan di atas konten tag <a>. Kita dapat menggunakan trik kecil yang menarik di sini, yang terdiri dari menyalin teks dari suatu atribut dan menurunkannya menggunakan fungsi attr()di properti contentpseudo-element dari sebuah tautan ::before.

a::before {
  position: absolute;
  content: attr(data-content); /*    */
  top: 0;
  left: 0;
  color: midnightblue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

Agar teks tidak melompat ke baris baru, gaya akan diterapkan ke elemen pseudo white-space: nowrap. Untuk mengubah warna tautan, setel nilai properti CSS dari colorpseudo - element ::beforedan buat sehingga di awal nilai properti adalah width0:

a::before {
  /*  ,    */
  width: 0;
  white-space: nowrap;
}

Tingkatkan nilai widthpseudo-element ::beforehingga 100% untuk menerapkan efek ketika Anda mengarahkan mouse:

a:hover::before {
  width: 100%;
}

Berikut adalah contoh penerapan metode ini. Meskipun kami, yang bekerja pada sifat-sifat elemen widthdan heightmencapai apa yang kami butuhkan, metode ini terkenal karena produktivitasnya yang rendah . Untuk mendapatkan perubahan warna yang halus pada 60 bingkai per detik - lebih baik menggunakan properti transformatau opacity.Menggunakan properti text-decorationmemungkinkan Anda untuk menggunakan berbagai gaya penekanan teks dalam tautan animasi. Berikut adalah contoh yang menunjukkan ini, dibuat menggunakan teknik ketiga, yang sekarang akan kita pertimbangkan. Ini didasarkan pada penggunaan properti CSS dari clip-path .



Metode 3: menggunakan jalur klip


Di sini kita akan menggunakan properti CSS clip-pathdan poligon, dalam hal ini, persegi panjang. Kotak memiliki empat sudut, panjang dua sisinya meningkat ketika Anda mengarahkan kursor ke tautan. Sosok itu mengembang, salah satu sisinya bergerak dari kiri ke kanan.


Ini menggunakan markup yang sama seperti pada contoh sebelumnya:

<a href="#" data-content="Link Hover">Link Hover</a>

Kami, sekali lagi, akan menggunakan elemen pseudo ::before. Tetapi CSS berbeda di sini:

a::before {
  position: absolute;
  content: attr(data-content);
  color: midnightblue;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 275ms ease;
}

Berbeda dengan metode sebelumnya, di sini properti text-decoration: underlineharus disetel untuk elemen semu ::before. Ini diperlukan agar perubahan warna tidak hanya memengaruhi teks tautan, tetapi juga garis yang menggarisbawahi tautan. Sekarang mari kita lihat kode-CSS properti clip-path:

clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

Posisi simpul poligon di properti clip-pathditentukan sebagai persentase, mereka menentukan koordinat dalam urutan yang sesuai dengan penempatannya pada poligon:

  • 0 0 = sudut kiri atas
  • 0 0 = sudut kanan atas
  • 0 100% = sudut kanan bawah
  • 0 100% = sudut kiri bawah

Arah penerapan efek pengisian dapat diubah dengan memodifikasi koordinat. Sekarang kita tahu koordinatnya, kita dapat membuat angka itu tumbuh dengan bergerak dari kiri ke kanan ketika Anda mengarahkan kursor ke tautan mouse:

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Berikut ini adalah versi yang berfungsi dari contoh ini. Teknik warna tautan animasi ini bekerja dengan sangat baik, tetapi sebelum menggunakannya, pertimbangkan dukungan dari properti di clip-pathbrowser yang berbeda. Membuat transisi menggunakan CSS clip-pathlebih baik daripada menggunakan teknik tinggi / lebar. Namun, penggunaannya mengarah pada fakta bahwa browser melakukan operasi Paint yang sangat intensif sumber daya (menggambar).

Metode # 4: menggunakan transformasi


Markup yang digunakan di sini menggunakan teknik elemen masking <span>. Karena kami akan menggunakan <span>konten yang menduplikasi konten tautan dalam elemen , kami akan menggunakan atribut untuk meningkatkan ketersediaan konten aria-hidden="true". Ini akan menyembunyikan teks berulang dari pembaca layar.

Teks seperti itu tidak akan disuarakan dua kali:

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

CSS untuk elemen <span>berisi deskripsi transisi, yang dimulai di sebelah kiri:

span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

Sekarang Anda perlu mengatur pergerakan elemen <span>ke kanan, terlihat seperti yang ditunjukkan di bawah ini.


Untuk melakukan ini, gunakan ::beforeelemen pseudo- elemen <span>. Dan, seperti sebelumnya, kita akan menggunakan atribut data-content. Mari kita ubah posisi elemen, terapkan transformasi transform: translateX(100%), gerakkan sepanjang sumbu X.

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

Seperti halnya elemen <span>, posisi elemen pseudo ::beforeakan ditetapkan menggunakan konstruksi transform: translateX(0):

a:hover span::before {
  transform: translateX(0);
}

Berikut ini adalah contoh pada CodePen. Meskipun metode ini memiliki dukungan lintas-browser terbaik di atas, perlu lebih banyak HTML dan CSS untuk mengimplementasikannya. Namun demikian, penggunaan properti CSS transform tidak merusak kinerja , penggunaannya tidak menyebabkan penggambaran ulang elemen, dan, sebagai hasilnya, mengarah pada pembentukan transisi CSS yang lancar pada 60 frame per detik.


Ringkasan


Kami hanya melihat empat metode berbeda untuk mencapai efek yang sama menggunakan CSS. Meskipun masing-masing dari mereka memiliki pro dan kontra, Anda dapat melihat bahwa tidak ada yang mustahil dalam mengatur animasi warna teks dari tautan ketika Anda mengarahkan kursor pada mereka. Ini adalah efek kecil yang menyenangkan, penggunaannya mengarah pada fakta bahwa tautan dianggap lebih interaktif.

Pembaca yang budiman! Apakah Anda menghidupkan tautan di proyek Anda?

More articles:


All Articles