Beauty

Stwórz animowany efekt podkreślenia linku za pomocą CSS

Z pewnością nie raz już zobaczyłeś na wielu stronach, czy blogach takie cudo, że po najechaniu myszką na odnośnik, płynnie pojawiała się i znikała taka fajna dolna kreseczka. Sprawiało to wrażenie, jakby płynęła. Od dziś, możesz mieć u siebie nawet tysiąc takich kreseczek :) W tym poradniku zamieszczam gotowy kod CSS, za którego pomocą wyczarujesz niesamowity efekt przesuwającego się podkreślenia linku, po najechaniu na niego kursorem. Najważniejsze deklaracje posiadają opis - podpowiedź bezpośrednio w kodzie, dzięki czemu będziesz mógł dostosować wygląd linii według własnego uznania.

Demo - najedź kursorem na link poniżej



<a href="http://www.blokotek.pl">Jakiś dłuższy Link na Blokotku</a>

a, a:visited {
  text-decoration: none;
  position: relative;
  color: #069; /* kolor czcionki */
}
a:after, a:visited:after {
  content: '';
  height: 3px; /* grubość podkreślenia */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  background: #069; /* kolor podkreślenia */
  transition: 0.2s; /* szybkość animacji podkreślenia */
}
a:hover:after, a:visited:hover:after {
  width: 100%;
}

A jak dodać pływającą kreskę na Bloggerze?

Po prostu w menu Szablon => Edytuj kod HTML, tuż nad:
]]></b:skin>
Wklej kod CSS z ramki na powyżej i Zapisz szablon.
Spowoduje to animację wszystkich linków na blogu.

Instagram