#csspattern — Public Fediverse posts

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

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

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

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

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

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

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

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

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

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

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

Really cool to see people linking my Frontend Masters article as a resource https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

#CSS #code #coding #frontend #pattern #cssPattern #cssGradient #halftone #web #dev #webDev #webDevelopment #filter #cssFilter #blendMode #blending

Really cool to see people linking my Frontend Masters article as a resource https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

#CSS #code #coding #frontend #pattern #cssPattern #cssGradient #halftone #web #dev #webDev #webDevelopment #filter #cssFilter #blendMode #blending

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.

#CSS #pattern #gradient #halftone #cssPattern #cssGradient #filter #blending #blendMode #code #coding #frontend #web #dev #webDev #webDevelopment

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.

#CSS #pattern #gradient #halftone #cssPattern #cssGradient #filter #blending #blendMode #code #coding #frontend #web #dev #webDev #webDevelopment

Anyway, health and administrative issues aside... I've been cooking something cool when it comes to #CSS and you'll get to see it soon!

For now, here's a little demo I made that unexpectedly was one of the @codepen picks last week and now even made this week's Spark.

https://codepen.io/thebabydino/pen/MWNMjGO

#filter #cssFilter #code #coding #frontend #web #dev #webDev #webDevelopment #halftone #cssPattern

Anyway, health and administrative issues aside... I've been cooking something cool when it comes to #CSS and you'll get to see it soon!

For now, here's a little demo I made that unexpectedly was one of the @codepen picks last week and now even made this week's Spark.

https://codepen.io/thebabydino/pen/MWNMjGO

#filter #cssFilter #code #coding #frontend #web #dev #webDev #webDevelopment #halftone #cssPattern

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

#CSS #Maths #mathematics #cssMaths #cssPattern #pattern #cssGradient #code #web #dev #webDev #webDevelopment #coding #frontend #cssHack

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

#CSS #Maths #mathematics #cssMaths #cssPattern #pattern #cssGradient #code #web #dev #webDev #webDevelopment #coding #frontend #cssHack

#tinyCSStip Want your page background to contain an integer number of dots?

Use `background-repeat: space`! This inserts a bit of space in between background repetitions so we have an integer number of them. Well-supported for ages. 🥳

Live on @codepen https://codepen.io/thebabydino/pen/RwXvryZ

#CSS #pattern #gradient #cssPattern #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

#tinyCSStip Want your page background to contain an integer number of dots?

Use `background-repeat: space`! This inserts a bit of space in between background repetitions so we have an integer number of them. Well-supported for ages. 🥳

Live on @codepen https://codepen.io/thebabydino/pen/RwXvryZ

#CSS #pattern #gradient #cssPattern #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

Here's a quick and compact (200 bytes) pure #CSS raised checkerboard background pattern on @codepen:

https://codepen.io/thebabydino/pen/QWeVjKJ?editors=0100

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #gradient #cssPattern

Here's a quick and compact (200 bytes) pure #CSS raised checkerboard background pattern on @codepen:

https://codepen.io/thebabydino/pen/QWeVjKJ?editors=0100

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #gradient #cssPattern

Something I made over half a decade ago on @codepen: single element pure #CSS border patterns!

Cover method (only allows opaque background + hacky transparency emulations) https://codepen.io/thebabydino/pen/LaxmKO

Masking method (allows transparency) https://codepen.io/thebabydino/pen/pYrQYN

Patterns from the CSS3 Pattern gallery by @leaverou: https://projects.verou.me/css3patterns/
(with gradient code made a bit more modern)

#gradient #cssGradient #mask #cssMask #pattern #cssPattern #code #coding #web #dev #webDevelopment #frontend #webDev

Something I made over half a decade ago on @codepen: single element pure #CSS border patterns!

Cover method (only allows opaque background + hacky transparency emulations) https://codepen.io/thebabydino/pen/LaxmKO

Masking method (allows transparency) https://codepen.io/thebabydino/pen/pYrQYN

Patterns from the CSS3 Pattern gallery by @leaverou: https://projects.verou.me/css3patterns/
(with gradient code made a bit more modern)

#gradient #cssGradient #mask #cssMask #pattern #cssPattern #code #coding #web #dev #webDevelopment #frontend #webDev

The fifth is a pure #CSS text effect.

https://codepen.io/thebabydino/pen/XWQQRWG

No text duplication whatsoever, no pseudos, no images save for CSS gradients. Just a single div and a few heavily commented CSS declarations.

Unfortunately broken in Firefox due to an old bug 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1481498

#cssGradient #cssPattern #textEffect #textEffects #code #coding #frontend #web #dev #webDev #webDevelopment #blue

The fifth is a pure #CSS text effect.

