Php Dersleri

Güncel Eğitimler

Css ile Link Üzerine gelince Şekil Verme

Kategori: Css 12 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
"AndreiVek" Site içi Seo E-kitabı Gönderisine Yorum Yaptı
"StewartIrres" Kullanılabilecek Php Editörler Gönderisine Yorum Yaptı
"Ozan SONAR" Php ile Link Kısaltma Yapımı Gönderisine Yorum Yaptı