Lmst

#cssPatterns

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

19 cards, each with a different kind of halftone pattern.

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

Geometric pattern, where we have a xor effect at the intersection of two grids of plane packing circles, offset by a radius in both directions. This then gets xored with a diagonal checkerboard with the grid nodes where the circles are tangent to other circles on the same grid.

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

.card {
--s: rgb(0 0 0/ .2) 0, #0000 5px 50px;
background:
/* shadows */
repeating-linear-gradient(45deg, var(--s)),
repeating-linear-gradient(-45deg, var(--s)),
/* main pattern */
repeating-linear-gradient(45deg, var(--c)),
repeating-linear-gradient(-45deg, var(--c));
background-blend-mode:
multiply, multiply, lighten
}

.card:nth-child(1) {
--c: #847971 0 10px, #938981 0 20px,
#9e938a 0 30px, #a89c93 0 40px, #bfb6ab 0 50px
}

.card:nth-child(2) {
--c: #333 0 10px, #555 0 20px,
#c55 0 30px, #ccc 0 40px, #eee 0 50px
}

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

Screenshot of linked demo. Shows 7 beveled cards, some with borders (solid, gradient or patterned ones), some with (semi)transparent backgrounds, some with gradient backgrounds, one with an image background. They are all on top of an image backdrop.

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

Some more of the patterns in the gallery.

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

#cssPatterns #CodePen

@use 'sass:math';

$u: 1px;
$l: 24*$u;
$g: 1.5*$l;
$d: 2*$g;
$s: $l + 2*$g + 3*$d;
$c: #224 #66b #ace;
$b: math.sqrt(2)*$u;

