Bu ekran video kaydında, altbilginin üst kısmındaki bağlantıların altındaki satırlara odaklanıyoruz. Hangi şeylerin göreceli olarak konumlandırılması gerektiğini ve neyin olmaması gerektiğini bulmaya çalışıyoruz, böylece bu çizgileri olmaları gereken boyut ve konuma getirebiliriz.
Compass @mixin basit arka planını kullanarak çizgiyi bir gradyanla renklendiriyoruz.
Tıklanabilir alanı çok büyük hale getirdiği için bağlantıları blok seviyesinde yapmanın oldukça tuhaf olduğuna karar verdik. Bunun söylenmesi garip bir şey olduğunu biliyorum çünkü genellikle tıklanabilir alanları büyük yapmak iyidir, ancak bu durumda bağlantı metninden o kadar uzağa tıklayabilirsiniz ki bu çok garip.
Sonunda altbilgide, genişleyen satırları oluşturan sözde elemanların olduğu unutulmamalıdır . Bunun nedeni, fareyle üzerine gelindiğinde onlara küçük bir animasyon eklemek istemem ve şu anda çoğu tarayıcıda sözde öğelerde geçişleri veya animasyonları kullanamamanızdır.
"Lazer" animasyonu aşağıdaki gibi sona erdi (bazı yuvalama atlandı):
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); ) ) )