Membuat Gradasi Warna Underline dengan CSS3

10/04/2018    Risman Hakim    298     Website

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 :)

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More