A rather geeky/technical weblog, est. 2001, by Bramus
Crazy demo by Julia Miocene, recreating a scene from the wonderful Monument Valley game. Not for Safari though. Apart from my head exploding, I also heard my CPU exploding 🤯 This behind the scenes video from the first Monument Valley is quite nice.
Handy website by Harry Roberts and Ryan Townsend to mimic slow loading CSS or JS files. Basic params to tweak are the type and delay ones. The resulting HTTP Status Code (status) and max-age can also be tweaked. Slowfil.es →
The results for The State of CSS 2020 are in! Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you’ve been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. Instead of breakpoints, we can now …
caret-color property
Thanks to this tweet by Álvaro Trigo I found out that you can change the color of the caret — that little blinking | in text inputs — using the caret-color CSS property: There are CSS properties I never heard of before! Hello `caret-color` 👋 pic.twitter.com/ndcDUjN13R — Álvaro Trigo 🐦🔥 (@IMAC2) November 24, 2020 Example: …
Continue reading “Customise the caret color with the CSS caret-color property”
If you’re dealing with images it’s quite common to show a small placeholder while the image is loading. You could go with grey placeholders, but a low-res blurred version of the original is preferred. That way you can, in the example use case of a website, use the Blur Up technique once the image is …
Continue reading “BlurHash — Low-res Blurred Placeholder Images Represented as Text”
aspect-ratio
In “CSS Box Sizing Module Level 4” a new aspect-ratio CSS property is defined. Let’s take a look on how to use it …
Building further upon The Holy Albatross technique, comes The Raven Technique by Mathias Hülsbusch: I want to get closer to actual container queries! So, what does CSS have offer that I could tap into? I have a mathematical background, so functions like calc(), min(), max() and clamp() are things I like and understand. Next step: …
Continue reading “The Raven Technique: One Step Closer to Container Queries”
Just announced on the Chromium mailing list is an “Intent to Prototype” Container Queries. Let’s take a look at the proposed syntax …
When double clicking a form’s submit button your form will be sent twice. With a tad of JavaScript this can be prevented from happening.
If you’re unfamiliar with some of the CSS terms like Selector, Attribute Selector, Expression, Declaration, etc. then CSS Vocabulary will come in handy. It’s a page containing a CSS code snippet. You can click on each part of the code (or in the sidebar) to see which part is what. CSS Vocabulary →