Tutorial CSS : Kumpulan Efek Membuat Underline

Beberapa blog sering menggunakan efek yang rapi, yang mana effect tersebut membuat website tersebut "wah" dimata pengunjungnya, salah satunya adalah Efek underline pada sebuah link/tulisan saat cursor menyentuh "bagiannya". Mungkin untuk efek css standar hanya underline saja tidak ada animasi yang muncul kelihatan "kaku" dan kurang menarik. Kalau ada yang yang lebih menarik kenapa tidak ? - Tutorial CSS : Kumpulan Efek Hover underline/garis bawah.

Untuk membuat efek ini membutuhkan browser yang sudah mendukung CSS3, dan membuatnya kita memanfaatkan akan memanfaatkan kode :before atau :after dan sedikit pemanfaatan :hover agar animasi muncul saat cursor menyentuh.
Membuat efek underline dengan css ini kita tidak menggunakan text-decoration: underline; tetapi menggunakan border-bottom dari yang terkecil (1px) sampai (3px) atau lebih, ini agar ketebalan underline/garis bawah di css terlihat lebih nyata.

Sekarang, untuk lebih memahami konsep efek underline di CSS3 mari kita praktekan dan memahami contoh underline/garis bawah di css. Coba kita lihat contoh yang sering dipakai web dan blog untuk penggunaan underline.

Info : Contoh efek arahkan ke subjudul.

1. Underline - Standar

Coba arahkan cursor ke sub-judul diatas. Maka akan keluar underline yang sering dipakai oleh web dan blog yang mana pemakaian underline di css menggunakan text-decoration: underline; dan itu cukup standar menurut saya, karena kurang "wah" dimata pengunjung. Untuk membuat underline seperti di subjudul ini bisa menggunakan seperti kode diibawah ini.

.standar-u {
  text-decoration: none;
}
.standar-u:hover {
  text-decoration: underline;
  transition: 0.5s ease;
}

Dan lihatlah sekarang setiap cursor diarahkan ke link maka akan muncul underline/garis bawah. Tapi, agak kaku dan kurang menarik, maka kita akan membuatnya lebih menarik lagi dengan animasi di css3.

2. Underline - Top to Bottom

Pada animasi underline - top to bottom di css ini konsepnya adalah "ketebalan border", yang mana ketebalan border ini kita buat dari kecil terlebih dahulu baru kebagian yang terbesar. Konsepnya adalah border-bottom: 0px solid transparent menjadi border-bottom: 3px solid #000 dan sedikit penambahan transition agar terlihat lebih smooth. Untuk lebih memahami silahkan simak kode dibawah ini.

.animasi-top-bottom {
  text-decoration: none;
  display: inline-block;
  border-bottom: 0px solid transparent;
  width: 210px;
  transition: 0.5s ease;
  height: 25px;
}
.animasi-top-bottom:hover {
  border-bottom: 3px solid #16A085;
}

Kode ini cukup simple dan tidak terlalu rumit, namun karena kita membuat efek underline di css3 dengan cara kita mungkin kita harus berbeda dari kebanyakan orang.
pemulabelajar.com memang beda!=D. Kembali ke pembahasan awal untuk membuat efek yang lebih smooth lagi kita gunakan cara kita.
Cara yang akan kita gunakan adalah menggunakan after yang mana after inilah yang dibuat animasi. Lihat contoh dibawah ini.

.animasi-top-bottom {
  display: inline-block;
}
.animasi-top-bottom:after {
  content: '';
  display: block;
  height: 0;
  width: 100%;
  background: transparent;
  transition: height .5s ease, background-color .5s ease;
}
.animasi-top-bottom:hover:after {
  height: 3px;
  background: #16A085;
}

3. Underline - Bottom to Top

Konsep untuk kode ini sama dengan Top to Botoom, hanya saja kita membuat underline/garis bawah posisinya menjadi absolute sehingga peletakkannya kita dapat atur, dalam hal ini kita mengaturnya menjadi dibawah (bottom: 0). Dan, untuk lebih memahaminya kita lihat contoh dibawah ini.

.animasi-bottom-top {
  display: inline-block;
  position: relative;
}
.animasi-bottom-top:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0px;
  width: 100%;
  background: transparent;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.animasi-bottom-top:hover:after {
  height: 3px;
  background: #16A085;
}

