Adding shadows on the web isn’t that hard: slap a CSS box-shadow onto an element and you’re done. But as Josh W. Comeau points out, making a good, life-like, shadow is hard. When I look around the web, though, it’s clear that most shadows aren’t as rich as they could be. The web is covered …
Tag Archives: css
CSS Container Queries: Container Relative Lengths
Coming with Container Queries are “Query Length Units”, a way to dynamically target the width/height of containers (cfr. viewport units). Let’s take a look …
CSS Specificity Calculator
On the Polypane website you can find an interactive Specificity Calculator. Paste in any selector from CSS Selectors Level 4 — yes, that includes those special cases :is(), :where(), :not(), etc. — and out comes the Specificity. CSS Specificity Calculator →
CSS Circle Focus Effect
Very rad demo by Adam Argyle, which gives you a Spotlight / Focus effect upon pressing the Option/Alt key. Also works on Mobile. (Focus the CodePen embed first) See the Pen Radial focus effect with mask-image by Adam Argyle (@argyleink) on CodePen. It basically is a fixed grey overlay with a mask-image on top that …
CSS Grid: Overlapping grid-template-areas
When working with CSS Grid, I’m a huge fan of using Grid Template Areas. In this short video Kevin Powell builds a small layout where certain elements overlap inside a grid container. I was very glad to see Kevin also go for grid-template-areas here, showing exactly why I like using them: the ability to reshuffle …
Continue reading “CSS Grid: Overlapping grid-template-areas“
Grainy Gradients
By layering a noisy SVG background and a gradient on top of each other, in combination with a filter that increases the contrast, Jimmy Chion creates these wonderful “Grainy Gradients”. See the Pen Grainy Gradient, step 3 by Jimmy Chion (@cjimmy) on CodePen. Over at CSS-Tricks he lays out the details: In this article, we’ll …
The Future of CSS: Cascade Layers (CSS @layer)
When authoring CSS we have to carefully think about how we write and structure our code. Cascade Layers (CSS
@layer) aim to ease this task. Pollen — Functional CSS for the future
Interesting: a CSS library that only provides you with CSS Custom Properties to use in your own CSS: Pollen is a library of CSS variables for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems. Heavily inspired by TailwindCSS. Pollen →
Prevent content from being hidden underneath the Virtual Keyboard by means of the VirtualKeyboard API
One of the problems on mobile devices is that the keyboard can hide some of your content. The VirtualKeyboard API aims to solve this. The Problem The current behavior on mobile devices is that as the keyboard gets shown, the Layout Viewport remains the same size but the Visual Viewport shrinks. Because layout items with …
The World of CSS Transforms
Another excellent post by Josh W. Comeau, this time covering CSS Transforms. In this blog post, we’re diving deep into the transform property. I’ll show you some of the cool and unexpected things you can do with it! As per usual, the post is packed with interactive playgrounds for you to try things out. The …