CSS ile Linklere Düz Çizgi Yerine Hareketli Dalgalı Çizgi

CSS ile Linklere Düz Çizgi Yerine Hareketli Dalgalı Çizgi

Linkler varsayılan olarak altı düz çizgili elemanlardır web sitelerinde. Kullanıcının ilgisini çekmesi yönünde kullandığımız zamanlar da olur bu altı çizgili linkleri. Mesela linki varsayılan olarak altı çizgisiz yapıp, kullanıcı üzerine geldiğinde altı çizgili olmasını sağlayabiliyoruz. Peki kullanıcının daha çok ilgisini çekmek istesek?

Bu makalede linklerdeki düz çizgi yerine, dalgalı ve hareketli, animasyonlu bir alt çizgi oluşturmaya çalışalım. Fare imleci, linkin üzerine geldiğinde sıradanlıktan uzak, hareketli bir alt çizgi ile karşılaşıyor.

Css Hareketli Animasyonlu Alt Cizgi

Önce standart link kodunu, ardından stil dosyasaına CSS kodlarını yazalım.

<a href="#">Sanagrafi</a>
&gt;a {
  border-bottom: 1px solid #000;
  color: #000;
  padding-bottom: .25em;
  text-decoration: none;
}

Linkler için HTML ve CSS kodlarını yazdıktan sonra animasyonlu alt çizgiye geçebiliriz. Hareketli ve dalgalı bir alt çizgi yapmak için SVG dosyasından faydalanıyoruz. SVG’yi CSS’te background-image etiketi ile birlikte kullanıyoruz. Fare imleci linkin üzerine geldiğinde alt çizginin dalgalı olmasını ve sonsuz bir döngüyle kayıyormuş gibi görünmesini ise aşağıdaki kod ile sağlıyoruz.

a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 20%;
  border-bottom: 0;
  padding-bottom: .3em;
  text-decoration: none;
}

Popular Tutorials

Sıfırdan Alan Adı (Domain) ve Hosting Satın Alma Rehberi

Bu derste hep birlikte domain ve hosting satın alıyoruz. Bu ikisini satın…

Google Fontlarını WOFF Formatında İndirerek Sunucuda Kullanmak

Site hızı optimizasyonu ve performans testlerinde daha yüksek sonuç alabilmek ya da…

Hareketli Alt Çizgi Efekti (HTML ve CSS)

HTML ve CSS ile menüde, linklerde ya da diğer metinlerde kullanmak için,…

Web Sitesine Dark Mode / Gece Modu Nasıl Eklenir?

Karanlık modlar göz yormayan görünümüyle hayatımızın her alanına giriyor. YouTube, Whatsapp, Android,…

Tüm Tarayıcılarla Uyumlu Smooth Scrolling

Ekrana sığmayan uzun web sayfalarında, anchor linklere tıklandığında Smooth Scrolling denilen yumuşak…

Google Web Fontları Nasıl Kullanılır?

Google web fontları nasıl kullanılır? Google web yazı karakterlerini sitemize nasıl ekleriz? Google Web fontlarının Türkçe desteği var mı?