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)
Ana Tudor 🐯
