6 ms·

The background noise is a subtle detail I would have never noticed on my own, but it does subconsciously make the blog appeal to me. Content in front of somethi

The background noise is a subtle detail I would have never noticed on my own, but it does subconsciously make the blog appeal to me. Content in front of something that looks like real paper appears more credible than the same content on a flat background.

fouronnes3 3y ago
I agree! Any tips on how to implement it?
- rambambram 3y ago
  What 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 ago
    I 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 ago
      Pure CSS would be nice indeed.
      - ctnicholas 3y ago
        I 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 ago
  It 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 ago
    To 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.
alberth 3y ago
It dramatically reduces readability for me. Not a fan, even though it might look “nice”. (As viewed on an iPhone)
- bitvoid 3y ago
  I thought I was the only one considering the praise it's getting throughout the thread and others saying that they didn't even notice it until it was pointed out in the article. I had to reduce the opacity by at least half for it to not be so distracting. Perhaps the noise doesn't "scale" on mobile as I'm also viewing it on an iPhone and/or is just more apparent in dark mode.
  - ctnicholas 3y ago
    I've just deployed a change to the noise as I saw a screenshot from another user and it looked like an iPhone bug! The noise shouldn't even be noticeable. Is it looking better now?
    - stugrey 3y ago
      My timing was perfect, saw the site, saw the noise bug, read the comments, checked again and it’s fixed (on iPhone at least)
    - alberth 3y ago
      On iPhone, it's more than just the grey background that gets the noise. The noise is being applied to everything on the screen (like buttons, sliders, etc). It might be more readable if the noise was only on the background grey. Just my 2 cents.
    - bitvoid 3y ago
      It's definitely looking better. I can now hop on board with the others in saying that it's a really nice touch.
erosenbe0 3y ago
True. Designer I worked with believes the eyes focus easier on text if there is a small amount of low contrast fuzz surrounding it. I don't know if that is based on science but it seems plausible at least on white backgrounds.
sponaugle 3y ago
I agree.. I was surprised that it made a difference, but on a large screen it makes the text feel more anchored to an actual page, not just sliding on the screen. It may be less effective on a small phone screen where the screen is less of your total view.
ctnicholas 3y ago
100%! I tried to set it at a level where it "feels" right, but you don't realise why.
kokanee 3y ago
I wonder if it looks different on different platforms. My first reaction looking at the site was that it looked super grainy - a lot of the embedded screenshots and interactive snippets are almost too noisy to read. I played with the setting and found that while I do like the aesthetic, it needs to be about half as strong to my eye.
- ctnicholas 3y ago
  Yes! There was a bug on iPhone, though I've fixed it now.

fouronnes3 3y ago

I agree! Any tips on how to implement it?

rambambram 3y ago
What 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 ago
  I 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 ago
    Pure CSS would be nice indeed.
    - ctnicholas 3y ago
      I 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 ago
It 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 ago
  To 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.

alberth 3y ago

It dramatically reduces readability for me. Not a fan, even though it might look “nice”. (As viewed on an iPhone)

bitvoid 3y ago
I thought I was the only one considering the praise it's getting throughout the thread and others saying that they didn't even notice it until it was pointed out in the article. I had to reduce the opacity by at least half for it to not be so distracting. Perhaps the noise doesn't "scale" on mobile as I'm also viewing it on an iPhone and/or is just more apparent in dark mode.
- ctnicholas 3y ago
  I've just deployed a change to the noise as I saw a screenshot from another user and it looked like an iPhone bug! The noise shouldn't even be noticeable. Is it looking better now?
  - stugrey 3y ago
    My timing was perfect, saw the site, saw the noise bug, read the comments, checked again and it’s fixed (on iPhone at least)
  - alberth 3y ago
    On iPhone, it's more than just the grey background that gets the noise. The noise is being applied to everything on the screen (like buttons, sliders, etc). It might be more readable if the noise was only on the background grey. Just my 2 cents.
  - bitvoid 3y ago
    It's definitely looking better. I can now hop on board with the others in saying that it's a really nice touch.

erosenbe0 3y ago

True. Designer I worked with believes the eyes focus easier on text if there is a small amount of low contrast fuzz surrounding it. I don't know if that is based on science but it seems plausible at least on white backgrounds.

sponaugle 3y ago

I agree.. I was surprised that it made a difference, but on a large screen it makes the text feel more anchored to an actual page, not just sliding on the screen. It may be less effective on a small phone screen where the screen is less of your total view.

ctnicholas 3y ago

100%! I tried to set it at a level where it "feels" right, but you don't realise why.

kokanee 3y ago

I wonder if it looks different on different platforms. My first reaction looking at the site was that it looked super grainy - a lot of the embedded screenshots and interactive snippets are almost too noisy to read. I played with the setting and found that while I do like the aesthetic, it needs to be about half as strong to my eye.

ctnicholas 3y ago
Yes! There was a bug on iPhone, though I've fixed it now.