A rather geeky/technical weblog, est. 2001, by Bramus
Steve Fulghum takes a look at how we can use Houdini’s Paint API to paint a complex shadow. See the Pen Simulating Drop Shadows with the CSS Paint API by Steve Fulghum (@steve_fulghum) on CodePen. If you’re interested into making your first Paint Worklet with Houdini, you can easily follow along with the article/tutorial. Simulating …
Continue reading “Simulating Drop Shadows with the CSS Paint API”
“Higher Level Custom Properties” are Custom Properties that control multiple other CSS Properties. Although still a proposal it’s worth having a look already as they’re really exciting.
Nice demo by Michelle Barker, in which she recreates snowflakes based on those folded paper cutouts we all made as a child. ⚠️ Warning: quite a heavy demo. Uses both a clip-path and mask-image to generate the cutout shapes. And oh, everything’s defined using Custom Properties. Love the attention to detail on this one too: …
See the Pen Cooltipz.css – Cool tooltips made from pure CSS by Bramus (@bramus) on CodePen. I especially like the fact that these are customisable using CSS Custom Properties. Here’s a few of them: :root { –cooltipz-bg-color: #fff; –cooltipz-text-color: #333; –cooltipz-border-radius: 5rem; } Installation per NPM: npm install cooltipz-css Cooltipz.css →
Anthony Ricaud, writing for the Web Performance Calendar, on the extra load that JavaScript can put on your site, and how you can replace some things with basic HTML and CSS: Relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards. These …
Continue reading “HTML and CSS techniques to reduce your JavaScript”
Great research by Sara Soueidan: If you have a question with a binary Yes/No answer, is it better to use one checkbox or two radio buttons? As per usual: It Depends™. The consensus however seems to be that requiring an explicit “No” is the determining factor to avoid the simple checkbox. Over at CSS-Tricks Chris …
Continue reading ““Yes or No?” — One Checkbox vs Two Radio Buttons”
You can export the results as an SVG or as a set of CSS Custom Properties: :root { –sunset1:#332971; –sunset2:#5f3767; –sunset3:#ac5067; –sunset4:#e67369; –sunset5:#fb9c63; –sunset6:#febf57; –sunset7:#ffd043; } Parametric Color Mixer →
Adam Argyle looking at several techniques to center in CSS, and how they hold up in several conditions (narrow screen, rtl, etc) In today’s challenge, we’re stress testing 5 different CSS centering techniques. See what techniques should earn a place in your tool belt by watching how they react to common layout stress. The contestants: …
Continue reading “Thinking on ways to solve Centering in CSS”
Andrey Sitnik: It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Having only this in your markup …
Now this is a fun pen! How many HTML tags can you remember? Stranded on 58 here, which is just over 50%. Perhaps if I think about it a bit more I can add a few extra to the list, but don’t think I’d get that much further though … Now don’t you go peeking …