Nice little demo by Adam Argyle in which he makes the focus ring pop by changing its outline-offset (with a transition) on focus. The code also correctly respects the user’s prefers-reduced-motion preference.
Engaging Focus Rings
Tag Archives: css
CSS Text Morphing
Similar to this 2019 demo by CodePen user Valgo (which uses SVG to create the effect), Amit Sheen created this wonderful CSS-only Word Morphing demo: The key parts to this demo are the filter on the wrapping .morphing element combined with the animated blurring on the .word elements themselves. You need both to get the …
The new responsive: Web design in a component-driven world
In this session from Google I/O 2021, Una Kravets talks about “the new responsive”, short for being responsive to the user, container, and form-factor (text-version available via link below): The web community is entering into a new era of responsive design and shifting our perspectives on what it means. With user preference queries, container queries, …
Continue reading “The new responsive: Web design in a component-driven world”
Dissecting the CSS font shorthand
Mateusz Hadryś dissects the font shorthand The font shorthand allows you to set almost all font-related properties with a single line of CSS. Full Text Styling With a Single Line of CSS →
What’s New In CSS?
At the excellent Web Directions Hover ’21, Adam Argyle opened with a rad presentation covering all what’s new and upcoming for CSS. From risky and may never be in your browser, to stable and just released yesterday; follow Adam as he strolls through proposals, specs and supporting tools for all the this new CSS hotness. …
Learn CSS! — A free course that guides you through CSS fundamentals
During Google I/O, Learn CSS! — An evergreen CSS course and reference to level up your web styling expertise — was launched. Broken down in 23 chapters, you’ll learn the fundamentals of CSS. You’ll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you’ll learn …
Continue reading “Learn CSS! — A free course that guides you through CSS fundamentals”
Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds
Davor Suljic created a fork of my Smooth Scrolling Sticky ScrollSpy Navigation that — instead of using IntersectionObserver — uses some background magic to highlight the active navigation items. The result is a “Pure CSS” implementation: If you turn on an outline on one of the content sections it becomes clear how it exactly works: …
Continue reading “Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds”
Dynamic CSS Masks with Custom Properties and GSAP
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect. GSAP not required to achieve the core effect, but it does polish the whole thing … #sweatingthedetails Dynamic CSS Masks with Custom Properties and GSAP →
CSS Full-Bleed Scroll-Snapping Carousel with Centered Content and Visible Overflow
Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()
Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview: Relative color syntax, e.g. .bg-primary-100 { background-color: hsl(from var(–theme-primary) h s 90%); } .bg-primary-200 { background-color: hsl(from var(–theme-primary) h s 80%); } .bg-primary-300 { background-color: hsl(from var(–theme-primary) h s 70%); } … CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(–theme-primary) vs white, …