A rather geeky/technical weblog, est. 2001, by Bramus
Micro CSS util class for applying inflated fluffy 3D claymorphism styles to HTML elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options. I never really liked the neumorphism look, but this “claymorphism” by Adrian Bece looks nice. clay.css →clay.css Source (GitHub) →
I very much like this demo by Adam Kuhn: This demo is quite heave on your system. As it relies on altering the CSS d property to animate the SVGs, it’ll only work in Chromium based browsers for now.
If you’re using Microsoft Edge, you might have noticed that it sports “Reveal Password” control — a little eye icon — automatically injected on the end side of password inputs: As per Edge Developer Docs: The password input type in Microsoft Edge includes a password reveal control. To make sure that the password is entered …
Continue reading “Customize the Password Hide/Reveal Button in Microsoft Edge”
In this article on CSS-Tricks, Mads Stoumann digs into :where(), Custom Properties, and Cascade Layers to control the CSS Cascade. At the end, Mads concludes: If you leave with only one takeaway from this article, I hope it’s that the CSS cascade is no longer the enemy it’s often made to be. We are gaining …
In this video, Kevin J Powell, shows how to use new and upcoming CSS features today, thanks to PostCSS and its postcss-preset-env plugin. The video covers Custom Media Queries, Media Query Ranges, CSS Nesting, and Custom Selectors.
As part of Designcember, Google Chrome Developer Relations Engineer Una Kravets published season three of “Designing in the Browser”, a series of videos on exploring user interface design through the lens of modern web technology. In these short and on-point videos, you’ll learn about certain Web/CSS features and DevTools along the way. The third season …
:has()
Similar to how you can (ab)use :nth-child() to create “new” CSS selectors, you can leverage :has() to create some typical combinators. Brandon McConnell did just that: y:has(+ x) selects the first preceding y sibling of x: y:has(~ x) selects all preceding y sibling of x: x + y, y:has(+ x) selects the first preceding and …
Continue reading “Magic PostCSS Custom Combinators using :has()“
This is a blog post explaining the process of fixing an issue related to wavy text decorations in Blink, that ended up with a similar fix in WebKit. Interesting to read about the work and thought-process behind at-first sight “seemingly simple features” such as the wavy underlines for Spelling and Grammar errors. Be sure to …
Continue reading “A story on web engines interoperability related to wavy text decorations”
hwb() – a color notation for humans?
On the web we can define colors in several Color Spaces. By default we’ve always been using sRGB, but newer ones such as P3 are on the way. To describe a color in CSS (in the sRGB Color Space) we can use the functions rgb() and hsl() today already. Both are well supported, even in …