Hey, this is Scott! Normally I just post the description for a link, but I want to rave about this particular one. It’s jaw-droppingly cool. Toy around with the CSS, but there’s four critical bits:
There’s a repeating radial gradient that makes the circular lines. It’s a simple blurry grayscale gradient.
The numbers are positioned under the gradient, and are also blurred.
Then the gradient itself has a 2000% contrast filter added, which creates the half-tone effect!
A rainbow color radial gradient using a blend mode is overlaid on the whole thing to make it colorful.
This is wild. I wouldn’t have guessed you could make an effect like this in just a few lines of CSS.
CSS is constantly evolving, and some cool and useful properties either go completely unnoticed or are not talked about as much as others for some reason or another. In this article, we’ll cover a fraction of those CSS properties and selectors.
In this article, we will create complex CSS hover animations. We’re talking about background clipping, CSS masks, and even getting our feet wet with 3D perspectives. In other words, we are going to explore advanced techniques this time around and push the limits of what CSS can do with hover effects!
Developing accessible products can be challenging, especially when some of the requirements are beyond the scope of development. It’s one thing to enforce alt text for images and labels for form fields, but another to define an accessible color palette. From working with design handoffs to supporting custom themes in a design system, the CSS color-contrast() function can become a cornerstone for developers in enforcing sufficiently contrasting and accessible UIs.
My first thought was that I would avoid any dependencies and bite the bullet to build my own dialog component. As you may know, there’s a new <dialog> element making the rounds and I figured using it as a starting point would be the right thing, especially in the inclusiveness and accessibilities departments. But, after doing some research, I instead elected to leverage a11y-dialog by Kitty Giraudel. Why did I go that route? Let me take you through my thought process.
A short guide on nesting media queries. You’ll learn how to nest media queries, how to combine @media with @supports, and how to use CSS Custom Properties (variables) in media query features using @custom-media.
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Tweet
Share