3 ms·
I agree! Any tips on how to implement it?
by fouronnes3 3y ago
I agree! Any tips on how to implement it?
- rambambram 3y agoWhat about a background (pattern) that has the noise already in it? I use https://bg.siteorigin.com/ https://bg.siteorigin.com/ often to create subtle backgrounds like the one on https://www.winkeljustitia.nl/ https://www.winkeljustitia.nl/
- fouronnes3 3y agoI was thinking maybe there's a pure CSS way to do it? That seems to be inline with the style of the author's blog.
- rambambram 3y agoPure CSS would be nice indeed.
- ctnicholas 3y agoI saved myself time by reusing a small noise image I'd used before, but you could do it with an SVG pretty easily! https://grainy-gradients.vercel.app/ https://grainy-gradients.vercel.app/
- ChilledTonic 3y agoIt appears his full CSS is as follows: background-image: url(/css/noise.png); background-repeat: repeat; background-size: 182px; filter: brightness(6); opacity: 0.018; In my experimentation with it, I can't quite figure out how he applies the effect to the whole page without it either dissapearing on adjustments to the viewport or affecting the pages text opacity.
- ctnicholas 3y agoTo make it fill the page, you need to make sure it's placed inside an element (with relative positioning) that's height comes from its content. Then give the noise absolute positioning. The noise still overlays the text, it's just not really visible because of the contrast between text and background.