Detect System Theme Preference Change Using JavaScript
24.10.2022
JavaScript and CSS allow users to detect the user theme preference with CSS’ prefers-color-scheme media query. It’s standard these days to use that preference to show the dark or light theme on a given website. But what if the user changes their preference while using your app?...
Fancy Image Decorations: Masks and Advanced Hover Effects
21.10.2022
Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time to digest Part 1 because we will continue working with a lot of gradients …
Fancy Image Decorations: Masks and Advanced Hover Effects...
Instant Articles, Proprietary Syndication, and a Web Built on User Fidelity Preferences
20.10.2022
I love it when there’s a sense of synergy in the blogosphere. First, I caught Nick Heer’s coverage of Meta ending support for Instant Articles, its proprietary format for stripped-down performant news articles. He also compares it to the similar …
Instant Articles, Proprietary...
Collective #734
20.10.2022
Lucide * Container Queries: Style Queries * Agreper * InvokeAI * Ultra * html.to.design
Responsive Animations for Every Screen Size and Device
20.10.2022
Before I career jumped into development, I did a bunch of motion graphics work in After Effects. But even with that background, I still found animating on the web pretty baffling.
Video graphics are designed within a specific ratio and …
Responsive Animations for Every Screen Size and Device...
How to Use Storage in Web Extensions
20.10.2022
Working on a web extension is an interesting experience — you get to taste web while working with special extension APIs. One such API is storage — the web extension flavor of persistence. Let’s explore how you can use session and local storage within your Manifest V3...
How to Make a Folder “Slit” Effect With CSS
19.10.2022
When you put something — say a regular sheet of paper — in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of thing with a wallet and credit …
How to Make a Folder “Slit” Effect With CSS originally published on CSS-Tricks, which is part of...
UI Interactions & Animations Roundup #26
19.10.2022
Get a fresh dose of animation inspiration with this new set of creative Dribbble shots
Manuel Matuzovic: max() Trickery
18.10.2022
By way of a post by Manuel Matuzović which is by way of a demo by Temani Afif.
.wrapper {
margin-inline: max(0px, ((100% - 64rem) / 2));
}
You’d be doing yourself a favor to read Manuel’s breakdown of …
Manuel Matuzovic: max() Trickery originally published on CSS-Tricks, which...
Pure CSS Bezier Curve Motion Paths
17.10.2022
Are you a Bezier curve lover like I am?
CodePen Embed Fallback
Besides being elegant, Bezier curves have nice mathematical properties due to their definition and construction. No wonder they are widely used in so many areas:
As a
…
Pure CSS Bezier Curve Motion Paths originally published...
Behind the CSScenes, October 2022
14.10.2022
Well, hey, welcome back to Behind the CSScenes! These posts are like little check-ins we’re doing each month to give you a peek behind what we’re doing here at CSS-Tricks, as well as a chance for us to pause …
Behind the CSScenes, October 2022 originally published on CSS-Tricks, which...
Fancy Image Decorations: Single Element Magic
14.10.2022
As the title says, we are going to decorate images! There’s a bunch of other articles out there that talk about this, but what we’re covering here is quite a bit different because it’s more of a challenge. The challenge? …
Fancy Image Decorations: Single Element Magic originally published...