html {
--g: conic-gradient(at #{$s - $g $g}, #{nth($c, 3)} var(--p));
--p: 25%, #0000 0%;
--l:
#{nth($c, 3)} 0 #{$g},
#0000 0 #{$d + $g},
#{nth($c, 3)} 0 #{$d + 2*$g},
#0000 0;
background:
var(--g) $d + 2*$g $d + $g,
var(--g) $g $d + $g,
var(--g) $d + 2*$g 0,
var(--g) $g 0,
conic-gradient(at $s - $l $l, nth($c, 1) var(--p)) -$d #{-($d + $l)},
conic-gradient(at $l $s - $l, nth($c, 2) var(--p)) -($d + $l) #{-$d},
repeating-linear-gradient(-45deg, nth($c, 1) 0 $b, #0000 0 2*$b),
linear-gradient(var(--l)),
linear-gradient(90deg, var(--l))
nth($c, 2);
background-size: $s $s;
background-blend-mode: normal, lighten
}

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 👀 🤫

#cssPatterns

Rhombic tiling of the plain. Each rhombus has a light gold to blue gradient, but whether it's from top to bottom or from bottom to top varies depending on the row. All rows with the same vertical alignment have the same gradient direction, while those offset by half a rhombus width have the gradient in the other direction. There are also thin lines of the same light gold used to delimit the rhombic edges.

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.

#cssPatterns #CodePen

Rhombic plane tiling in eight colours. Every row is in one colour and this repeats every eight rows.

@use 'sass:math';

$w: 4em;
$a: 60deg;
$h: $w*math.tan(90deg - .5*$a);

html {
--s: from #{.5*$a},;
--l: 0% #{180deg - $a}, #0000 0% 50%;
background:
repeating-conic-gradient(var(--s) #b65333 var(--l)),
repeating-conic-gradient(var(--s) #f4bb3a var(--l)) 0 $h,
repeating-conic-gradient(var(--s) #ed7b32 var(--l)) 0 2*$h,
repeating-conic-gradient(var(--s) #966459 var(--l)) 0 3*$h,
linear-gradient(#f19b36 25%, #824739 0 50%, #fadc9c 0 75%, #d6552b 0);
background-size: $w 4*$h
}

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.

#cssPatterns

The geometry of three targets, two (black middle, centered at B & C) on the same row, one (white middle, centered at A) offset by half a background-size in both directions, thus touching both of them diagonally.

ABC is a right isosceles triangle whose catheti are twice a target's outer radius, that is AB = AC = 2·r. This makes the hypotenuse BC 2·r√2 (this is also the background-size) and the gap between the two targets on the same row:
g = 2·r√2 - 2·r = 2·r·(√2 - 1)

The two grids of targets (one with targets that are black in the middle, the other with targets that are white in the middle), offset by half a background-size and touching diagonally.

Blending the two target grids from before with a conic-gradient-created chessboard whose squares are either blue or transparent using the lighten blend mode.

Blending with transparent is like not blending at all, so nothing happens there.

White is lighter than everything, so wherever one of the layer has white, the result is also white.

Everything is lighter than black, so wherever one of the layers has black, the result is the other layer, blue in this case, just to see better the effect.

The final result that makes it look like the targets are connected in a stair-like way.

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)

#CodePen #cssPatterns

Screenshot of rows of diagonal bloat gradient rotated squares hanging from green arches, in positions offset by half an arch for every row.

$d: 6.25em;
$o: .5*$d;
$l: .375em;
$y: .2*$d;

html {
--l: #ef2d56, #ed7d3a, #ef2d56 25%, transparent 0%;
--g0:
radial-gradient(50% 50% at 50% 100%,
transparent calc(100% - #{$l} + -1px),
#8cd867 calc(100% - #{$l}), #2fbf71 100%,
transparent calc(100% + 1px));
--g1: conic-gradient(from -45deg at 50% #{$y}, var(--l));
--g2: conic-gradient(from 135deg at 50% #{$d - $y}, var(--l));
--p1: #{$o $l + $y};
--p2: #{0 $o + $l + $y};
background:
var(--g2) var(--p2),
var(--g1) var(--p2),
var(--g2) var(--p1),
var(--g1) var(--p1),
var(--g0),
var(--g0) $o $o #363537;
background-size: $d $d
}

And here's another little pure CSS pattern: https://codepen.io/thebabydino/pen/gOKoGwB

This is a more straightforward one and I really wish I could figure out a way of doing it with fewer gradients...

Inspiration: https://www.shutterstock.com/image-vector/tile-seamless-vector-pattern-dots-squares-452213596

For reference: background patterns, simplified by conic gradients https://css-tricks.com/background-patterns-simplified-by-conic-gradients/

#css #cssPatterns #CodePen

Pattern with grey braid of squares rotated at 45°, intertwined with another such braid of such white squares, both with gold dots on top. In between such groups, there's a gold zigzag with grey dots in between the edges of adjacent rotated white squares above and white dots in between the edges of adjacent rotated grey squares below.

(if you're a $5 patron on Patreon, you may have already seen this one + the thought process behind)

🐝
Little pure CSS pattern:
https://codepen.io/thebabydino/pen/KKeQvaR

Inspiration: https://www.shutterstock.com/image-vector/abstract-pattern-geometric-wallpaper-background-illustration-329696195

Can you guess how it was made before checking the code? Can you reduce the number of gradients? Let me know! 👇

#css #CodePen #cssPatterns

Screenshot of pattern. Consists of vertical lines splitting into two halves, one black and one golden (hence the bee pattern name) discs distributed on a diagonal grid. The discs along the same vertical line alternate in their order of the two halves - if for one black is on the left and gold is on the right, it's the opposite for that below and for that above.

$d: 5em;

html {
background:
linear-gradient(90deg, #ddd 2px, transparent 0) calc(.5*#{$d} + -1px),
repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%),
radial-gradient(closest-side,
transparent calc(100% - 1px), #fff),
repeating-conic-gradient(#201e1f 0% 25%, #f3e60e 0% 50%) .5*$d 0;
background-size: $d, 2*$d 2*$d, $d $d, 2*$d 4*$d;
background-blend-mode: darken, normal, normal
}

Here's another quick & fun pure CSS pattern: tablets (not in the sense you might first think of, but 💊)
https://codepen.io/thebabydino/pen/yLEvaeE

Inspiration https://www.shutterstock.com/image-vector/seamless-pattern-yellowwhite-circles-on-black-213866098

Can you guess how it was made before checking the code? Can you reduce the number of gradients? Let me know! 👇

#css #CodePen #cssPatterns

Diagonal grid of discs, with an alternating horizontal/ vertical split between yellowish and a dirty white.

The Sass code generating the pattern:

$d: 8em;
$c: #160c28;

html {
background:
repeating-conic-gradient(transparent 0% 25%, $c 0% 50%)
.25*$d .25*$d,
radial-gradient(closest-side,
transparent calc(100% - 1px), $c) .25*$d .25*$d,
linear-gradient(135deg, #d1dfd6 50%, #efab48 0);
background-size: $d $d, .5*$d .5*$d
}

First coded this pattern when I started playing with masking - at the time, it involved using a masked pseudo.

Now figured out how to do it with no pseudos! 🥳 https://codepen.io/thebabydino/pen/rNKJBLx

Can you guess how it was made before checking the code? Can you reduce the number of gradients? Let me know! 👇

#css #CodePen #cssPatterns

Screenshot. We have a left to right monochromatic gradient - darker and more vibrant purple on the left, light and more desaturated purple on the right. This gradient is restricted to each rhombus forming a rhombic tiling of the plane.

The Sass code creating the pattern:

@use 'sass:math';

$l: 5em;
$h: $l*math.sqrt(3);
$c: #652f90, #a874d2, #ece0f5;

html {
background:
linear-gradient(90deg, transparent 50%, nth($c, 1) 0, nth($c, 2)),
linear-gradient(90deg, nth($c, 2), nth($c, 3) 50%, transparent 0),
conic-gradient(from -30deg,
transparent 0% 60deg, #000 0% 50%, transparent 0% 240deg, #fff 0%),
linear-gradient(90deg, $c);
background-size: $l $h;
background-blend-mode: lighten, darken, normal
}

🐝
Another little pure CSS pattern:
https://codepen.io/thebabydino/pen/ZERvPEy

Inspiration: https://www.shutterstock.com/image-vector/abstract-geometric-pattern-circles-seamless-vector-1519589078

Can you guess how it was made before checking the code? Can you reduce the number of gradients? Let me know! 👇

#css #CodePen #cssPatterns

Diagonal grid of round balls with a black middle, golden layer and a black outer shell. In the "corner" spaces between them, there are round white balls intersecting the previous ones and blacking out the intersections.

$d: 8em;
$p0: 27%;
$p1: 53%;
$p2: 35%;
$l: .0625*$d;

html {
--l:
#{$p1}, transparent calc(#{$p1} + 1px);
--g0:
radial-gradient(#000 #{$p0}, #fff calc(#{$p0} + 1px) var(--l));
--g1:
radial-gradient(#fff #{$p2}, transparent calc(#{$p2} + 1px));
--g2:
radial-gradient(#ffe313 calc(#{$p1} + -1*#{$l}),
#000 calc(#{$p1} + -1*#{$l} + 1px) var(--l));
background:
var(--g2), var(--g2) .5*$d .5*$d,
var(--g1) .5*$d 0, var(--g1) 0 .5*$d,
var(--g0), var(--g0) .5*$d .5*$d;
background-size: $d $d;
background-blend-mode: darken, darken, difference, difference
}

And another one https://codepen.io/thebabydino/pen/YzvYqWL

#css #cssPatterns #CodePen

$d: 6.25em;

html {
--g:
radial-gradient(closest-side,
#fff calc(100% - 1px), #000);
background:
repeating-conic-gradient(from 45deg,
#fff 0% 25%, #000 0% 50%) .5*$d 0,
linear-gradient(#a1c181 0 0),
var(--g), var(--g) .5*$d .5*$d;
background-size: $d $d;
background-blend-mode: difference, darken
}

Pure CSS pattern https://codepen.io/thebabydino/pen/wvXpMrX

Inspiration: https://shutterstock.com/image-vector/seamless-geometric-pattern-semicircles-dots-white-1625861365

#css #cssPatterns #CodePen

#cssPatterns

Client Info