Maybe don't rely on AI do answer your CSS questions. Actually... without the maybe. Don't rely on AI to answer your CSS questions.
Recent searches
Search options
Administered by:
#cssgradient
0 posts0 participants0 posts today
Replied in thread
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/
Replied in thread
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
Replied in thread
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
Replied in thread
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!
Continued thread
A much newer @codepen demo: smoothly connected cards https://codepen.io/thebabydino/pen/azbLBJy - continuous backgrounds across all, concave roundings + drop shadows, responsivity.
Continued thread
If what you want isn't beveled, but scooped corners, then you can do it with a `radial-gradient()` mask. You can even add borders too!
Here's a @codepen demo illustrating this https://codepen.io/thebabydino/pen/VYwObZN
Pure #CSS, no SVG.
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
Because someone just hearted a 5 year old @codepen demo https://codepen.io/thebabydino/pen/GRooBJm?editors=0100 I made using a #Sass function + looping to generate a #CSS 
: we don't need *any* Sass for this anymore! 
We can now do it with
background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)
No JS #fluid animation. The animation is created in #CSS, where I'm animating the values of two custom properties back and forth. `feTurbulence` creates the background, `feDisplacement` map uses the CSS-animated input to make it move.
My take on this question https://www.reddit.com/r/webdev/comments/1izlhkw/comment/mfedw8s/
GIF
Continued thread
Made a gallery of such #SVG gradient + #filter effects blobs on @codepen
https://codepen.io/thebabydino/full/YPzNWoR
Also includes an explanation of the how behind and interaction: the focal point of the `radialGradient` the blobs start from follows the cursor on hover.
Different blobs for light/ dark mode. 
Grainy distorted gradient blob: 1 #SVG `radialGradient` (setting a focal point `fx,fy`) vs. multiple #CSS `radial-gradient()` layers (no option to control focal point).
Using filters for distortion & grain effect.
A bit more detail on this https://www.reddit.com/r/css/comments/1j03iyv/comment/mf89ri9/
Know the animated border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two layers.
But what if we wanted a (semi)transparent background within the border? It's possible with pure #CSS!
Heavily commented on @codepen https://codepen.io/thebabydino/pen/KwPBvzo
GIF
The Ko-fi promote your page is ugly and the #CSS for it is inefficient (radial gradient covers with jagged edges 
https://mastodon.social/@anatudor/112553357846316566).
So I made 2 better versions in this @codepen demo https://codepen.io/thebabydino/pen/PwYBNKx
Using a technique I first wrote about in 2015 https://css-tricks.com/the-backgound-clip-property-and-use-cases/
Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.
As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.
GIF
Really cool to see people linking my Frontend Masters article as a resource https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
Continued thread
By the way, this is my second article for Frontend Masters.
My first was a few months ago and it was about creating dynamic split effects (image, text, page) without any content duplication whatsoever https://frontendmasters.com/blog/split-effects-with-no-content-duplication/
GIF
I have a new article out: 
Pure CSS Halftone Effect in Only 3 Declarations https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 
cooler, more interesting patterns.
Continued thread
This little thing made this week's @codepen Spark!
Continued thread
We make the background-size fit an integer number of times within the viewport width and height.
We need length division for that, so we use the tan(atan2()) hack by @JaneOri.
Then, we set box dimensions/ margins to be multiples of background-size https://www.reddit.com/r/css/comments/1gp4cq0/comment/lwqkyrd/
Really cool thing is it works well on zoom, see it on @codepen
https://codepen.io/thebabydino/pen/ZEgwBqL
GIF