https://codepen.io/thebabydino/pen/XWQQRWG

No text duplication whatsoever, no pseudos, no images save for CSS gradients. Just a single div and a few heavily commented CSS declarations.

Unfortunately broken in Firefox due to an old bug 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1481498

#cssGradient #cssPattern #textEffect #textEffects #code #coding #frontend #web #dev #webDev #webDevelopment #blue

Because I just saw a checkerboard pattern done with 4 CSS gradients: you don't need to overcomplicate! 🏁

A single conic gradient does it! ✨

Detailed explanation of the how behind this + other patterns https://css-tricks.com/background-patterns-simplified-by-conic-gradients/

#tinyCSStip #CSS #cssPattern #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment

Because I just saw a checkerboard pattern done with 4 CSS gradients: you don't need to overcomplicate! 🏁

A single conic gradient does it! ✨

Detailed explanation of the how behind this + other patterns https://css-tricks.com/background-patterns-simplified-by-conic-gradients/

#tinyCSStip #CSS #cssPattern #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment

Something else that might be useful is this article on how `conic-gradient()` can be used to simplify #CSS patterns https://css-tricks.com/background-patterns-simplified-by-conic-gradients/

With illustrations and demos like this one showing how to go from a normal checkerboard pattern to a diagonal one.

#cssPattern #cssGradient #pattern #gradient #code #coding #frontend #web #dev #webDev #webDevelopment

Something else that might be useful is this article on how `conic-gradient()` can be used to simplify #CSS patterns https://css-tricks.com/background-patterns-simplified-by-conic-gradients/

With illustrations and demos like this one showing how to go from a normal checkerboard pattern to a diagonal one.

#cssPattern #cssGradient #pattern #gradient #code #coding #frontend #web #dev #webDev #webDevelopment

If you're interested in checking out a lot of other modern and compact #CSS patterns, you can find them under the tag in my @codepen profile

https://codepen.io/thebabydino/pens/tags/?selected_tag=css-patterns

#pattern #cssPattern #grafient #cssGradient #conicGradient #code #coding #frontend #web #webDev #webDevelopment #dev

If you're interested in checking out a lot of other modern and compact #CSS patterns, you can find them under the tag in my @codepen profile

https://codepen.io/thebabydino/pens/tags/?selected_tag=css-patterns

#pattern #cssPattern #grafient #cssGradient #conicGradient #code #coding #frontend #web #webDev #webDevelopment #dev

So this very subtle pure #CSS pattern got picked on @codepen https://codepen.io/thebabydino/pen/vYqbwLN

¯\_(ツ)_/¯

(only made it to provide an answer to a question someone asked... and I almost answered with "are you sure you uploaded the right image?" because the lines were so subtle I missed them at first)

#pattern #cssPattern #gradient #cssGradient #conicGradient #code #coding #frontend #web #webDev #dev #webDevelopment

So this very subtle pure #CSS pattern got picked on @codepen https://codepen.io/thebabydino/pen/vYqbwLN

¯\_(ツ)_/¯

(only made it to provide an answer to a question someone asked... and I almost answered with "are you sure you uploaded the right image?" because the lines were so subtle I missed them at first)

#pattern #cssPattern #gradient #cssGradient #conicGradient #code #coding #frontend #web #webDev #dev #webDevelopment

A ✨ fun ✨ little thing I came across online and thought I could pure #CSS, so here it is on @codepen https://codepen.io/thebabydino/pen/WNPJxvr

The aim was to keep it just pure CSS, but if I ever want to also reproduce the subtle texture from the inspiration image, then SVG filters are on the menu too.

#gradient #cssGradient #cssPattern #pattern #code #coding #frontend #web #dev #wevDev #webDevelopment

A ✨ fun ✨ little thing I came across online and thought I could pure #CSS, so here it is on @codepen https://codepen.io/thebabydino/pen/WNPJxvr

The aim was to keep it just pure CSS, but if I ever want to also reproduce the subtle texture from the inspiration image, then SVG filters are on the menu too.

#gradient #cssGradient #cssPattern #pattern #code #coding #frontend #web #dev #wevDev #webDevelopment

#tinyCSStip Use case for CSS mathematical functions.

`round()` edition: size box so that it contains the background pattern size an integer number of times plus half https://codepen.io/thebabydino/pen/yLWvKyK?editors=1100

#css #maths #cssMaths #rounding #code #coding #web #webDev #webDevelopment #dev #frontend #cssPattern #cssMask

#tinyCSStip Use case for CSS mathematical functions.

`round()` edition: size box so that it contains the background pattern size an integer number of times plus half https://codepen.io/thebabydino/pen/yLWvKyK?editors=1100

#css #maths #cssMaths #rounding #code #coding #web #webDev #webDevelopment #dev #frontend #cssPattern #cssMask

