Noticed this got featured on @codepen: an animated XOR background - enjoy!
https://codepen.io/thebabydino/pen/JoKYVeB
Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3
#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code
A #contenteditable #3D text effect on @codepen https://codepen.io/thebabydino/pen/PogJybr
No text duplication, no images save for CSS gradients, no part of the effect baked into the font, no JS. It's all clever #CSS and #SVG #filter magic! 🪄✨
PS re: "trashed panda" 🦝🍾🥂🤪
https://www.bbc.com/news/articles/c5y2271q20lo
#svgFilter #cssGradient #code #coding #cssPattern #extrude #extrusion #frontend #web #dev #webDev #webDevelopment #textEffect #textEffects
Ubuntu was assaulting me with some errors I couldn't figure out, so I uninstalled and installed some stuff again and some settings got lost.
So I got hit with an abomination produced by Search Assist when I looked up my article to reference it in the description of a CodePen demo.
#CSS #AI #code #coding #frontend #cssGradient #halftone #imageEffect #web #dev #webDev #webDevelopment #cssPattern #aiSlop
A fun simple little pure #CSS demo on @codepen: bubbles pattern https://codepen.io/thebabydino/pen/dyeZVNO
#cssGradient #cssMask #cssPattern #cssFilter #code #coding #frontend #web #dev #webDev #webDevelopment
8️⃣ 736 ♥️ Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) - see it on @codepen https://codepen.io/thebabydino/pen/NWxBzRv
A bunch of variations on the pure CSS #halftone technique detailed in this article https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
#cssPattern #cssPatterns #cssGradient #halftonePattern #frontend #coding #web #dev #webDev #webDevelopment #code
A cool little pure #CSS background #pattern on @codepen https://codepen.io/thebabydino/pen/YzvYqWL
Can you figure out how it was made before checking the code? 😼
#cssPattern #frontend #code #coding #web #dev #webDev #webDevelopment #cssGradient #cssPatterns
Want a checkerboard pattern? No need to use multiple `linear-gradient()` layers anymore. `conic-gradient()` has been supported cross-browser since 2020!
PS: if you can, upvote https://stackoverflow.com/a/65129916/1397351 to make it the top answer and get more people (and AI*) to use modern, well supported #CSS
*people will use it anyway and we don't need more outdated code out there
#cssGradient #code #coding #frontend #web #dev #webDevelopment #webDev #cssPattern
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
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
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!
#pattern #cssPattern #frontend #patterns #cssPatterns #cssGradient #coding #web #dev #webDev #webDevelopment #textile #code
Ana Tudor 🐯
