Mastodawn

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

Ana Tudor 🐯May 10

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

Pure CSS pattern

[Inspiration](https://www.shutterstock.com/image-vector/seamless-geometric-pattern-color-ornament-2128663697). --- If the work I've been putting out ...

Ana Tudor 🐯May 1

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

CSS gradient checkerboard pattern

I want to create a checkerboard pattern using gradients. I've found an example and modified it to my needs, however it only works with -moz prefix. When I remove the -moz prefix, the pattern is

Stack Overflow

Show thread

Ana Tudor 🐯Apr 11

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

Simple 1 elem pure CSS card patterns

[See me code this](https://youtu.be/wPIQvB1nFv0) in under 9 minutes. --- If the work I've been putting out for almost 9 years (I started coming up wi...

Ana Tudor 🐯Apr 9

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

1 element bevel cards (pure CSS) - real (semi)transparency inside borders and all that

My take on the [beveled corners + borders problem](https://twitter.com/anatudor/status/1246515163559268360). Also my first demo that's not a fork in 4 ...

Ana Tudor 🐯Mar 19

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

Created for the CodePen challenge. --- If the work I've been putting out since early 2012 has helped you in any way or you just like it and you wish ...

Ana Tudor 🐯Dec 18, 2024

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

Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost

A halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!

Ana Tudor 🐯Dec 4, 2024

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

Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost

Ana Tudor 🐯Nov 25, 2024

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

desaturated & brightened image map for halftone

Desaturating and brightening a background image layer via blending, then using it as a map to get a halftone effect. The how behind a halftone effect, ...

Show thread

Ana Tudor 🐯Nov 13, 2024

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