1️⃣1️⃣ 446 ❤️ Pure #CSS 1 div card backgrounds https://codepen.io/thebabydino/pen/GRRpzNX

Using mask compositing, which I explained in this article https://css-tricks.com/mask-compositing-the-crash-course/

Another where I should go through the code and improve it as it can be simplified nowadays.

#mask #cssMask #cssGradient #pattern #cssPattern #singleDiv #code #coding #frontend #webDev #web #webDevelopment #dev

1️⃣1️⃣ 446 ❤️ Pure #CSS 1 div card backgrounds https://codepen.io/thebabydino/pen/GRRpzNX

Using mask compositing, which I explained in this article https://css-tricks.com/mask-compositing-the-crash-course/

Another where I should go through the code and improve it as it can be simplified nowadays.

#mask #cssMask #cssGradient #pattern #cssPattern #singleDiv #code #coding #frontend #webDev #web #webDevelopment #dev

A couple more such halftone patterns, both of which have a video of me coding them from scratch.

✨ https://codepen.io/thebabydino/pen/LYyNVJQ
✨ https://codepen.io/thebabydino/pen/xxYMOoQ

#CSS #halftone #cssPattern #cssVariables #cssGradient #filter #filterEffect #cssFilter #blending #blendMode #code #coding #frontend #webDev #webDevelopment

A couple more such halftone patterns, both of which have a video of me coding them from scratch.

✨ https://codepen.io/thebabydino/pen/LYyNVJQ
✨ https://codepen.io/thebabydino/pen/xxYMOoQ

#CSS #halftone #cssPattern #cssVariables #cssGradient #filter #filterEffect #cssFilter #blending #blendMode #code #coding #frontend #webDev #webDevelopment

Pure #CSS #random #Truchet tiles https://codepen.io/thebabydino/pen/mdaBrmq

If you're a patron on Patreon, you may have seen I've done tens of these. Here's now one for this week's #CodePenChallenge. The CSS #filter is used to smoothen/ round corners. Also: CSS #trigonometry for pseudo-random tile rotation.

#CodePen #cssFilter #cssGrid #cssPattern #pattern #code #coding #frontend #webDev #webDevelopment

Pure #CSS #random #Truchet tiles https://codepen.io/thebabydino/pen/mdaBrmq

If you're a patron on Patreon, you may have seen I've done tens of these. Here's now one for this week's #CodePenChallenge. The CSS #filter is used to smoothen/ round corners. Also: CSS #trigonometry for pseudo-random tile rotation.

#CodePen #cssFilter #cssGrid #cssPattern #pattern #code #coding #frontend #webDev #webDevelopment

Came across this cool #CSS pattern https://codepen.io/josetxu/pen/mdvzaQZ?editors=0100 - uses 35 gradients, so I instantly knew I could simplify it and make it easily customisable.

So here it is my version on #CodePen https://codepen.io/thebabydino/pen/WNPamBB?editors=0100 - 9 gradients with n set to 4. Because yes, you can change n! 😎

#coding #pattern #cssPattern #cssGradient #frontend #code #maths #blending #blendMode #xor #logic #trigonometry #geometry #webDev #webDevelopment

Came across this cool #CSS pattern https://codepen.io/josetxu/pen/mdvzaQZ?editors=0100 - uses 35 gradients, so I instantly knew I could simplify it and make it easily customisable.

So here it is my version on #CodePen https://codepen.io/thebabydino/pen/WNPamBB?editors=0100 - 9 gradients with n set to 4. Because yes, you can change n! 😎

#coding #pattern #cssPattern #cssGradient #frontend #code #maths #blending #blendMode #xor #logic #trigonometry #geometry #webDev #webDevelopment

#CSSchallenge2023 How would you code this with:
⚠️1 div, no pseudos
⚠️ pure CSS
⚠️ at most 5 CSS declarations
⚠️ under 400 bytes
❌no JS
⚠️ no SVG, no images in general save for at most 4 CSS gradients

Palette: f49559, 9bd195, fdf159, 8bd6eb, f29699, f49559
Greys: 595959, 231f20

#css #coding #pattern #cssPattern #gradient #cssGradient #frontend #webDev #webDevelopment

#CSSchallenge2023 How would you code this with:
⚠️1 div, no pseudos
⚠️ pure CSS
⚠️ at most 5 CSS declarations
⚠️ under 400 bytes
❌no JS
⚠️ no SVG, no images in general save for at most 4 CSS gradients

Palette: f49559, 9bd195, fdf159, 8bd6eb, f29699, f49559
Greys: 595959, 231f20

#css #coding #pattern #cssPattern #gradient #cssGradient #frontend #webDev #webDevelopment