Menu

CSS

Add a CSS Lens Flare to Photos for a Bright Touch

April 12th, 2022

I’m a big fan of movies by J.J. Abrams. I enjoy their tight plots, quippy dialog, and of course: anamorphic lens flares. Filmmakers like Abrams use lens flare to add a dash of ‘homemade’ realism to their movies, a technique we can easily recreate in tools like Photoshop, then add to our sites as raster…

How to Make CSS Slanted Containers

February 9th, 2022

I was updating my portfolio and wanted to use the forward-slash (/) as a visual element for the site’s main layout. I hadn’t attempted to create a slanted container in CSS before, but it seemed like it would be easy at first glance. As I began digging into it more, however, there were actually a…

Honor prefers-color-scheme in the CSS Paint API with Custom Properties

December 27th, 2021

One of the coolest things I’ve been messing with in the last couple years is the CSS Paint API. I love it. I did a talk on it, and made a little gallery of my own paint worklets. The other cool thing is the prefers-color-scheme media query and how you can use it to adapt…

When is it “Right” to Reach for contain and will-change in CSS?

November 26th, 2021

I’ve got some blind spots in CSS-related performance things. One example is the will-change property. It’s a good name. You’re telling the browser some particular property (or the scroll-position or content) uh, will, change: .el { will-change: opacity; } .el.additional-hard-to-know-state { opacity: 0; } But is that important to do? I don’t know. The point,…

CSS-ing Candy Ghost Buttons

October 31st, 2021

Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have come up with and remake them with clean and compact code… I came across these candy ghost buttons! They seemed like the perfect choice…

Exploring the CSS Paint API: Rounding Shapes

October 22nd, 2021

Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue!. Exploring the CSS Paint API series: Part 1: Image Fragmentation Effect Part 2: Blob Animation Part 3: Polygon Border Part 4: Rounding Shapes (you are here!) Here’s…

@supports selector()

October 19th, 2021

I didn’t realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() function, we can test for selector support as well. It looks like this: @supports selector(:nth-child(1 of .foo)) { } You just drop the…

CSS Modules (The Native Ones)

August 2nd, 2021

They are actually called “CSS Module Scripts” and are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS. Native CSS Modules are a part of ES Modules (a lot like JSON modules we recently covered): // Regular…

:focus-visible in WebKit

July 9th, 2021

This is a nice update from Manuel Rego Casasnovas. Igalia has this idea to sort of crowd-source important web platform features that need to get worked on (that’s the sort of work they do). They call it Open Prioritization. The “winner” of that (the one with the most-pledged dollars) is what they’ll do. That turned…

CSS for Web Vitals

July 1st, 2021

The marketing for Core Web Vitals (CWV) has been a massive success. I guess that’s what happens when the world’s dominant search engine tells people that something’s going to be an SEO factor. Ya know what language can play a huge role in those CWV scores? I’ll wait five minutes for you to think of…