Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › CSS Noise

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 27 total)
1 2
  • Author
    Posts
  • May 9, 2011 at 11:27 am #32654
    James_Brocklehurst
    Member

    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 #77088
    chrisburton
    Participant

    Yep, there is a javascript version

    May 9, 2011 at 11:30 am #77089
    James_Brocklehurst
    Member

    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 #77090
    chrisburton
    Participant

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

    May 9, 2011 at 11:33 am #77091
    James_Brocklehurst
    Member

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

    May 9, 2011 at 11:35 am #77092
    chrisburton
    Participant

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

    Edit: wrote too soon

    May 9, 2011 at 11:38 am #77084
    chrisburton
    Participant

    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 #77086
    James_Brocklehurst
    Member

    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 #77087
    chrisburton
    Participant

    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 #77068
    James_Brocklehurst
    Member

    Yes I saw that tweet also ha ha!

    May 9, 2011 at 12:51 pm #77070
    chrisburton
    Participant

    This idea is killing my mind.

    May 9, 2011 at 2:02 pm #77044
    chrisburton
    Participant

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

    May 9, 2011 at 3:37 pm #77022
    jimsilverman
    Member

    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 #77024
    cpj238
    Member

    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 #77010
    James_Brocklehurst
    Member

    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?

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 27 total)
1 2
  • The forum ‘CSS’ is closed to new topics and replies.