10 CSS Cuplikan untuk Membuat Efek Teks Garis Bawah Animasi yang Menakjubkan

Garis bawah CSS default berfungsi dengan baik. Siapa yang bisa membencinya?

Tapi selalu ada ruang untuk memperbaiki keadaan. Anda mungkin tidak berpikir ada banyak hal yang dapat Anda lakukan dengan garis bawah, tetapi jika Anda mempelajari animasi CSS, Anda akan menyadari betapa banyak yang dapat Anda lakukan!

Saya memilah-milah gaya garis bawah CSS yang tak terhitung jumlahnya dan memilih pilihan teratas saya untuk garis bawah khusus terbaik di web. Jika salah satu dari ini menarik perhatian Anda, jangan ragu untuk masuk dan mencoba bermain-main dengan kode sumber.

1. Garis Bawah Bergantian

Jika Anda memindahkan kursor di antara tautan ini, Anda akan melihat sesuatu yang agak lucu. Efek garis bawah di menu nav sebenarnya mengubah gaya antar tautan.

Tidak hanya itu, tetapi juga bergerak melintasi navigasi secara dinamis untuk memberikan ilusi bahwa itu adalah satu blok tunggal. Cukup keren bukan?

Anda dapat melakukan semua ini sendiri dengan sedikit CSS dengan menambahkan blok yang digarisbawahi ke dalam elemen HTML. Sangat sederhana mengingat betapa sedikit kode yang Anda butuhkan (sekitar 60 baris CSS).

2. Mencakup Banyak Baris

Gaya jeda baris CSS rumit dan tidak mudah untuk diselesaikan. Tetapi dengan beberapa kecerdikan pengembang Will King membuat pena ini menciptakan efek garis bawah dinamis yang dapat menjangkau banyak baris tanpa bug.

Perhatikan bahwa ini bergantung pada sedikit JavaScript untuk menjaga agar baris tetap utuh. Tapi itu juga cukup dinamis untuk bekerja dengan tautan apa pun di halaman, jadi tidak masalah bagaimana Anda memformat teks.

Plus semua ini menggunakan gradien CSS3 khusus untuk latar belakang yang sangat keren.

3. Garis Bawah Geser

Pengembang Ryan Morse menciptakan efek garis bawah geser yang sangat sederhana ini hanya dengan mengandalkan CSS. Ini adalah solusi yang cukup elegan mengingat itu bahkan tidak memerlukan item HTML tambahan.

Anda dapat mendesain menu navigasi Anda seperti situs lain dan menggunakan efek CSS ini untuk membuat animasi geser dinamis. Plus semua hasil dapat diubah dalam kode CSS yang mencakup easing dan durasi total.

4. Garis Bawah Teks yang Lebih Baik

Sekilas Anda mungkin tidak melihat sesuatu yang berbeda dengan garis bawah ini. Tetapi jika Anda membandingkannya dengan demo "default" yang lebih rendah di halaman, Anda akan melihat ini benar-benar terlihat jauh lebih baik.

Dalam garis bawah teks Lukas Horak yang lebih baik, Anda akan melihat bilah di bawah teks lebih cocok dengan elemen menurun. Ini mempertimbangkan bentuk huruf seperti 'g' dan 'p' di mana garis turun di bawah ketinggian garis biasa.

Juga garis bawah itu sendiri didorong sedikit lebih rendah di bawah teks sehingga mengambil tampilan baru dibandingkan dengan browser default.

5. Gaya Animasi

Pena unik ini menampilkan beberapa efek garis bawah khusus yang dibuat dengan CSS murni oleh pengembang Matthew Scott.

Ini membanggakan empat gaya garis bawah yang sangat spesifik berdasarkan beberapa transisi CSS umum:

• Kanan ke kiri
• Kiri ke kanan
• Menganimasikan ke luar
• Menganimasikan ke dalam

Anda akan melihat ini berfungsi pada transisi CSS3 umum yang berfungsi baik saat mengarahkan tautan & saat memindahkan kursor dari tautan.

Pasti beberapa efek keren dan semuanya cukup mudah untuk dimasukkan ke dalam proyek Anda sendiri.

