Grow your CSS skills. Land your dream job.

CSS Noise

  • # May 9, 2011 at 11:27 am

    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:

    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?

    # May 9, 2011 at 11:29 am

    Yep, there is a javascript version

    # May 9, 2011 at 11:30 am

    Yes, I know, this is more a proof of concept, to see if it can be done with CSS.

    # May 9, 2011 at 11:32 am

    I like the idea of it, have you checked Lea Verou’s patterns?

    # May 9, 2011 at 11:33 am

    Yes, that’s what gave me the idea initially, truth be told.

    # May 9, 2011 at 11:35 am

    Here is the gallery. Maybe these could help you better your idea.

    Edit: wrote too soon

    # May 9, 2011 at 11:38 am

    Seems possible but the way you have gone about it makes me think it would take a lot of markup

    # May 9, 2011 at 11:45 am

    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…

    # May 9, 2011 at 11:48 am

    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.

    # May 9, 2011 at 12:47 pm

    Yes I saw that tweet also ha ha!

    # May 9, 2011 at 12:51 pm

    This idea is killing my mind.

    # May 9, 2011 at 2:02 pm

    My attempt didn’t come out so well. http://jsbin.com/ijeva5/edit

    # May 9, 2011 at 3:37 pm

    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.

    # May 9, 2011 at 4:22 pm

    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

    # May 9, 2011 at 5:07 pm

    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?

Viewing 15 posts - 1 through 15 (of 29 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".