Php Dersleri

Güncel Eğitimler

Css ile Link Üzerine gelince Şekil Verme

Kategori: Css 10 Ay önce yazıldı 0 Yorum

Merhaba arkadaşlar , Birçok sitede gördüğümüz css olayından bahsetmek istiyorum.Bu olay yazı veya link üzerine gelince altında yavaşça ilerleyen çizginin nasıl yapıldığını hakkında bilgi vericem.Öncelikle bana bu konuda yardımcı olan ve herzaman CSS konusunda destek çıkan @YasinSoftaoğlu kardeşime teşekkür etmek isterim :)

Yapmamız gereken öncelikle bir link oluşturmak.

<a href="link">Anasayfa</a>

gördüğünüz üzere link'e link isimli bir class atadık.Şimdi bu linkimize position:relative; değerini vermemiz gerekiyor.

 

.link 
{
  text-decoration:none;
  position:relative;
}

Sıra geldi linkimizin altına çizgimizi oluşturmaya linkimizden sonra gözükmesini istediğimiz için before kullanıcaz.

.link::before 
{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0px;
  height:3px;
  background:#000;
  opacity:0;
  -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

Evet burada linkimizin altında suanda bir çizgi var ancak opacity 0 oldugu için ve width:0%; oldugu için göremiyoruz amacımız link üzerine gelince bunu göstermek bunun içim ise :hover:before kullanıcaz.

.link:hover:before
{
  opacity:1;
  width:100%;
}

evet artık linkimizin üstüne gelince altından çizgi çıkıcak :)

Ben canlı canlı görmek isterim diyen arkadaşlar için ise ; 

YORUMLAR
MERT BULDUR

Merhaba 17 Eylül 1995 Köyceğiz / Muğla Dogumluyum.Yaklaşık 10 yıldır Web Teknolojileri üzerinde Yazılım yapmaktayım.Herdaim kendimi geliştiriyorum.

SON YORUMLAR
"Ozan SONAR" Php ile Link Kısaltma Yapımı Gönderisine Yorum Yaptı
"Mahmut kaya" Meta Tag Listesi ve Açıklamaları Gönderisine Yorum Yaptı
"Ahmet" Sql il ilçe Listesi Gönderisine Yorum Yaptı