home.social

#csspattern — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #csspattern, aggregated by home.social.

fetched live
  1. 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

  2. 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

  3. 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 stackoverflow.com/a/65129916/1 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

  4. 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 stackoverflow.com/a/65129916/1 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

  5. 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
    codepen.io/thebabydino/pen/vYy

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

  6. 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
    codepen.io/thebabydino/pen/vYy

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

  7. 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 codepen.io/thebabydino/pen/ZEG

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

  8. 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 codepen.io/thebabydino/pen/ZEG

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

  9. Minimal pure #CSS textile patterns on @codepen codepen.io/thebabydino/full/OJ

    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

  10. Minimal pure #CSS textile patterns on @codepen codepen.io/thebabydino/full/OJ

    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

  11. I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 frontendmasters.com/blog/pure-

    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

  12. I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 frontendmasters.com/blog/pure-

    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

  13. 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.

    codepen.io/thebabydino/pen/MWN

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

  14. 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.

    codepen.io/thebabydino/pen/MWN

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

  15. 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 reddit.com/r/css/comments/1gp4

    Really cool thing is it works well on zoom, see it on @codepen
    codepen.io/thebabydino/pen/ZEg

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

  16. 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 reddit.com/r/css/comments/1gp4

    Really cool thing is it works well on zoom, see it on @codepen
    codepen.io/thebabydino/pen/ZEg

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

  17. #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 codepen.io/thebabydino/pen/RwX

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

  18. #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 codepen.io/thebabydino/pen/RwX

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

  19. 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) codepen.io/thebabydino/pen/Lax

    Masking method (allows transparency) codepen.io/thebabydino/pen/pYr

    Patterns from the CSS3 Pattern gallery by @leaverou: 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

  20. 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) codepen.io/thebabydino/pen/Lax

    Masking method (allows transparency) codepen.io/thebabydino/pen/pYr

    Patterns from the CSS3 Pattern gallery by @leaverou: 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

  21. The fifth is a pure #CSS text effect.

    codepen.io/thebabydino/pen/XWQ

    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 🪲 bugzilla.mozilla.org/show_bug.

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

  22. The fifth is a pure #CSS text effect.

    codepen.io/thebabydino/pen/XWQ

    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 🪲 bugzilla.mozilla.org/show_bug.

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

  23. 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 css-tricks.com/background-patt

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

  24. 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 css-tricks.com/background-patt

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

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

    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

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

    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

  27. So this very subtle pure #CSS pattern got picked on @codepen codepen.io/thebabydino/pen/vYq

    ¯\_(ツ)_/¯

    (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

  28. So this very subtle pure #CSS pattern got picked on @codepen codepen.io/thebabydino/pen/vYq

    ¯\_(ツ)_/¯

    (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

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

    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

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

    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

  31. #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 codepen.io/thebabydino/pen/yLW

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

  32. #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 codepen.io/thebabydino/pen/yLW

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

  33. 1️⃣1️⃣ 446 ❤️ Pure #CSS 1 div card backgrounds codepen.io/thebabydino/pen/GRR

    Using mask compositing, which I explained in this article css-tricks.com/mask-compositin

    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

  34. 1️⃣1️⃣ 446 ❤️ Pure #CSS 1 div card backgrounds codepen.io/thebabydino/pen/GRR

    Using mask compositing, which I explained in this article css-tricks.com/mask-compositin

    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

  35. Pure #CSS #random #Truchet tiles codepen.io/thebabydino/pen/mda

    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

  36. Pure #CSS #random #Truchet tiles codepen.io/thebabydino/pen/mda

    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

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

    So here it is my version on #CodePen codepen.io/thebabydino/pen/WNP - 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

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

    So here it is my version on #CodePen codepen.io/thebabydino/pen/WNP - 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

  39. #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

  40. #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