2015/04/30

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.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.