U ovom screencast-u fokusiramo se na linije ispod veza u gornjem dijelu podnožja. Nekako se posrćemo oko odgonetavanja stvari koje bi trebale imati relativno pozicioniranje, a što ne, kako bismo mogli dobiti ove linije veličine i položaja koji trebaju biti.
Liniju obojavamo gradijentom pomoću jednostavne pozadine Compass @mixin.
Odlučili smo da je stvaranje bloka veza prilično čudno, jer to čini područje na koje je moguće kliknuti preveliko. Znam da je to čudno reći, jer obično je stvaranje područja na koje je moguće kliknuti dobro, ali u ovom slučaju možete kliknuti toliko daleko od teksta veze, da je to jednostavno čudno.
Treba napomenuti da su na kraju u podnožju pseudo elementi koji su stvorili linije promijenjeni u raspone. To je zato što sam im htio dodati malo animacije prilikom zadržavanja pokazivača i trenutno ne možete koristiti prijelaze ili animacije na pseudo elementima u većini preglednika.
"Laserska" animacija završila je kako slijedi (neka gniježđenja su izostavljena):
a ( color: white; /* etc */ > span ( position: absolute; pointer-events: none; bottom: 0; width: 100%; height: 1px; margin-bottom: 3px; left: 0; @include background(linear-gradient(left, white, white 5%, rgba(white, 0.25) 5%, rgba(white, 0))); background-position: 100% 0; @include background-size(200% 0); @include transition(background 0s linear); ) &:hover, &:focus ( color: $orange; > span ( background-position: -100% 0; @include transition(background 0.4s); ) ) )