6. Lebih Banyak Gaya Animasi

Berikut paket animasi garis bawah khusus lainnya, yang dibuat oleh dev Kseso.

Ini menjadi sedikit lebih ekstrim dengan gaya garis bawah yang mendorong bayangan CSS3 untuk efek bercahaya. Anda mungkin dapat menggunakan ini sebagai templat untuk membuat desain lightsaber Star Wars rad jika Anda punya waktu (atau hanya menyukai Star Wars).

7. Mampir saja

Saya telah melihat efek ini di beberapa situs web dan ini mungkin salah satu favorit saya. Garis bawah drop-down menggunakan CSS murni dan menganimasikan garis ke tampilan dengan efek transisi.

Dengan animasi ini Anda masih mendapatkan perasaan bahwa setiap garis bawah "batas" terhubung ke setiap tautan. Saya lebih menyukainya daripada garis yang meluncur di antara tautan karena efek ini terasa lebih tajam dan lebih langsung.

Jika Anda menginginkan pendekatan minimalis nyata untuk menggarisbawahi efek maka Anda harus mencoba bekerja dengan kode ini.

8. Memperluas Animasi

Gaya garis bawah yang meluas dapat ditemukan dalam paket garis bawah yang saya sebutkan sebelumnya. Tetapi garis bawah khusus ini sedikit berbeda karena menggunakan pengaturan waktu animasi khusus.

Perhatikan bahwa ia menggunakan fungsi cubic-bezier() untuk membuat animasi unik saat mengarahkan kursor.

Ini berjalan sedikit lebih cepat daripada transisi "linier" default sehingga memberikan efek yang cukup berbeda. Dan Anda bahkan dapat mencoba menyesuaikan sendiri animasi bezier untuk membangun gaya garis bawah yang unik sesuai keinginan Anda.

9. Garis Bawah CSS Kustom

Inilah gaya lain yang benar-benar dapat berfungsi di situs web apa pun. Pengembang Tristan Wilson membuat garis bawah sederhana ini yang membuat garis tepi beberapa piksel lebih rendah di bawah teks.

Itu cukup halus untuk diperhatikan tetapi tentu saja tidak akan membuat perbedaan besar dalam kegunaan. Efek ini benar-benar tentang estetika lebih dari kegunaan ekstra.

Jika Anda ingin garis bawah Anda benar-benar menonjol dari semua kelompok, set ini adalah tempat yang bagus untuk memulai.

10. Pas Antar Descenders

Sebelumnya saya menyebutkan menyesuaikan gaya garis bawah agar sesuai dengan tipe descender. Pena oleh Jonathan Neal ini melakukan hal itu dan tidak lebih dari HTML5 dan CSS3.

Seluruh efek bergantung pada beberapa properti CSS3: box-shadow dan text-shadow tepatnya.

Ini menciptakan ilusi bahwa ada ruang di sisi elemen descender dan memberikan kesan berkelas pada garis bawah.

Jelas merupakan pilihan yang bersih untuk situs web apa pun dan ini adalah cara yang bagus untuk mengganti warna garis bawah Anda juga.

11. Gradien Kustom

Jika Anda benar-benar mencoba untuk mendorong batas, cobalah mengerjakan ulang pena ini dengan gaya gradien garis bawah khusus.

Gradien berjalan melalui CSS3 sehingga Anda dapat mengubah warna menjadi apa pun yang Anda inginkan. Dan jika Anda dapat mempercayainya, hal ini tidak memerlukan HTML tambahan untuk berfungsi. Cukup targetkan tautan jangkar apa pun yang Anda inginkan dan salin/tempel kode CSS untuk mendapatkan garis bawah gradien Anda sendiri.

Dari semua desain ini, saya tentu berharap ada satu efek bagus yang bisa Anda ambil dari koleksi ini.

Desainer tidak selalu memikirkan efek garis bawah, tetapi ada banyak hal yang dapat Anda lakukan dengan tipografi dan jika Anda tahu cara menggunakan CSS, maka sungguh, langit adalah batasnya.