A rather geeky/technical weblog, est. 2001, by Bramus
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“
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 …
@layer)
@layer) aim to ease this task.
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 →
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 …
I have no idea how this works, but it’s amazing: See the Pen Morse Code Translator (HTML & CSS) by Lillian Kodi (@lillian-kodi)on CodePen. By Lillian Kodi who created this amazing HTML+CSS Calculator before. As only Chromium supports animating custom properties (Houdini FTW!) it won’t work in Safari nor Firefox. For reference, you can see …
Continue reading “CSS Shape Path Editor extension for Chrome DevTools”
CSS accent-color from the CSS UI specification is here to tint elements with one line of CSS, saving you from customization efforts by providing a way to bring your brand into elements. The CSS for the screenshot above is this: input { accent-color: hotpink; } 💡 You can also set this declaration onto form, as …
Continue reading “Tint User-Interface Controls with CSS accent-color”