In diesem Screencast konzentrieren wir uns auf die Linien unter den Links im oberen Teil der Fußzeile. Wir stolpern ein bisschen darüber, welche Dinge relativ positioniert sein sollten und welche nicht, damit wir diesen Linien die Größe und Position geben können, die sie haben müssen.
Wir färben die Linie mit einem Farbverlauf unter Verwendung des einfachen Hintergrundkompasses @mixin.
Wir sind der Meinung, dass es ziemlich seltsam ist, die Links auf Blockebene zu setzen, da dadurch der anklickbare Bereich zu groß wird. Ich weiß, dass es seltsam ist, das zu sagen, weil es normalerweise gut ist, anklickbare Bereiche groß zu machen, aber in diesem Fall können Sie so weit vom Linktext entfernt klicken, dass es einfach seltsam ist.
Es sollte beachtet werden, dass letztendlich in der Fußzeile die Pseudoelemente, die die Linien erzeugt haben, in Bereiche geändert wurden. Dies liegt daran, dass ich ihnen beim Hover eine kleine Animation hinzufügen wollte und Sie in den meisten Browsern derzeit keine Übergänge oder Animationen für Pseudoelemente verwenden können.
Die "Laser" -Animation endete wie folgt (einige Verschachtelungen weggelassen):
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); ) ) )