Image Cut-Out Effects using CSS or SVG

 Ahmad Shadeed shows us how to do image cut-out effects, using either CSS or SVG. Handy to — for example — show a group of avatars. See the Pen Seen Avatars – SVG Mask by Ahmad Shadeed (@shadeed) on CodePen. Looking at the CSS variant: I was familiar with -webkit-mask-image and that you could combine …

Continue reading “Image Cut-Out Effects using CSS or SVG”

Read Post →

RenderingNG — Ready for the next generation of web content

In the post on TablesNG, we looked at some of the features this under-the-hood rewrite for tables in Chromium provides us. But that’s only the tip of the iceberg, as the Chromium team have also been working on a whole new rendering engine architecture, named RenderingNG. In 2021, we will largely complete the process of …

Continue reading “RenderingNG — Ready for the next generation of web content”

Read Post →

Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property

 A side-effect when showing scrollbars on the web is that the layout of the content might change depending on the type of scrollbar. The `scrollbar-gutter` CSS property aims to give us developers more control over that.

Read Post →

Dev Roulette Live — Conversations with Frontend Developers

I don’t know exactly how she does it, but apart from all the work on her side projects, newsletter, family, etc. Stephanie Eckles also hosts a show named “Dev Roulette Live” Dev Roulette is a conversation between Stephanie Eckles and up to two mystery guests about topics that are particularly important to front-end developers including: …

Continue reading “Dev Roulette Live — Conversations with Frontend Developers”

Read Post →

Detecting media query support in CSS and JavaScript

Kilian Valkhof recently needed to check if prefers-reduced-data was supported by the browser or not For this, I couldn’t use just @media (prefers-reduced-data: no-preference) because that would be false if either there was no support (since the browser wouldn’t understand the media query) or if it was supported but the user wanted to preserve data. …

Continue reading “Detecting media query support in CSS and JavaScript”

Read Post →

“Inline Parameters” extension for VSCode

Inspired by JetBrains’ “Inline Parameter Name Hints” feature, Liam Hammett created an extension for VSCode with the same functionality: This feature can give you additional context when reading your code, making it easier to understand what different function parameters refer to by showing the parameter’s name inline. No longer do you have to be confused …

Continue reading ““Inline Parameters” extension for VSCode”

Read Post →

A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline

 🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. This post details an older version of the syntax and has not been updated to reflect these changes. Do note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since writing this. Please …

Continue reading “A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline“

Read Post →

Natural Shadows in CSS with inlined SVG filters

Dissecting a React Component built by Jamie Kyle, Stefan Judis provides us with an easy to use CSS class that adds a “Natural Shadow” to any element. He does this by inlining the SVG <filter> in a CSS filter. 💁‍♂️ You can think of this “Natural Shadow” like a “Ambient Lighting” (Ambilight) option on a …

Continue reading “Natural Shadows in CSS with inlined SVG filters”

Read Post →