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
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
Here's a blue textile pattern. It's pure #CSS, using only background gradients on a single element (the root element in this case). No other images or tricks.
Oh, and it's under 500 bytes minified!
Can you guess how I did it before checking the code? Let me know!
https://codepen.io/thebabydino/pen/bGKOzvX
Oh, and if you want more textile patterns, check this out! https://codepen.io/thebabydino/full/OJmpzya
So here's a little #cssChallenge2022: how would you #css this pattern?
⚠️ 1 HTML element
❌ no pseudos
⚠️ pure CSS
❌ no JS
❌ no SVG
⚠️ no images in general save for CSS gradients
✨ acute (top) rhombus angle is 76°
✨ rhombus width is 5em
✨ light gold is #fd8
PS - If you're a $5+ patron on Patreon, know I've already posted the solution there 👀 🤫
Another little pure #CSS pattern: rhombic 🔥 https://codepen.io/thebabydino/pen/mdKQXqg
Minified compiled CSS is under 380 bytes. Can you figure out how before checking the code? 😊
Palette:
ed7b32 f19b36 966459 824739
b65333 fadc9c f4bb3a d6552b
Rhombi have a 60° acute angle and are 4em wide.
Pure #css pattern on #CodePen: connectors https://codepen.io/thebabydino/pen/MWXVRjr
Made with two grids of targets, one with black in the middle, the other one with white, offset by half a background-size.
These targets touch diagonally, so their size within background box is computed as in the hand drawing.
Beside these two layers, we also stack a conic-gradient one of twice the background-size of the other two and which creates a sort of chessboard. We blend all 3 of them using lighten.
Pure #css pattern: 🥀
https://codepen.io/thebabydino/pen/zYaayWW
Felt like making this one a bit more gradienty than the original https://www.shutterstock.com/image-vector/black-yellow-art-deco-seamless-pattern-1641614395
(otherwise, the number of gradients could be reduced)
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
@artlung Psst, https://mastodon.social/@anatudor/112965908316021981
In short: that 1% gap between 69% and 70% may look good on your screen, but not necessarily on others.
Also, closest-side makes things easier:
radial-gradient(closest-side,
#0000 calc(100% - 1px), blue)
(cool idea to paint the outer part leaving middle transparent, btw)
`repeating-conic-gradient()` simplifies things too https://css-tricks.com/background-patterns-simplified-by-conic-gradients/#aa-diagonal-checkerboard
@artlung The ~70% value is 100%/sqrt(2) with the default `farthest-corner`. For this default, when starting from the middle, the 100% is in the corners. On the edges, like needed here, it's 100%/sqrt(2). With `closest-side`, 100% is on the edges and the last stop is by default at 100%, so then I only need to specify the previous one at 100% - 1px to avoid ugly jagged edges as x%/0 would produce.
But I can see why leaving the default & just using % would be preferred for CSS Battle (fewer chars)
@anatudor I sometimes use keyword `circle` in radial gradients on background sizes that are not aspect ratio 1/1. I’ll be experimenting with farthest-corner and closest-side in nonsquare background sizes. Want to feel the effects!
Also: in CSS battles some targets with curves or angles are tough to 100% match from backend. Maybe because backend uses headless Chromium with 800x600 reference png; players code to are a 400x300 viewport; theory is half pixels/aliasing we can’t quite access.
Ana Tudor 🐯
Joe Crawford
