In questo screencast ci concentriamo sulle linee sotto i collegamenti nella parte superiore del piè di pagina. Inciampiamo per capire quali cose dovrebbero avere un posizionamento relativo e cosa no, in modo da poter ottenere queste linee della dimensione e della posizione che devono essere.
Coloriamo la linea con un gradiente usando il semplice sfondo Compass @mixin.
Decidiamo che rendere il livello di blocco dei link è piuttosto strano, perché rende l'area cliccabile troppo grande. So che è una cosa strana da dire perché di solito rendere grandi le aree cliccabili è buono, ma in questo caso puoi fare clic così lontano dal testo del link è semplicemente strano.
Va notato che alla fine nel piè di pagina gli pseudo elementi che hanno creato le linee sono stati modificati in campate. Questo perché volevo aggiungere una piccola animazione al passaggio del mouse e al momento non è possibile utilizzare transizioni o animazioni su pseudo elementi nella maggior parte dei browser.
L'animazione "laser" è risultata come segue (alcuni annidamenti omessi):
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); ) ) )