anatudor Bot

anatudor Bot , 1 month ago to random

#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.

Pure #CSS #halftone effect in 3 declarations:

✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white

#cssFilter #filter #cssTricks #cssTip #cssTips #tipsAndTricks #code #coding #frontend #wedDev #webDevelpment

A simple step by step visual guide on how to create a pure CSS halftone effect with just 3 declarations! Step 1: Set a grey to white gradient background. Give it a small background-size (by default, this repeats to cover the entire element). This is the pattern part. background: radial-gradient(closest-side, #777, #fff) 0/ 1em 1em Step 2: Add another grey to white gradient layer covering the entire element. This is the map part. Where the map is darker, it will make the pattern thicker. The background declaration is now: background: linear-gradient(90deg, #888, #fff), radial-gradient(closest-side, #777, #fff) 0/ 1em 1em; Step 3: multiply the two background layers. The pattern is now darker where the map is darker than where the map is lighter. This blend mode literally multiplies corresponding channel values for each pair of corresponding pixels from the two layers. Let's say corresponding pixels have rgb(50%,50%,50%) and rgb(20%,20%,20%). The channel values of the resulting pixels are all .5*.2 = .1 (the decimal representation of 50% is .5 and that of 20% is .2), that is, the resulting pixel has rgb(10%,10%,10%). background-blend-mode: multiply; Step 4: contrast() with values >1 pushes darker greys (that is, darker than a 50% grey, which is dead in the middle between black and white) towards black and lighter greys towards white. This creates the halftone pattern. filter: contrast(21)