- This topic is empty.
May 9, 2011 at 6:05 pm #77012
Lea’s Response: @ItsChrisBurton I’ve thought about it, but can’t find a way to do it that has advantages over an image.
@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.
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
cheers & good luck further on :)May 10, 2011 at 8:36 am #76953
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.May 13, 2011 at 11:33 am #76328James_BrocklehurstMember
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…May 13, 2011 at 11:40 am #76329
Don’t know if anyone is still listening here but I’m trying this again using a data uri instead of gradients:
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)July 18, 2011 at 11:01 am #83555
What is the benefit of this compared to using canvas which usually keeps it under 2K on the body element?August 3, 2011 at 11:05 am #84399
@ 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.
Now got it down to 2K. Have a post about it here http://www.mightymeta.co.uk/css-noise/August 4, 2011 at 9:31 pm #84503joshuanhibbertMember
@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).August 25, 2011 at 8:12 am #85682
@joshuanhibbert. Agreeed, the source image I’ve used isn’t perfect. I’ll give yours a try, thanks!August 25, 2011 at 2:14 pm #85719
Just an fyi, the pattern seems off.May 8, 2013 at 2:32 pm #134470WillPageMember
So well played @mightymeta. I am officially inspired! Love the result on the example image (teacup)
- The forum ‘CSS’ is closed to new topics and replies.