Web sitelerinin görsel açıdan etkileyici ve kullanıcı dostu olması önemli. Bu amaçla CSS’nin sunduğu animasyon teknikleri, sayfalarınıza dinamizm katmanın iyi bir yoludur. Bu yazıda, metinlerin ya da linklerin altına fareyle gelindiğinde beliren ve kaybolan zarif bir çizgi animasyonunu nasıl oluşturacağınızı adım adım öğreneceksiniz. Hem basit hem de etkili bu yöntemle, web projelerinize şık bir dokunuş katabilirsiniz.

HTML Yapısı

İlk adımda, animasyonu uygulayacağımız temel HTML yapısını hazırlayalım. Bunun için "index.html" adında bir dosya oluşturup aşağıdaki kodu ekleyebilirsiniz:

Tailwind CSS v4 ile Özel Renkler (Config Dosyasını Düzenlemeden)

Programlama 

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Altı Çizgi Animasyonu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p class="text">Lorem ipsum dolor sit</p>
</body>
</html>

Bu kodda, bir paragraf ("p") etiketiyle örnek bir metin oluşturduk ve bu metne "text" adında bir class atadık. Daha sonra CSS dosyamızı bağladık.

CSS ile Çizgi Animasyonu

HTML yapımız hazır olduğuna göre, animasyonu oluşturmak için CSS kodlarını yazalım. Bunun için "style.css" adında bir dosya oluşturun ve aşağıdaki kodları ekleyin:

WordPress Admin Panelinde Menü Gizleme ve Düzenleme Yöntemleri

Programlama 

body {
    font-family: monospace;
    font-size: 1.25rem;
    background-color: #111;
    color: #fff;
    padding: 1rem;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
p.text {
    display: inline-block;
    padding-bottom: 0.25rem;
    position: relative;
}
p.text::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: rgb(0, 255, 0);
    transition: width 0.25s ease-out;
}
p.text:hover::before {
    width: 100%;
}

Bu kodlarla, metnin altına fareyle gelindiğinde beliren bir çizgi animasyonu oluşturduk. CSS kodlarımız birkaç temel adımdan oluşuyor:

  • Body Stilleri: Sayfanın genel görünümünü düzenledik. Monospace font, koyu arka plan ve metni ortalamak için flex özellikleri kullandık.
  • p.text: Metnimize "inline-block" özelliği verdik ki çizgi sadece metnin genişliği kadar uzansın. Ayrıca "position: relative" ile metni bir referans noktası haline getirdik.
  • p.text::before: Bu pseudo-element, metnin altına görünmez bir çizgi yerleştiriyor. Başlangıçta "width: 0" ile çizgi gizli kalıyor ve "transition" ile genişlik değişimi animasyonlu hale geliyor.
  • p.text:hover::before: Fare metnin üzerine geldiğinde çizginin genişliği "100%" oluyor ve bu geçiş 0.25 saniyede yumuşak bir şekilde gerçekleşiyor.

Linklerde Kullanımı

Bu animasyonu sadece metinlerde değil, linklerde de uygulayabilirsiniz. Örneğin, bir navigasyon bağlantısı için şu HTML kodunu kullanabilirsiniz:

WordPress Admin Şifremi Unuttum! PhpMyAdmin ile Kolayca Şifre Sıfırlama

Programlama 

<a href="#" class="text">Ana Sayfa</a>

Aynı CSS kodları bu "a" etiketi için de geçerli olacak ve fareyle üzerine gelindiğinde linkin altında çizgi animasyonu görünecektir. Bu, özellikle menülerde şık bir etki yaratır.

Sonuç

Birkaç satır HTML ve CSS koduyla, web sitenize modern ve dikkat çekici bir altı çizgi animasyonu eklediniz. Bu tür küçük ama etkili görsel detaylar, kullanıcıların sitenizde daha keyifli vakit geçirmesini sağlar ve profesyonel bir izlenim bırakır.