V tomto screencastu se zaměříme na čáry pod odkazy v horní části zápatí. Trochu jsme narazili na to, abychom zjistili, které věci by měly mít relativní umístění a co by nemělo, abychom mohli dostat tyto řádky do takové velikosti a polohy, jaké musí být.
Zbarvíme čáru přechodem pomocí jednoduchého pozadí Compass @mixin.
Rozhodli jsme se, že dělat úroveň blokování odkazů je dost divné, protože díky tomu je klikatelná oblast příliš velká. Vím, že je to divná věc, protože obvykle je dobré dělat klikatelné oblasti velkými, ale v tomto případě můžete kliknout tak daleko od textu odkazu, je to prostě divné.
Je třeba poznamenat, že v zápatí se nakonec pseudo prvky, které vytvořily řádky, změnily na rozpětí. Je to proto, že jsem jim chtěl přidat malou animaci při přechodu myší a ve většině prohlížečů momentálně nemůžete používat přechody nebo animace na pseudo elementech.
„Laserová“ animace skončila následovně (některé vnoření vynecháno):
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); ) ) )