Howdy CSS fam,

This past week I released the updated design for my portfolio site. In the process, I learned a lot about clip-path. As I tweeted, the modern web absolutely does not have to be all squares and rectangles. See the roundup for a few links about clip-path.

Last week I asked for stories about your Style Stage experiences, and Halvor William Sanden (@8yard) shared about creating his stylesheet "Sysfonts".

And Shannon Crabill who contributed Vaporware let me know: "I've flexed CSS and accessibility skills that I've forgotten I'd had."

Haven't submitted yet? Check out my tips for a successful submission.

Tag me on Twitter or DM me to share your story too!

There are now 28 styles available - go check them out!

---

Recently Added Styles

• Crawling Chaos By Adrian Bece

• Jet Set By Cory Birdsong

---

CSS Tip: Handling "hover intent"

As tweeted earlier this week, you can prevent accidental trigger of a hover-related animation by adding a small delay. This is the modern equivalent of detecting "hover-intent" (which used to be a popular jQuery plugin) - as in, normal scrolls over the element won't cause a flash of triggering the animation, the user must be more intentional.

If you are defining a transition as a single line, the "delay" is the last property. Test to find your optimal length, and be aware that the delay applies in both directions: transition in and out.

To see this demonstrated, you can review the my "Featured Work" cards, and also review how this is useful for dropdown menus in this ModernCSS tutorial.

---

Weekly Link Roundup

Here’s some links you may have missed:

• I released episode #20 of the Modern CSS series: "Custom Select Styles with Pure CSS"
• Annie Liew compliled "CSS/SVG Art & Animation: A Curated Collection of Useful Resources & Tutorials"
• Stephanie Walter released resources and demos from her talk "Enhancing User Experience With CSS Animations"

And the clip-path resources:

• Colby Fayock created an egghead video explaining the syntax along with a demo
• Clippy is an online tool that allows you to select a shape and adjust the points while dynamically generating the clip-path CSS

Two great intro to accessibility sites were released this past week and are both great references for learning or refreshing your knowledge of essential accessibility features.

• A11y Coffee
• Solid Start

Speaking of accessibility, :focus states are something I double-check compliance for and here are three resources to help you create them:

• First up, the WCAG 2.2 draft was released and includes updates to :focus recommendations
• Eric Bailey had a terrific talk about :focus states
• Michelle Barker covered "Accessibly Hiding Focus Outlines"

---

Keep it .class-y,
Steph • @5t3ph