Kelihatan berbeda dari animasi nomor 2, dan sedikit "awesome" kelihatannya. Selanjutnya kita buat animasi underline/garis bawah yang arahnya kita buat dari kiri ke kanan.

4. Underline - Left to Right

Underline/garis bawah yang dimulai dari kiri dan menuju kekanan kita memerlukan transition pada css kita, supaya pergerakan arah dari kiri ke kanan lebih terlihat "smooth". Coba seandainya kita tidak menggunakan transition ini, mungkin agak "kaku" pergerakannya.

Untuk membuat efek ini adalah kita membuat panjang dari underline adalah 0, setelah di hover kita buat lebarnya menjadi 100%. Untuk meletakkan underline kita memerlukan posisi yang absolute pada after class yang kita buat.

.animasi-left-right {
  display: inline-block;
}
.animasi-left-right:after {
  content: '';
  display: block;
  height: 3px;
  width: 0;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
.animasi-left-right:hover:after {
  width: 100%;
  background: #16A085;
}

Masalah pada animasi ini adalah class akan menjadi sejajar dengan text karena adanya display: inline-block pada class tersebut. Tetapi tidak apa-apa karena kita dapat menggunakan <br />.

5. Underline - Right to Left

Konsep untuk hal ini sama dengan point nomor 4. Kita hanya menambahkan peletakkan posisi yang menjadi dari sebelah kanan (right: 0). Mari kita lihat contoh dibawah ini.

.animasi-right-left {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.animasi-right-left:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}

.animasi-right-left:hover:after {
  width: 100%;
  background: #16A085;
}

6. Underline - Middle Out

Efek ini muncul dari tengah dan membuat garis bawah dengan css3 yang membuat efeknya menjadi "menarik", ini efek underline terbaik menurut saya pribadi. Langsung saja lihat kode dibawah ini.

.animasi-middle {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
.animasi-middle:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
.animasi-middle:hover:after {
  width: 100%;
  background: #16A085;
}

7. Underline - Slide In, Slide Off

Pada efek ini, jika cursor diarah maka underline akan muncul dari kiri setelah cursor dijauhkan maka underline akan diakhiri ke kanan. efek ini juga sangat menarik untuk diletakkan pada web dan blog kawan. Silahkan salin kode dibawah ini.

.animasi-slide-in {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
.animasi-slide-in:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  transition: width 0s ease, background .5s ease;
}
.animasi-slide-in:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #16A085;
  transition: width .5s ease;
}
.animasi-slide-in:hover:before {
  width: 100%;
  background: #16A085;
  transition: width .5s ease;
}
.animasi-slide-in:hover:after {
  width: 100%;
  background: transparent;
  transition: all 0s ease;
}

8. Underline - Slide In, Slide Off (Inverse)

Efek ini bisa dilihat pada sub judul diatas, yang mana penggunaannya sama dengan point nomor 7, hanya saja kita membuatnya hilang jika cursor diarahkan dan muncul ketika cursor dijauhkan dengan kata lain kebalikan dari point nomor 7. Contoh kode bisa dilihat dibawah ini.

.animasi-slide-in-inverse {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.animasi-slide-in-inverse:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transition: width 0s ease;
}
.animasi-slide-in-inverse:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: #16A085;
    transition: width .5s ease;
}
.animasi-slide-in-inverse:hover:before {
    width: 0%;
    background: #16A085;
    transition: width .5s ease;
}
.animasi-slide-in-inverse:hover:after {
    width: 0%;
    background: transparent;
    transition: width 0s ease;
}

9. Underline - Special Kawan

Untuk point sembilan saya bisa diisi oleh kawan yang mungkin punya efek underline di css3 yang lebih bagus dari efek underline css3 di atas.

Terima kasih telah membaca sebuah artikel Kumpulan Efek Membuat Underline. Baca lebih banyak lagi artikel tentang CSS atau tentang HTML pada website tutorial pemula ini. Dan jangan lupa untuk berbagi yang ada dibawah artikel ini. Jika masih ada kesulitan tentang penerapan CSS pada website bisa menggunakan komentar dibawah. Salam.