This nav broke my brain (coding speed run)

This nav broke my brain (coding speed run) 🔗 **Source:** [This nav broke my brain (coding speed run)](https://www.youtube.com/watch?v=S98uVU2CAl0) > [!note]+ Document Notes > tags: [css-anchor, css-gradients, navigation, frontend-dev] > author: Kevin Powell > source: YouTube > reference: https://www.youtube.com/watch?v=S98uVU2CAl0 > date created: 2024-12-20 13:30 > > # 🏷️ Title: This nav broke my brain (coding speed run) >  ## 🧰 Action Inbox - [H1] Experiment with CSS anchor positioning for complex animations — 00:00 #css-anchor - [H2] Practice gradient layering techniques for depth effects — 15:30 #css-gradients - [H3] Build fallback solutions when anchor names conflict — 22:45 #problem-solving ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Original Navigation Design](https://twitter.com/raul_drunk) - [CSS Anchor Positioning Spec](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) ## 📝 Summary - Kevin Powell attempts to recreate a complex animated navigation in under 26 minutes using only CSS - The nav features hover-following bubbles, active state indicators, and layered gradient effects - Key challenge involves CSS anchor positioning conflicts when elements need multiple anchor references - Demonstrates real-time problem-solving under pressure, including z-index debugging and layout restructuring - Successfully implements the design using CSS anchor positioning, gradients, and pseudo-elements ## 📖 Main Content This speedrun video showcases the implementation of a sophisticated navigation component that features animated bubble indicators that follow user interactions. The design, originally created by Raul Drunk, presents several CSS challenges including dynamic anchor positioning, complex gradient layering, and stacking context management. The core challenge revolves around CSS anchor positioning, where elements need to dynamically change their anchor reference based on user interaction. When a user hovers over navigation items, a bubble indicator needs to smoothly transition to follow the cursor, while maintaining a separate indicator for the currently active page. The implementation reveals common frontend development challenges: z-index stacking conflicts, layout restructuring needs, and the complexity of managing multiple pseudo-elements with different positioning contexts. The solution involves creative use of wrapper elements and pseudo-elements to avoid anchor name conflicts. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/S98uVU2CAl0?t=0) — [H1] Challenge Setup and Base HTML - Key idea: Recreating complex navigation with hover-following bubbles in 26 minutes - Evidence: "nav with four links inside of it. That's it. Some base styling just to get it black" #### ⏱️ [02:30](https://youtu.be/S98uVU2CAl0?t=150) — [H2] Initial Navigation Styling - Key idea: Setting up container with fit-content width and basic link styling - Evidence: "width is going to be fit content... margin zero auto and still be as wide as it needs" #### ⏱️ [04:45](https://youtu.be/S98uVU2CAl0?t=285) — [H2] CSS Anchor Implementation Strategy - Key idea: Using explicit bubble elements instead of pseudo-elements for anchor positioning - Evidence: "I'm going to add a bubble with the class of active. And then I'm going to have a second bubble" #### ⏱️ [06:20](https://youtu.be/S98uVU2CAl0?t=380) — [H3] Anchor Name Assignment - Key idea: Assigning anchor names to links for bubble positioning - Evidence: "anchor name is d-active... position anchor active" #### ⏱️ [08:15](https://youtu.be/S98uVU2CAl0?t=495) — [H2] Active State Bubble Animation - Key idea: Creating smooth transitions between anchor positions - Evidence: "now when I click a link, the class of active is changing itself... it's just following itself around" #### ⏱️ [10:30](https://youtu.be/S98uVU2CAl0?t=630) — [H3] Hover State Implementation - Key idea: Second bubble for hover effects anchored to navigation by default - Evidence: "hover one is going to be background gray... when you hover an element, we want that item to be anchored" #### ⏱️ [12:45](https://youtu.be/S98uVU2CAl0?t=765) — [H1] Layout Restructuring Challenge - Key idea: Adding wrapper elements to solve spacing and positioning conflicts - Evidence: "I think it'd be easier to add another element here... Let's just add a second element" #### ⏱️ [15:30](https://youtu.be/S98uVU2CAl0?t=930) — [H2] Gradient Background Implementation - Key idea: Creating layered gradient effects for depth and visual interest - Evidence: "background is going to be a linear gradient... from black to gray" #### ⏱️ [18:20](https://youtu.be/S98uVU2CAl0?t=1100) — [H3] Z-index Debugging Session - Key idea: Solving stacking context issues with multiple layered elements - Evidence: "All of my problems are z-index. How does zindex even work?" #### ⏱️ [20:45](https://youtu.be/S98uVU2CAl0?t=1245) — [H2] Box Shadow and Inset Effects - Key idea: Adding depth with inset shadows and positioned pseudo-elements - Evidence: "box shadow inset zero 10px zero black... That's way too much. RGBA 255" #### ⏱️ [22:45](https://youtu.be/S98uVU2CAl0?t=1365) — [H1] Anchor Conflict Resolution - Key idea: Solving the problem of elements needing multiple anchor references - Evidence: "You cannot give the same link two anchor names, but you can make another element wrap around that" #### ⏱️ [24:30](https://youtu.be/S98uVU2CAl0?t=1470) — [H3] Pseudo-element Wrapper Solution - Key idea: Using ::before elements as secondary anchor points - Evidence: "what we'll do is we'll just say opacity 0.2 just so we can see it... when you hover a link, grab the before element" #### ⏱️ [26:00](https://youtu.be/S98uVU2CAl0?t=1560) — [H2] Alternative Approach Explanation - Key idea: Retrospective analysis of potential alternative solutions - Evidence: "You cannot give the same link two anchor names, but you can position two different elements relative to the same anchor" ## 📚 References - [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) - [CSS Gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) - [CSS Stacking Context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) ## 🗣️ Paraphrase - Kevin attempts to recreate a complex animated navigation design featuring bubble indicators that follow user hover and active states - The implementation uses CSS anchor positioning to dynamically move bubble elements relative to navigation links - Multiple challenges emerge including z-index conflicts, anchor name limitations, and layout spacing issues that require creative solutions ## 📰 Newsletter 🎯 **CSS Anchor Positioning in Action** Kevin Powell tackles a complex navigation recreation using cutting-edge CSS anchor positioning. The design features animated bubble indicators that smoothly follow user interactions - a perfect example of modern CSS capabilities replacing JavaScript animations. **Key takeaways for your projects:** - CSS anchor positioning enables dynamic element relationships without JavaScript - Complex designs often require iterative problem-solving and layout restructuring - Gradient layering and box shadows create sophisticated visual depth - Wrapper elements can solve positioning conflicts when direct solutions fail **Try it yourself:** Experiment with anchor positioning for tooltip placement, dropdown alignment, or animated indicators in your WordPress theme customizations. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Create anchor positioning tutorial series for modern CSS techniques - Develop interactive demos showcasing CSS animations vs JavaScript alternatives - Document browser support considerations for anchor positioning #### WordPress - Core: Evaluate anchor positioning for admin interface improvements - Themes: Create theme patterns using advanced CSS positioning techniques - Documentation: Add modern CSS examples to theme development guides ## 🧪 Hypotheses - CSS anchor positioning can replace many JavaScript-based positioning libraries - Gradient layering techniques create more performant visual effects than images - Wrapper element patterns solve most CSS positioning conflicts - Real-time debugging reveals common CSS mental models and misconceptions ### 📊 Methodology - Performance testing: Compare CSS anchor animations vs JavaScript solutions - Browser compatibility analysis across anchor positioning implementations - User experience testing of complex navigation patterns ### ❓ Questions - How does CSS anchor positioning performance compare to JavaScript alternatives at scale? - What are the accessibility implications of complex animated navigation patterns? - Can anchor positioning techniques improve WordPress admin interface usability? ### 🔮 Future Research - Explore anchor positioning integration with CSS container queries - Investigate accessibility patterns for animated navigation components - Document performance characteristics of complex gradient layering ### 💡 Implications - Practice: CSS anchor positioning reduces JavaScript dependency for UI positioning - Policy: Browser support considerations may limit immediate adoption in production - Education: Advanced CSS techniques require hands-on debugging experience - Performance: Pure CSS solutions often outperform JavaScript alternatives ### 🧠 Learning Styles Assessment Reading level estimate: 8th Grade #### 👀 Visual learners - Present: Real-time code changes, visual design comparisons, gradient effects - Improve: Step-by-step diagrams of anchor positioning concepts #### 🔊 Aural learners - Present: Verbal explanation throughout coding process - Improve: Audio-only summary of key CSS concepts #### 🗣️ Verbal learners - Present: Technical terminology explained in context, analogies for complex concepts - Improve: Glossary of CSS anchor positioning terms #### 🧩 Kinesthetic learners - Present: Live coding demonstration, trial-and-error debugging - Improve: Interactive CodePen examples for hands-on practice #### 🧠 Logical learners - Present: Problem-solving progression, cause-and-effect debugging - Improve: Flowchart of decision points during implementation #### 🧑‍🤝‍🧑 Social learners - Present: Reference to original designer's work, community collaboration - Improve: Challenge format for group coding exercises #### 🧘‍♀️ Solitary learners - Present: Self-contained challenge format, independent problem-solving - Improve: Reflection prompts on alternative solution approaches #### 🌿 Naturalistic learners - Present: Organic problem-solving approach, real-world constraints - Improve: Connection to broader web development ecosystem patterns ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Standard navigation structure with semantic HTML - Improve: ARIA labels for animated state changes, focus management #### Keyboard navigation - Present: Basic link keyboard accessibility maintained - Improve: Focus indicators that work with animated backgrounds #### Contrast and readability - Present: High contrast text on gradient backgrounds - Improve: Ensure gradient combinations meet WCAG standards #### Text resizing and reflow - Present: Responsive design with fit-content sizing - Improve: Test anchor positioning behavior at 200% zoom #### Media and captions - Present: No audio description needed for visual coding - Improve: Code change descriptions for screen reader users ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal design pattern applicable across cultures - Improve: Consider right-to-left layout implications for anchor positioning #### Inclusive language - Present: Technical terms explained clearly without jargon - Improve: Plain language alternatives for complex CSS concepts #### Neurodiversity support - Present: Step-by-step problem-solving approach - Improve: Content warnings for rapid visual changes, pause points #### Representation - Present: Focus on technical content over personal representation - Improve: Acknowledge diverse problem-solving approaches ### ✅ Logical Validity #### Strong reasoning - Deductive strength: CSS anchor positioning enables dynamic element relationships (demonstrated throughout) - Inductive strength: Complex designs require iterative solutions (shown through debugging process) - Causal reasoning: Layout changes affect stacking context (z-index debugging sequence) #### Fallacies - Appeal to authority: "Props to our rule for actually designing this thing" - minor, doesn't affect technical validity - False dichotomy: Presents wrapper elements as only solution without fully exploring alternatives #### Tone of voice - Overall tone: Enthusiastic and educational with authentic problem-solving stress ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on accusers present - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Authentic frustration with technical challenges, genuine excitement about CSS capabilities ## 🎯 Conclusion This speedrun demonstrates the power and complexity of modern CSS anchor positioning while revealing the iterative nature of frontend development problem-solving. The successful recreation shows that CSS can handle sophisticated UI patterns traditionally requiring JavaScript, though with careful consideration of browser support and accessibility implications. The real-time debugging process provides valuable insights into CSS mental models and the importance of flexible problem-solving approaches. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] CSS anchor positioning enables JavaScript-free dynamic layouts > [!quote] [This nav broke my brain (coding speed run)](https://youtu.be/S98uVU2CAl0) by [[Kevin Powell]] via [[YouTube]]. Published 2024. Accessed 2024-12-20. > "CSS anchor positioning where elements need to dynamically change their anchor reference based on user interaction." Modern CSS eliminates need for JavaScript positioning libraries in many use cases. [view highlight](https://youtu.be/S98uVU2CAl0?t=285#H1) #xref #articleseed ID:rw_css_anchor_dynamic ### [H2] Complex CSS requires iterative debugging and restructuring > [!quote] [This nav broke my brain (coding speed run)](https://youtu.be/S98uVU2CAl0) > "Sometimes in life, things seem awful and you think it's end of the world, but then just chill for a minute." Real-world CSS implementation involves continuous problem-solving and architectural decisions. [view highlight](https://youtu.be/S98uVU2CAl0?t=765#H2) #xref ID:rw_css_debugging_mindset --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Anchor name conflicts require wrapper element solutions - Applies when single element needs multiple anchor references - Demonstrated at 22:45 with pseudo-element wrapper technique - Links: [[CSS-Anchor-Positioning]] [[CSS-Layout-Patterns]] #### [Z2] Gradient layering creates depth without performance overhead - More efficient than image-based depth effects - Shown throughout implementation with multiple gradient layers - Links: [[CSS-Performance]] [[Visual-Design-Patterns]] --- ### ✏️ Fleeting Queue Purpose: Capture quick actions for Fleeting notes. - [F1] Test anchor positioning browser support in WordPress admin — --- ## Full Transcript [00:00] Speedrun CSS edition. Are you ready? I'm [00:02] going to recreate this navigation from [00:04] Raul Drunk. He posted this on Twitter [00:05] the other day and it's got a couple neat [00:07] things in it. You can hover over top of [00:10] your item and the little bubble will [00:12] follow it around. The currently active [00:14] item will bubble over to it and then [00:16] it's got a really a lot of really neat [00:18] gradients and subtleties to it. So, he [00:20] said I could recreate it. I think I can [00:21] do it in entirely in CSS and I think I [00:24] can do it in 26 minutes and 32 seconds. [00:27] Ready and go. So, I have some base HTML [00:29] here, which is up top. I have his a [00:32] screenshot from his video. And then I've [00:34] got a nav with four links inside of it. [00:36] That's it. Some base styling just to get [00:38] it black and whatever. But that's all we [00:40] have. So, what I'm going to do, I've [00:41] turned off my co-pilot autocomplete in [00:44] here. So, I'm going in by myself. So, [00:46] I'm going to say width is going to be [00:48] fit content. Um, and then the border is [00:52] 1px solid gray. And that will do it. So [00:55] the width of fifth content will still [00:58] maintain its blockiness um without [01:00] having to be inline and that allows me [01:02] to use margin zero auto and still be as [01:04] wide as it needs. Okay, so that's pretty [01:07] good. Let's grab the links inside of [01:10] that. So we'll say a padding probably 20 [01:13] px 40px. Uh we'll say background [01:18] let's give it a background white. Okay. [01:20] Display inline block 20. Probably a [01:25] little bit more here. 50. All right. [01:27] That looks pretty good. And then the [01:29] color is going to be white. Text [01:32] decoration none. All right, that's close [01:34] enough for me for now. Um, what I want [01:37] to do is put a border radius on this [01:39] thing. Something crazy. Okay, so what I [01:42] want to do now is work on the actual [01:44] like these little following things. And [01:47] I think we can do that with CSS anchor [01:49] because the idea is that we're going to [01:51] have two elements here that sort of [01:53] follow it around. And you can do this [01:55] with before and after, but I'm just [01:57] going to add explicit elements. So I'm [01:58] going to add a bubble with the class of [02:02] active. And then I'm going to have a [02:04] second bubble with the class of hover as [02:07] well. Now these bubbles are going to [02:10] follow around either the active link or [02:13] the hovered link. And if nothing is [02:15] being hovered, it's going to just [02:16] stretch to fit the actual nav itself. So [02:20] what we want to do is we'll take our [02:22] anchor link. Let's take the anchor link [02:24] that is has a class of active and we'll [02:29] say anchor name is d-active. [02:34] Then we'll go down here and we'll start [02:36] styling those bubbles. So we'll say [02:38] bubble and we want to position the [02:40] bubble based off of the active link. So [02:44] we say position anchor active and then [02:48] we say top is going to be based on the [02:50] anchor top and then right bottom left. [02:53] Can get fancy with this. Right, bottom [02:56] left. Um I think anchor positioning [02:59] doesn't work unless you're absolute or [03:00] fixed. And there we go. So now when I [03:04] click a link, the class of active is [03:07] changing itself. And then this active [03:10] hover here is simply just changing its [03:13] top right, bottom left values. And then [03:15] if we put a transition on this, um, [03:18] you're not supposed to do all, but this [03:20] is a speed contest, so whatever. Then it [03:23] should There we go. [03:25] Doop. It's just following itself around. [03:29] So, what we want to do now is let's put [03:32] a var gray on that. And then we'll send [03:37] it back a little bit. There we go. So, [03:39] now it's going behind all the elements. [03:41] That's the active one. No, you know what [03:44] we'll do is we'll give it white. And [03:47] then the active link is going to have a [03:50] color of black. There we go. [03:54] Okay. So, that's the first one. Now the [03:57] second one is going to be the what is it [04:00] the hover one. So actually what we'll do [04:03] is we'll say when the bubble has a class [04:06] of active then we give it a position [04:09] anchor. Okay. But then when we have a [04:12] class of hover by default we're going to [04:16] anchor it based on the nav. So we'll go [04:18] back up to our nav here and we'll give [04:21] this a position anchor of nav. And then [04:25] we'll change it when it's hovered. Why [04:27] is it not stretching to fit? Is it our [04:29] fit content? Oh, there we go. If I click [04:31] on this, the anchor is not clicking [04:33] through to it. If I click on this active [04:35] one, it actually clicks through to the [04:37] thing. Oh, it's not position anchor. [04:40] It's anchor name. [04:43] There we go. All right. So, the hover [04:46] one is going to be background gray. [04:49] There we go. So, now it's on there. But [04:52] here's the trick. When [04:55] you hover an element, we want that item [05:00] to be anchored on nav. Oh, is this this [05:03] is going to be tricky. Okay, so we'll [05:04] say when a link is hovered, can we give [05:07] it a anchor name of hover here? But then [05:11] we also will probably have to unset it. [05:14] Oh, we don't. Ah, we don't have to care. [05:16] It just it takes over. I guess two [05:18] things have the same name. We'll follow [05:19] it around. [05:23] That needs to go behind the other one. [05:27] So maybe we'll Z-index that one. -2. [05:34] Let's work on getting the styling for [05:39] all of this stuff dialed in. Now, what [05:40] do I want to do? Let's go to our nav [05:43] here. And if we add some padding of [05:46] 20px. Oh, that's not what we want. We [05:49] want to push everything in a little bit. [05:53] So, we have our nav here. Oh, the links [05:56] are because I inline block them. I [05:58] inline block them. Watch this. If I make [06:00] these block, [06:02] that doesn't fix it. No. Oh, it it does. [06:06] It does. Okay. So, we want our links to [06:09] be block. But then we want our nav to be [06:13] display flex. There we go. Oh, but this [06:18] is a problem when it's snapping to the [06:21] nav. [06:23] Shoot. We don't want it to be that big. [06:25] New plan. Let's go back to what we had. [06:28] We're going to do a border of 10px solid [06:32] transparent to push everything off. No, [06:35] that's not going to work. Oh boy. Oh [06:37] boy. This is a part where I would [06:39] normally just pause and think of a [06:41] reasonable solution to this, but I'm [06:44] panicking cuz I told you I get it done [06:45] in 26 minutes. and 36 seconds. We could [06:48] offset the anchor amount by however much [06:53] we need to to match that up. I just [06:55] think it'd be easier to add another [06:56] element here. I think maybe that's the [06:58] move. Let's just add a second element [07:01] instead of trying to do all these [07:02] tricks. So, let's remove that. Then [07:05] we'll go here and we'll call it a nav [07:08] wrap. And then we'll go up and give this [07:12] a nav wrap. We'll put the border on this [07:15] sucker here. Okay. And then width is [07:19] also going to be fit content. And then [07:21] we'll move the margin zero up and the [07:26] border radius up. Okay. Beautiful, [07:29] beautiful, beautiful. Now, let's go back [07:30] down to our bubbles here. Oh, no. Oh, [07:34] no. No, no. I think what we can do now [07:36] is we go to our nav and say margin like [07:38] 20 px. Yes. And that pushes everything [07:42] off that amount. And then we go down to [07:45] our bubbles and give them a border [07:48] radius of I don't know, something crazy [07:51] again just to get it. Baby, it's [07:55] working. So, let's look at his video [07:58] again for a little bit. Zoom. [08:01] So, zoom zoom. [08:04] Oh. Oh. Oh, that's going to be a problem [08:08] when you're hovering. I think that's a [08:10] problem for the feature. When you hover [08:11] one, the anchor is going to be both. [08:14] And is that a problem? That probably is, [08:16] but whatever. We'll do that later. Oh, I [08:19] like this a lot. Let's focus on [08:21] something more fun and let's try to get [08:23] the actual look and feel of this done [08:25] cuz if you look at it, there is a lot of [08:28] subtleties to all of this. Let's work [08:31] our out in. So, we'll go to our nav wrap [08:36] and the background is going to be a [08:38] linear gradient. And the linear gradient [08:41] is going to be far black to far [08:47] gray. How do you even do a linear [08:49] gradient? I'm so used to just it [08:51] autocompleting me. I turned it off. Um, [08:54] CSS gradient.io [08:56] degrees color. [09:02] gray. Okay, we don't want 90°. That gray [09:05] needs to be tweaked a little bit. See, [09:08] even work. You know, that's another [09:10] thing about these videos stressing out. [09:11] I don't have time to think about what [09:12] the stacking index is. So, what we want [09:15] the stacking index of this to be, we [09:18] want [09:20] to pop a position relative on this. [09:24] Okay. And then on our links, we want a [09:27] z-index of let's give it 10. And then [09:31] our bubble. Oh no. [09:37] Oh no. I'm so used to nesting these [09:39] things. The problem is that we want [09:40] these bubbles to go over top of the nav [09:43] wrap background but then in between this [09:47] one right here. However, these are [09:49] siblings. So how are we going to do that [09:52] with with z-index? Right. That's a [09:54] tricky problem to solve. Oh, we can just [09:58] move these inside the nav wrap. Okay, [10:02] now that those are inside the nav wrap, [10:04] they should just stack on top by [10:07] default. And what if we put them before [10:10] the nav. So, we just have source order. [10:13] All right, we're back in business. We're [10:15] back in business. That wasn't so bad. [10:17] Sometimes in life, things seem awful and [10:19] you think it's end of the world, but [10:20] then that you just just chill for a [10:22] minute. We got what, 10 minutes left to [10:24] finish this. We're good. We got that. [10:26] Let's do the nav. Should have a box [10:29] shadow. Oh no, it's this one. Let's do [10:33] box shadow inset zero 10px [10:38] zero [10:40] black. Oo, baby. Baby. That's not nearly [10:44] as good as what they had, but it's spend [10:46] my whole day fussing with these box [10:49] shadows. Good enough. Good enough. Okay, [10:50] now the outside. [10:53] Oh boy, [10:54] this background probably should go on [10:57] the nav. Oh no. Oh no. I want this like [11:00] cool background. If I look at it, it's [11:03] also a gradient. So we can probably [11:08] stick an after element and let's do [11:12] content display block position absolute [11:16] top zero right zero bottom zero. Oh, we [11:20] can just do inset negative 5px [11:24] background red. There we go. Zindex -1. [11:28] If we do inset zero, that just covers [11:32] the entire thing. We want it to go out. [11:36] So, insert -10. Why does it just go [11:39] down? T [11:41] R E L. Why isn't it going up? All right, [11:44] we don't have time to debug. We don't [11:47] have time to debug. So, what we'll do is [11:49] we'll pop a transform [11:51] translate y -5px. [11:56] What the hell? Oh, there's a comma. [11:58] Okay. Wait, why does it keep getting cut [12:01] off? Oh, it's cuz this image is in the [12:03] way. Oh my gosh. So, there was nothing [12:06] wrong with my implementation. It's just [12:08] that the image was in the way. So, [12:09] should we pop like a z-index on that? [12:12] All of my problems are z-index. [12:15] How does zindex even work? Does anybody [12:17] know how Zindex works? [12:21] All right. You know what? Take this [12:22] transform off. Let's just go isolation [12:26] isolate. No, that's not what we want. [12:27] That creates a new stacking context. Can [12:30] we just do this? We go to the target [12:32] position relative index negative one. [12:35] Yes. Okay. So, what we're going to do is [12:38] this is not even a problem with my nav. [12:41] This is just the fact that I'm trying to [12:42] show you the solution. But let's grab [12:44] the target, pop a pause real on there, [12:47] and put a z-index negative one on there. [12:49] Okay. What were we doing? Oh, yeah. [12:52] We're working on the background after. [12:54] So, border radius 500 px. Okay, that [13:00] inset is a bit too much. So, five. Okay. [13:03] And then the background is going to be a [13:07] much lighter linear gradient. So, let's [13:09] grab that linear gradient from before. [13:11] Just pop that on here. Get rid of the [13:13] red, but then this linear gradient is [13:16] really going to be like gray. It's [13:19] opposite. Okay, that bottom one looks [13:22] good. Obviously, the top one not very [13:25] good. Was it the after element? This [13:28] gray. Wait, can we cheat and just use [13:30] the color picker? Ploop. Oh, that didn't [13:33] work. 3F 3F 3F. Oh, I have a freaking [13:36] variable with that one in var dash gray. [13:40] Pretty good. Okay, that this padding is [13:42] too much. Let's go back to our nav here. [13:45] This is probably just a 10 pixel. Maybe [13:47] even less. Like a 7 67. [13:51] >> How do you do, fellow kids? [13:52] >> That's the right amount. Okay. [13:58] Um, next, let's get these pills working. [14:02] I don't want to do any more Z-index [14:04] problems, but I'm going to have to, [14:07] right? Let's battle their dragons. [14:12] Oh, that wasn't so bad. Sometimes your [14:14] dragons in life are not so bad. Just [14:17] battle your dragons. Look them straight [14:19] on. Don't keep thinking I'll do it [14:20] later. Um, okay. So, the bubble that is [14:25] the [14:26] what what is it? This one. The hover [14:28] bubble is also another linear gradient. [14:31] This whole thing is linear gradients, [14:34] which these designers were got way [14:36] better eye than I do. But let's try to [14:39] match it as as well as we can. Oh, that [14:42] looks awesome. That's the same gradient [14:44] as the outline. [14:47] Okay. Um, and then there is a box shadow [14:51] inset X zero. Y 5px blur 3px white boom. [14:58] That's way too much. RGBA 255. You know [15:02] what we'll do? You know what we'll do? [15:04] We'll use our dev tools to just match [15:05] it. So go to our hover bubble and let's [15:10] just do Mr. Slidy slide. [15:14] Okay, it needs to be up a little bit [15:15] more. My blur value is needs to be more, [15:20] but the walk needs to be less. Ah, [15:23] that's it. That's it. That's it. [15:27] I'm so good at this.Ooploop [15:33] projects. Okay, let's do the other one. [15:35] Um, the project background is going to [15:38] be a very light gray to also a very [15:42] light gray. So, what we'll do here is [15:44] we'll grab the active bubble. It's going [15:47] to be like that [15:50] to You know what I could also do? I [15:52] could just use Mr. Picker here. Boom. [15:54] That looks pretty good to me. And then [15:56] the box shadow is also going to be the [15:59] same amount, I bet, but it's going to be [16:02] pure white. [16:05] That looks good. Okay. Um the text, [16:08] there's no no drop shadow on that. [16:11] Beautiful. Ah, my buttons don't look as [16:13] good as this. Okay. The inset. Oh no. [16:16] There's a problem right there. When you [16:18] hover over top of one of these and also [16:20] it just jumps. So that's our big problem [16:22] right now. Let's focus on that. So when [16:24] you click on one of these elements and [16:26] when you hover over the active one, the [16:29] anchor is changing. So the anchor needs [16:32] to be both. How do we do that? Let's [16:34] look at our code here. Okay, so the [16:37] anchor is the nav by default. When you [16:41] hover over the currently active item is [16:45] anchor active. When you hover over a [16:49] link, we change the reference of the [16:51] anchor from the nav to this anchor link. [16:55] However, that overwrites the anchor name [16:58] of active. What if we wrap every single [17:01] link in like a before or after and then [17:05] use that as the anchor link? Oh yeah. [17:08] Okay. So, what we did here is we created [17:10] a before pseudo element that overlaps [17:13] every single one. And really what we'll [17:16] do is we'll just say opacity 0.2 just so [17:18] we can see it. Okay. So, you can see [17:20] they're overlapping. So, what I'm [17:22] thinking is when you hover a link, grab [17:26] the before element and make that the [17:30] anchor nav. yes. [17:33] Oh, it worked. Okay, so we can't have [17:36] the same thing being two anchors at [17:39] once, but you can make another element [17:42] wrap around that and use that as the [17:45] anchor. Beautiful. West future here. I [17:47] just had a moment of clarity on this. [17:49] You cannot give the same link two anchor [17:52] names, but you can position two [17:55] different elements relative to the same [17:57] anchor. So another approach I could have [17:59] taken here is not to wrap everyone in a [18:01] in an after element. I could have simply [18:04] just changed the fact that this bubble [18:07] of hover just changed the position [18:09] anchor name to active. I would have had [18:12] to do some weird like has like if the [18:15] nav has an active link that is currently [18:18] hovering then select the bubble and [18:20] change the position anchor but that [18:22] would have been another approach to it [18:24] rather than creating a secondary [18:25] element. I think we're done here. You [18:27] can comment below. Am I ruining your [18:29] baby here? Uh-oh. It's totally gone now. [18:33] What did I do? That looks like now. [18:36] Good. You know what? I'm going to call [18:37] it. That was a really fun one. The CSS [18:40] anchor stuff is so cool that you can [18:41] just follow around any element and just [18:44] snap its inset values or top right, [18:47] bottom left to any other element. Props [18:49] to our rule for actually designing this [18:51] thing. This is so cool. I know people [18:53] don't like it when designers do really [18:55] hard stuff cuz like how am I going to [18:56] implement it? But I love it because they [18:59] are always coming up with neat ideas [19:01] that I totally would not have thought of [19:02] and like it's so fun to figure out how [19:04] to make it work with CSS. So what do you [19:07] think? Was that a decent implementation? [19:09] How did I do time-wise? Leave in the [19:11] comments.