The Lodge is members-only web design and development videos and live help. Log In or Sign Up.
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?
Yes, I know, this is more a proof of concept, to see if it can be done with CSS.
I like the idea of it, have you checked Lea Verou’s patterns?
Yes, that’s what gave me the idea initially, truth be told.
Here is the gallery. Maybe these could help you better your idea.
Edit: wrote too soon
Seems possible but the way you have gone about it makes me think it would take a lot of markup
Thanks anyway for link, a few new ones in there haven’t seen before.
Doesn’t need a lot of markup, but pretty heavy on the CSS properties, not so good for performance…
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.
Yes I saw that tweet also ha ha!
This idea is killing my mind.
My attempt didn’t come out so well. http://jsbin.com/ijeva5/edit
i don’t think you can achieve this through pure css. since you can’t really randomize the dots, it’s always going to end up looking polka-dotty.
i’d love to be proven wrong though.
This would be totally awesome if it could be done in CSS, but I guess for now we have to stick with body:before PNG overlay. lol
Never say never!
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?
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed