Improving :focus #Shorts

Key Takeaways

[Music] all right you know what focus is right here I am tabbing through these look how boring this is we can totally do better spice things up we're going to Target Focus visible so it's just keyboard users and we're going to make the outline offset transition from zero to well 0.5 rim and here's the result already I guess it's a little better as you focus into it it kind of scales up that's okay but what else we got here we can take that outline offset and only do it when they're not active so if they're not pressing on it with the keyboard and now when you press we get a little Dynamic interaction there but we've added an animation we better put that behind but first reduce motion no preference that's a piece of cake but while we're here let's make it a little bit more Dynamic so that the transition out like when you're pressing is a little different than when it's initially focused so we can have this really Dynamic field where pressing is nice and snappy but the focus is kind of floaty that's it for this gooey snippet we'll see on the next one take care y'all bye