Hi, I'm experimenting with generating noise on elements using CSS gradients. Haven't quite found a satisfactory solution (it may not be possible?) but here is where I am at so far:
The CSS is quite repetitive and therefore unwieldy. Am applying the cicada principle to try and emulate random placement of dots, but it tends to create noticeable waves.
Works best in WebKit. FF3.6+ kind of works too, but their implementation of gradients is not as pleasing..
Would like to pick people's brains to see if a better solution can be found?
I meant CSS markup. I tweeted her, waiting for a response to see if she's tried it. I know this past week she complained about seeing noise everywhere so probably not.
Using the cicada principle you can fake randomness. If you take a look at my example, it's almost there, just needs a bit of extra something to prevent the vague patterning effect.
Lea's Response:@ItsChrisBurton That's exactly the no-go way I had in mind. 42 gradients, 7KB and it's still not nice. Totally not worth it. ______
I don't believe we have to stick to png overlay because there is a way to create this effect using canvas and javascript. @james_brocklehurst, Although Lea might be right, I believe your version would work better applied to the body instead of a div.
can't help you with the feature-fascination problem you are facing here, but I feel a strong urge to write in the following:
a) noise is out, because it's in b) does anyone else see the parallel to 10 or so years back when web developers were figuring out all this cool stuff that required the mandatory "best viewed in..." clause? c) tbh, the css way to do this is... background-repeat, probably takes less bytes than any css-gradient code :P
What does current trends have to do with this discussion? I think the main focus here is the possibility of creating noise with CSS and if anyone has anything to bring to the table to further progress the situation.
Looks like this one is a no-go :( Was hoping someone would present a 'eureka' solution but never mind. Will check back from time to time just in case...
I still think it's possible but with enormous amounts of CSS markup that would have too big of a file size to alternatively switch from using javascript and canvas or images.
@ ChristopherBurton. It doesn't require extra markup, doesn't require extra HTTP requests to external JS files, doesn't require support for canvas tag, will work without JS enabled.
@mightymeta Great post, I have been using data URI's for a while now, but yours is about half the weight of mine. Thanks!
Have you thought about creating a noise pattern that is mostly transparent, I notice with yours it increases the shade quite a bit. You can see an example of what I am talking about here: http://jsfiddle.net/sl1dr/bZNWz/ (feel free to use that png).
http://jsfiddle.net/mightymeta/B2EFG/
The CSS is quite repetitive and therefore unwieldy. Am applying the cicada principle to try and emulate random placement of dots, but it tends to create noticeable waves.
Works best in WebKit. FF3.6+ kind of works too, but their implementation of gradients is not as pleasing..
Would like to pick people's brains to see if a better solution can be found?
Edit: wrote too soon
Doesn't need a lot of markup, but pretty heavy on the CSS properties, not so good for performance...
i'd love to be proven wrong though.
Using the cicada principle you can fake randomness. If you take a look at my example, it's almost there, just needs a bit of extra something to prevent the vague patterning effect.
Any mathematicians in the house?
@LeaVerou Why I asked is because a forum member on @real_CSS_Tricks is trying to create this effect. http://jsfiddle.net/mightymeta/B2EFG/
Lea's Response: @ItsChrisBurton That's exactly the no-go way I had in mind. 42 gradients, 7KB and it's still not nice. Totally not worth it.
______
I don't believe we have to stick to png overlay because there is a way to create this effect using canvas and javascript. @james_brocklehurst, Although Lea might be right, I believe your version would work better applied to the body instead of a div.
a) noise is out, because it's in
b) does anyone else see the parallel to 10 or so years back when web developers were figuring out all this cool stuff that required the mandatory "best viewed in..." clause?
c) tbh, the css way to do this is... background-repeat, probably takes less bytes than any css-gradient code :P
cheers & good luck further on :)
http://www.mightymeta.co.uk/demos/css-noise/
View the source to see what I did.
Still too big and clumsy (code weighs in at just under 4K) but determined to get it to about half of that.
Benefits are no need for extra http requests external image links, can overlay it over anything by simply adding a class, plus will tile indefinitely.
Theoretically the concept should work for other repeating textures too!
(James Brocklehurst)
Now got it down to 2K. Have a post about it here http://www.mightymeta.co.uk/css-noise/
Have you thought about creating a noise pattern that is mostly transparent, I notice with yours it increases the shade quite a bit. You can see an example of what I am talking about here: http://jsfiddle.net/sl1dr/bZNWz/ (feel free to use that png).
So well played @mightymeta. I am officially inspired! Love the result on the example image (teacup)