We’re featuring Jorge Toloza in today’s spotlight—a creative developer whose motion-focused tutorials and interactive work have inspired the Codrops community. 
Explore his story, favorite projects, and the ideas behind his beautifully crafted web experiences: https://tympanus.net/codrops/2025/03/27/developer-spotlight-jorge-toloza/
#tinyCSStip Simplifying animations with variables and mathematical functions.
Same result, just not writing almost the same `text-shadow` a bunch of times in a bunch of keyframes.
Live test on @codepen https://codepen.io/thebabydino/pen/MYWXgdZ
#CSS #Maths #code #coding #frontend #web #dev #webDev #webDevelopment
#cssMaths #trigonometry
#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.
#cssWish That we could have a zero count for the number of columns in `repeat()`.
That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:
```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```
New #CSS featues should make our lives easier, right?
Except for when they're buggy. Just hit (and filed) a Chrome bug 
https://issues.chromium.org/issues/405676714
@Robb Ended up doing it tonight instead, it works 
Great guide to build your own out, didn't take too long. I think spent more time putting the mask image together 
Playing around with MutationObserver to ensure an element is always available on the page, even if the #frontend code decides to wipe everything out. #JavaScript
It used to be quite challenging to set the precedence of individual #CSS rules without a lot of headaches. (This encouraged the practice of authoring many small utility classes that do very little on their own.)
Thankfully, that’s no longer the case. Here’s a simple example: https://cloudfour.com/thinks/cowardly-defaults-and-courageous-overrides-with-modern-css/
Loading #aspnetcore self-signed certificate into your #vite dev server is straightforward. Here is the code for anyone doing #frontend #javascript #development.
The pfx file is under `~/.aspnet/dev-certs/https` on macOS.
DON'T use layered text-shadows for text outlines just because text-stroke is broken (https://mastodon.social/@anatudor/112410224855133935), they are going to produce ugly corners, thickened roundings and angled lines.
DO: use `paint-order: stroke fill` instead!
Among other things, I also go into the how behind the minimum alpha for the semi-transparent black overlay so we can be sure of having enough contrast.
Can't believe this quick little thing made this week's @codepen Spark!
codepen.io/thebabydino/pen/GgRryoa
Minimal pure #CSS textile patterns on @codepen https://codepen.io/thebabydino/full/OJmpzya
Absolutely no images other than CSS gradients and they are all tiny! All of them are under 500 bytes minified, some of them well under!
Because someone just hearted this decade old @codepen.io #3D demo, I gave it a quick 2025 remake using 
modern #CSS features - grid instead of `position: absolute`, CSS variables to avoid setting multiple properties in Sass loops, `color-mix()` and more!
https://codepen.io/thebabydino/pen/NNxMaN
Based on a GIF by @sasj, originally CSS-ed 9+ years ago live on CodePen in 10 minutes and 50 lines of SCSS. Now the code is even more compact.
Another little @codepen demo: pure #CSS double ball 
helix https://codepen.io/thebabydino/pen/JreoKw
(yet another demo that cold be simplified by the `position: absolute` to `display: grid` switch for stacking and in the future, further simplified by `sibling-index()`)
For example, nowadays I wouldn't use `position: absolute` + offsets + negative `margin` 
to stack and place elements in the middle before applying transforms to position them in 3D.
I would use grid now. 
Someone hearted this old thing https://codepen.io/thebabydino/pen/GNYvbZ on @codepen and I noticed it said Chrome-only - tested and it's not the case anymore, it works cross-browser.
Do note that it's 8+ years old, before #CSS variables, grid, newer functions and could be much simplified using these.
Some single `button` sets I made on @codepen a while back:
https://codepen.io/thebabydino/pen/dLLxdj
https://codepen.io/thebabydino/pen/QBOKPy
Oh and for my day job I'm a #FrontEnd #JavaScript developer.
I've built lots of sites over the years and have particularly enjoyed working with Tumblr.
Here's one I'm particularly proud of
https://studiomalarkey.co.uk/
(This is also the studio I share with Jessica my wife and our friend Sam).
If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.
How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?
️ 