Ana Tudor 🐯Apr 9, 2025

I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:

From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz

#clipPath #cssClipPath #code #coding #web #dev #webDev #webDevelopment #frontend #cssPattern #cssPatterns #cssGradient

1 element bevel cards (pure CSS) - real (semi)transparency inside borders and all that

My take on the [beveled corners + borders problem](https://twitter.com/anatudor/status/1246515163559268360). Also my first demo that's not a fork in 4 ...

Show threadAna Tudor 🐯Apr 11, 2025

A much newer @codepen demo: smoothly connected cards https://codepen.io/thebabydino/pen/azbLBJy - continuous backgrounds across all, concave roundings + drop shadows, responsivity.

#CSS #SVG #filter #svgFilter #cssGradient #web #webDev #dev #webDevelopment #code #coding #frontend #CodePenChallenge

Smoothly connected offset cards (concave rounding)

[My take on a question asked on reddit](https://www.reddit.com/r/css/comments/1j8luny/how_can_i_create_this_pattern_in_css/). --- If the work I've be...

Show threadAna Tudor 🐯Apr 11, 2025

And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.

Live on @codepen https://codepen.io/thebabydino/pen/xxzjJXL - only 2 CSS declarations necessary!

#CSS #tinyCSStip #blending #blendMode #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

Pure CSS: vibrant to desaturated gradient backgrounds

A tiny little bit of blending magic. [The simplified base idea](https://codepen.io/thebabydino/pen/yLEjjWE). --- If the work I've been putting out s...

Show threadAna Tudor 🐯

Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.

So basically, it's again just one `background` + one `background-blend-mode` property.

Live demo on @codepen
https://codepen.io/thebabydino/pen/vYyNyER

#CSS #blending #blendMode #pattern #cssGradient #coding #frontend #code #web #dev #webDev #webDevelopment #cssPattern #cssPatterns #patterns

Simple 1 elem pure CSS card patterns

[See me code this](https://youtu.be/wPIQvB1nFv0) in under 9 minutes. --- If the work I've been putting out for almost 9 years (I started coming up wi...

Apr 11, 2025 at 8:46amWeb
Show threadAna Tudor 🐯Apr 12, 2025

And here are cards with gradual left to right inversion: from no inversion at all on the left, to full inversion on the right. Again, minimal code, single div, no pseudos necessary, 2 #CSS declarations.

Live demos on @codepen

✳️ https://codepen.io/thebabydino/pen/mdOzLxE

✳️ https://codepen.io/thebabydino/pen/dyOVgeR

#blending #blendMode #cssGradient #code #web #webDev #webDevelopment #dev #coding #frontend

Gradual left to right invert vs. pseudo-invert

Created for my [Taming Blend Modes: `difference` and `exclusion`](https://css-tricks.com/taming-blend-modes-difference-and-exclusion/) article on CSS-T...

Show threadAna Tudor 🐯Apr 12, 2025

You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on @csstricks https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

#CSS #blending #blendMode #cssGradient #code #web #webDev #webDevelopment #dev #coding #frontend

Taming Blend Modes: `difference` and `exclusion` | CSS-Tricks

Up until 2020, blend modes were a feature I hadn't used much because I rarely ever had any idea what result they could produce without giving them a try

CSS-Tricks