Share This
Get in Touch
Scroll Down
//Blog

Wanna see a whiter white?

Heck of a CSS trick here from Dongsung Kim. There are hidden HDR videos playing at the corners of this page. When a HDR-capable browser encounters one, it switches to HDR mode. For some reason, CSS backdrop-filter + brightness >100% combo seems to behave like HDR—reaching beyond the user-controlled display brightness, up to the maximum HDR brightness—while the everything in between follow[s] along. At least that’s the overall idea, but I still don’t know exactl..

Read more
  • 0 Comment

Images are hard.

Putting images on websites is incredibly simple, yes? Actually, yes, it is. You use <img> and link it to a valid source in the src attribute and you’re done. Except that there are (counts fingers) 927 things you could (and some you really should) do that often go overlooked. Let’s see… Make sure you use sentence-format alt text on the image to describe what the image depicts. Wrap it in a <figure> and use a <figcaption> if you want visible text that..

Read more
  • 0 Comment

Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines

The Scroll-Linked Animations specification is an upcoming and experimental addition to CSS. Thanks to the @scroll-timeline at-rule and animation-timeline property this specification provides, you can control the time position of regular CSS Animations by scrolling. In this post, we’ll take a look at some practical use cases where scroll-linked animations come in handy, replacing a typical JavaScript approach. 👨‍🔬 The CSS features described in this post are..

Read more
  • 0 Comment

WordPress Admin Warnings in the Block Editor

We sent out an email the other week that ultimately had a <video> in the HTML markup. We send the newsletter by creating it here in the WordPress block editor, which is fetched through RSS-to-Mailchimp. Mailchimp dutifully sent it out, but the HTML was such that it totally borked the layout. This lead to some charming totally fair emails like this: You actually can send <video> in HTML email, but our system just isn’t set up for it. It requires some f..

Read more
  • 0 Comment

Of Course We Can Make a CSS-Only Clock That Tells the Current Time!

Let’s build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then we’ll convert it into a “digital” clock as well. All this with no JavaScript! Here’s a quick look at the clocks we’ll make: GitHub repo Brushing up on the calc() function CSS preprocessors teased us forever with the ability to calculate numerical CSS values. The problem with pre-processors is that they lack knowledge of t..

Read more
  • 0 Comment

Some Typography Links

Glitter text — whO (I learned a name for people who go by a one-word moniker like that: Mononymous) created a builder for fancy SVG-based type. It’s a custom font with <text>, and the fancy comes in with a gradient and somewhat exotic filters that make noise and blend the noise into the color.Optical Size tweaking for dark mode — Mark Boulton opens by questioning the usefulness of variable fonts (blaspheme!) but then finds a nice use case in adjusting the optical ..

Read more
  • 0 Comment

How to Get a Pixel-Perfect, Linearly Scaled UI

Dynamically scaling CSS values based on the viewport width is hardly a new topic. You can find plenty of in-depth coverage right here on CSS-Tricks in articles like this one or this one. Most of those examples, though, use relative CSS units and unitless values to achieve fluid scaling. That loses pixel perfection and usually introduces text wrapping and layout shifts once the screen goes below or above a certain threshold. But what if we really do want pixel perfection..

Read more
  • 0 Comment

Build Complex CSS Transitions using Custom Properties and cubic-bezier()

I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I will show you how to create even more complex CSS transitions. This time, let’s use the @property feature. It’s only supported on Chrome-based browsers for now but we can still play with it and demonstrate how it, too, and can be used to..

Read more
  • 0 Comment

A Bashful Button Worth $8 Million

Most of us grumble when running across a frustrating UX experience online (like not being able to complete a transaction because of a misplaced button). We might pen a whiny tweet. Jason Grigsby is like I’m going to write 2,000 words on this and show them what’s what. And of course, he has a strong point. An out-of-viewport button that you need to press to complete an order, on a checkout experience for some major restaurant brand, even with estimates that are conservativ..

Read more
  • 0 Comment

Links on React and JavaScript

As a day-job, React-using person, I like to stay abreast of interesting React news. As such, I save a healthy amount of links. Allow me to dump out my latest pile. Most of this is about React but not all of it. The Plan for React 18 — A bunch of people from the React team put this post out giving us all a heads up of what’s coming. Alpha is out, beta is months away. I thought Cassidy’s article on it was the most clear about what we’re likely to care about. Reac..

Read more
  • 0 Comment
Get in Touch
Close