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.

Önce standart link kodunu, ardından stil dosyasaına CSS kodlarını yazalım.
Sanagrafi
>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
Bu derste hep birlikte domain ve hosting satın alıyoruz. Bu ikisini satın…
Site hızı optimizasyonu ve performans testlerinde daha yüksek sonuç alabilmek ya da…
HTML ve CSS ile menüde, linklerde ya da diğer metinlerde kullanmak için,…
Karanlık modlar göz yormayan görünümüyle hayatımızın her alanına giriyor. YouTube, Whatsapp, Android,…
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 yazı karakterlerini sitemize nasıl ekleriz? Google Web fontlarının Türkçe desteği var mı?