V tomto obrazovom vysielaní sa zameriavame na čiary pod odkazmi v hornej časti päty. Nejako narazíme na to, aby sme zistili, ktoré veci by mali mať relatívne umiestnenie a čo by nie, aby sme týmto riadkom dostali veľkosť a polohu, v akej musia byť.
Linku zafarbíme gradientom pomocou jednoduchého pozadia Compass @mixin.
Rozhodli sme sa, že nastavenie úrovne blokovania odkazov je dosť zvláštne, pretože vďaka tomu je klikateľná oblasť príliš veľká. Viem, že je to čudná vec, pretože zvyčajne je dobré robiť klikateľné oblasti veľkými, ale v takom prípade môžete kliknúť tak ďaleko od textu odkazu, je to čudné.
Je potrebné poznamenať, že nakoniec v päte pseudo prvky, ktoré vytvorili riadky, sa zmenili na rozpätie. Je to preto, že som im chcel pri prechode myšou pridať malú animáciu a vo väčšine prehľadávačov momentálne nemôžete používať prechody alebo animácie na pseudoprvkoch.
„Laserová“ animácia skončila takto (niektoré vnorenia boli vynechané):
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); ) ) )