#073: CSSing the Footer, Teil 3

In diesem Screencast konzentrieren wir uns auf die Linien unterhalb der Links im oberen Teil des Footers. Wir stolpern etwas herum und überlegen, welche Elemente relativ positioniert werden sollten und welche nicht, damit wir diese Linien in der benötigten Größe und Position erhalten.

Wir färben die Linie mit einem Farbverlauf mithilfe des einfachen Compass @mixin für den Hintergrund.

Wir entscheiden, dass es eher seltsam ist, die Links als Blockelemente zu gestalten, da dies den klickbaren Bereich zu groß macht. Ich weiß, das ist eine merkwürdige Aussage, da es normalerweise gut ist, klickbare Bereiche zu vergrößern, aber in diesem Fall kann man so weit vom Linktext entfernt klicken, dass es einfach seltsam ist.

Es sei angemerkt, dass im Footer schließlich die Pseudoelemente, die die Linien erzeugten, zu ``-Elementen geändert wurden. Dies liegt daran, dass ich ihnen beim Hovern eine kleine Animation hinzufügen wollte und man derzeit in den meisten Browsern keine Übergänge oder Animationen auf Pseudoelementen verwenden kann.

Die "Laser"-Animation sah wie folgt aus (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);
    }
  }
}