In this screencast we focus on the lines underneath the the links in the top part of the footer. We kinda stumble around figuring out which things should have relative positioning and what shouldn’t so we can get these lines the size and position they need to be. <\/p>\n
We colorize the line with a gradient using the simple background Compass @mixin.<\/p>\n
We decide that making the links block level is rather weird, because it makes the clickable area too big. I know that’s a weird thing to say because usually making clickable areas big is good, but in this case you can click so far away from the link text it’s just weird.<\/p>\n
It should be noted<\/strong> that ultimately in the footer the pseudo elements that created the lines where changed to spans. This is because I wanted to add a little animation to them on hover and you can’t use transitions or animations on pseudo elements in most browsers at the moment. <\/p>\n The “laser” animation ended up as follows (some nesting omitted):<\/p>\n In this screencast we focus on the lines underneath the the links in the top part of the footer. We kinda stumble around figuring out which things should have relative positioning and what shouldn’t so we can get these lines the size and position they need to be. We colorize the line with a gradient […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":18010,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":21048,"url":"https:\/\/css-tricks.com\/video-screencasts\/123-if-it-moves-when-you-click-make-something-stick\/","url_meta":{"origin":18466,"position":0},"title":"#123: If it Moves When You Click, Make Something Stick","date":"April 9, 2013","format":false,"excerpt":"The buttons on CSS-Tricks, at the time of this video, have a faux 3D effect. They look like a blue brick you are looking at from above at an angle. When you press down on them, their :active state is triggered (like all links\/buttons\/inputs) and the CSS moves them down\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":336866,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/w\/where\/","url_meta":{"origin":18466,"position":1},"title":":where","date":"March 23, 2021","format":false,"excerpt":"The :where() pseudo selector in CSS is functionally identical to the :is() psuedo selector in that it takes a comma-separated list of selectors to match against, except that where :is() takes the most specific among them as the specificity of that whole part, the specificity of :where() is always zero\u2026","rel":"","context":"In \":where\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18446,"url":"https:\/\/css-tricks.com\/lodge\/v10\/069-photoshopping-the-footer-part-4\/","url_meta":{"origin":18466,"position":2},"title":"#069: Photoshopping the Footer, Part 4","date":"September 20, 2012","format":false,"excerpt":"This is the last of the Photoshop work we'll do specifically about the footer before we jump over into actually building it. In this screencast we essentially put in the list of links that surround the \"Photostar\". Nothing too fancy right? We decide that you know what people understand and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18616,"url":"https:\/\/css-tricks.com\/lodge\/v10\/106-building-snippets-area-part-3-html-css\/","url_meta":{"origin":18466,"position":3},"title":"#106: Building Snippets Area, Part 3 (HTML & CSS)","date":"October 1, 2012","format":false,"excerpt":"We're pretty close to being done building the homepage of the Snippets area of the site. Right away, we start tweaking things and getting more stuff into shape. We have a weird experience where the absolutely positioned pseudo element didn't respond to a negative left margin but was fine with\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3381,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/make-entire-div-clickable\/","url_meta":{"origin":18466,"position":4},"title":"Make Entire Div Clickable","date":"August 11, 2009","format":false,"excerpt":"Update November 2020: I think the best possible technique for this is Method 4 in this article. The a {\r\n color: white;\r\n \/* etc *\/\r\n > span {\r\n position: absolute;\r\n pointer-events: none;\r\n bottom: 0;\r\n width: 100%;\r\n height: 1px;\r\n margin-bottom: 3px;\r\n left: 0;\r\n @include background(linear-gradient(left, white, white 5%, rgba(white, 0.25) 5%, rgba(white, 0)));\r\n background-position: 100% 0;\r\n @include background-size(200% 0);\r\n @include transition(background 0s linear);\r\n }\r\n &:hover, &:focus {\r\n color: $orange;\r\n > span {\r\n background-position: -100% 0;\r\n @include transition(background 0.4s);\r\n }\r\n }\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"