Membuat Gradasi Warna Underline dengan CSS3

Membuat Gradasi Warna Underline dengan CSS3 - Gradasi warna merupakan suatu proses perubahan dari satu warna menuju warna yang lainnya, biasanya gradasi warna terdiri dari beberapa warna yang kemudian dicampur dan menghasilkan perpaduan warna gradasi. Didalam CSS kita dapat membuat warna gradasi dengan memanfaatkan properti CSS yang tersedia, dengan memanfaatkan properti CSS kita bisa membuat efek bahkan animasi sederhana, misalnya saja kita dapat membuat warna gradasi pada objek berupa teks, elemen garis ataupun background pada website. Nah, pada tutorial berikut ini saya akan bagikan tutorial sederhana mengenai bagaimana Membuat Gradasi Warna Underline dengan CSS3.
Baik, langsung saja kita mulai praktekan membuat gradasi warna underline berikut ini.

Langkah 1 : Membuat Gradasi Warna Underline dengan CSS3

Langkah pertama dalam membuat gradasi warna underline adalah dengan menentukan objek yang akan dijadikan sebagai gradasi, dalam kasus ini objek yang akan dikenakan garis underline yaitu berupa teks, untuk itu silahkan kalian buat struktur HTML sederhana berikut ini.

<body>
    <a href ="https://www.dumetschool.com/blog/">Lorem Ipsum is simply dummy text.</a>
</body>

Langkah 2 : Membuat Gradasi Warna Underline dengan CSS3

Langkah selanjutnya barulah kita akan desain tampilan dari struktur yang telah kita buat diatas, mulai dari layout, warna dan tentunya membuat garis underline pada teks menjadi underline berwarna gradasi, silahkan ketikan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');        
body {
  align-items: center;
  background: #233645;
  display: flex;
  font-family: 'Do Hyeon', sans-serif;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
a {
  border: 0px;
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, rgb(60, 181, 181), rgb(229, 59, 81));
  border-image-slice: 1;
  color: white;
  margin: auto;
  text-decoration: none;
}

Setelah semua sintak diatas telah diketikan, silahkan simpan filenya dengan nama index.html kemudian kalian bisa membuka di browser masing - masing dan lihat hasilnya, hasilnya akan terlihat seperti pada gambar dibawah ini.

Cukup simple dan cukup mudah cara membuatnya, namun tetap memberikan tampilan yang menarik untuk garis underline pada teksnya. Baiklah, cukup sekian tutorial sederhana mengenai bagaimana Membuat Gradasi Warna Underline dengan CSS3, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

10 April 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat