Links
![How Keyboard Navigation Works in a CSS Game](https://dxj7eshgz03ln.cloudfront.net/production/link/image/968578/original_ratio_extra_large_de0d996e-d21d-4bf6-8b4f-820204acc7a6.jpg)
How Keyboard Navigation Works in a CSS Game
Many pure CSS games you will see around are playable mostly with a mouse. They rely on interactive elements such as checkboxes and pseudo-classes like
:hover
,:active
,:checked
, and so on. But with recent CSS features, a keyboard control game (beyond tabbing) is also doable using CSS!
The Magic of Clip Path
clip-path
is often used for trimming a DOM node into specific shapes, like triangles. But what if I told you that it's also great for animations? In this article, we'll dive intoclip-path
and explore some of the cool things you can do with it. Once you read it, you'll start seeing this CSS property being used everywhere.
CSS Surprise Manga Lines
When a manga or anime character is surprised, lines focus on and highlight their face. Is it possible to create a similar effect with HTML and CSS?
Zoom, zoom, and zoom
there is wide support for three different types of ‘zoom’ – available both to site visitors and (to some extent) CSS authors: Page zoom roughly matches behavior of the CSS zoom property; Scale factor (or ‘pinch zoom’) roughly matching the behavior of the CSS scale transform; Text-only zoom, similar to changing default font size on a site that uses entirely relative text sizing with rem units.
Don’t Use Web•dev for Accessibility Info
Web.dev is a site from Google Chrome developer relations that provides content both to evangelize Chrome and to more broadly support the web platform. However, the accessibility content in many of its articles and posts is problematic. I worry that devs treat guidance in its articles as gospel, even when it is demonstrably wrong or harmful.
Videos
![Utility First CSS Isn’t Inline Styles](https://dxj7eshgz03ln.cloudfront.net/production/link/image/968577/original_ratio_extra_large_45b75b64-f33c-4bc5-9dc2-0358f11140ed.jpg)
Utility First CSS Isn’t Inline Styles
No, utility classes are not the same as inline styles. If you've ever played with utility for CSS, this equivalency probably sounds familiar to you. Maybe you think that I'm wrong. Maybe you think that I'm completely mistaken. or maybe you have no idea what I'm talking about.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.