Trong video hướng dẫn này, chúng tôi tập trung vào các dòng bên dưới các liên kết ở phần trên cùng của chân trang. Chúng tôi khá vất vả trong việc tìm ra những thứ nào nên có vị trí tương đối và những thứ nào không nên để chúng tôi có thể có được kích thước và vị trí của những đường này.
Chúng tôi tô màu đường thẳng bằng gradient bằng cách sử dụng nền đơn giản Compass @mixin.
Chúng tôi quyết định rằng việc tạo khối liên kết ở mức khá kỳ lạ, vì nó làm cho vùng có thể nhấp quá lớn. Tôi biết đó là một điều kỳ lạ khi nói vì thông thường làm cho các khu vực có thể nhấp được lớn là tốt, nhưng trong trường hợp này bạn có thể nhấp quá xa văn bản liên kết thì điều đó thật kỳ lạ.
Cần lưu ý rằng cuối cùng trong phần footer, các phần tử giả tạo ra các dòng được thay đổi thành nhịp. Điều này là do tôi muốn thêm một chút hoạt ảnh vào chúng khi di chuột và bạn không thể sử dụng chuyển tiếp hoặc hoạt ảnh trên các phần tử giả trong hầu hết các trình duyệt vào lúc này.
Hoạt ảnh "laser" kết thúc như sau (một số lồng ghép bị bỏ qua):
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); ) ) )