Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I don't know how to describe it but how do you create that nice textured look with css?

Seen in the background:

http://www.land-of-web.com/wp-content/uploads/2012/01/1475.jpg

Also seen a bit on the left hand dark navigation of:

http://www.land-of-web.com/wp-content/uploads/2012/01/1494.jpg

Thanks for your help

Follow up:

1) Is one method (css/or whole image) better suited for mobile?

2) Could you link to a quality source for these small bitmaps?

3) Is the a pure css method of achieving this noise effect?

Last Follow Up:

1a) You mentioned the CSS transformations have a much heavier toll on RAM. Is this a 1 off price to pay when the layout is initially rendered? (assuming no zooming or animation of the div) Or will it continue to to be a drain on system resources as long as it is present?

1b) This is a hard one to answer, in a low ram environment how cautious should I be about adding another div to my project. (assuming no crazy css transformation or excessive box shadowing) Should I think that every div makes an impact? or every 10? or 100?

share|improve this question
2  
possible duplicate of Create a "pixeled" Background –  Scott Dec 8 '12 at 18:06
    
Thanks, but I am asking how to do it in CSS. If possible? Is that the term for it by the way, pixeled? –  Emin Israfil Dec 9 '12 at 0:59
    
It's not possible with only CSS. You can create color and gradients with CSS but you need an image for the texture, thus the duplicate. –  Scott Dec 9 '12 at 2:23

4 Answers 4

up vote 2 down vote accepted

Textures are typically some kind of noise or bitmap. There's a variety of ways to achieve the effect in Photoshop, Illustrator and using CSS.

If you want to keep things to CSS as much as possible, then you'll probably still have to use a bitmap images and use the background-image (or background) property as part of your element style. The texture image may not need to be too big, because you can repeat it horizontally and vertically, and use it in conjunction with other CSS properties.

If you'd like a texture or noise as part of a gradient, then you're almost always better off just baking it into a bitmap image. Again, it could be tiled horizontally or vertically, so you may only need a ~10px wide image.

Btw, both the examples you've posted look like they're built in Photoshop or something similar, not CSS (I could be wrong though — do you have links to the source?).


Is one method (css/or whole image) better suited for mobile?

That's actually a fairly difficult question to answer, because there's many factors at play. Images will typically be larger in file size, but render faster. CSS can be incredibly slow and take up more ram if you have many shadow and inner effects. But, CSS scales as you zoom in, which means things get rerendered at size. That's great news, until you zoom in really far and MobileSafari crashes because it's using too much RAM (happens all the time with SVGs on iOS).

CSS pros: * Rerenders at size as you zoom in on MobileSafari. * Can be smaller (in terms of file size), which means it'll download faster over 3G etc.

CSS cons: * Can take up a lot more RAM and is more prone to crash browsers. * Can be a hassle to design (creation is often less visual than creating images). * Requires support in browsers for certain features. * Less control over rendering (gradient dithering etc).

Image pros: * Total control over how things look. * Images always look the same, because they're prerendered. * Far less likely to crash browsers due to memory usage.

Image cons: * Extra work and CSS required if you want to support higher DPI displays (usually two sets of images). * Typically slower to download, because files are bigger.

Could you link to a quality source for these small bitmaps?

If you just want some noise, you can create a Photoshop document and apply the noise filter. There's a few different ways you could make it work, but it'll depend on the exact situation you're after. You may wish to create a white Photoshop document, fill it with a lot of noise (Filter > Noise > Add Noise), then make the layer mostly transparent (5% opacity?), and save for web. That way it can be applied on top of another colour and it'll add texture.

Is there a pure CSS method of achieving this noise effect?

Nope. Noise isn't part of the CSS spec. You can embed images into your CSS file though. Here's an example of that:

http://www.mightymeta.co.uk/css-noise/

This page may also be of interest:

http://lea.verou.me/css3patterns/

There's a few ways to use images that can stretch to different widths and heights, repeating middle sections. CSS3's border-image is worth being familiar with — it can let you create fast, flexible divs and buttons that are styled with images.

http://css-tricks.com/understanding-border-image/


You mentioned the CSS transformations have a much heavier toll on RAM. Is this a 1 off price to pay when the layout is initially rendered?

Elements drawn in CSS often need lots of buffers, compositing and masking (shadows, inset shadows, gradients, rounded corners etc). These are typically only done once, but it seems like things can be redrawn if they go off screen and come back on (if the user scrolls or if the divs move). It's probably not a simple question to answer, and the results may change from browser to browser.

(I assume you're just talking about elements created in CSS, rather than the actual CSS transform property, which is something different. Slightly related: I've noticed that CSS transform and CSS animation typically doesn't rerender, meaning it's fast, doesn't use more RAM and can pixelate if scaled up too much.)

This is a hard one to answer, in a low ram environment how cautious should I be about adding another div to my project.

You should probably be fine. :) My comments about low memory relate to zooming all the way in on web pages with a few big CSS elements or SVG (vector) images on Retina device. We have a simple website with some very simple SVGs and zooming in crashes almost every time on an iPad.

(assuming no crazy css transformation or excessive box shadowing) Should I think that every div makes an impact? or every 10? or 100?

box-shadow can have a huge impact on performance. Be very careful with it, especially on large elements. You're probably going to have to do your own testing when it comes to performance. Adding another 10 divs shouldn't have much impact, but it depends what's in them, how big they are and how they're styled.

Slightly related: Here's a great talk on CSS performance tuning.

A talk on some problems solved related to CSS Performance at GitHub. The talk was given at CSS Dev Conference in Honolulu, HI 2012.

share|improve this answer
    
You're right, they are PSD(land-of-web.com/resources/…). I thought I'd ask a follow up since I have an intelligent person on the line :) –  Emin Israfil Dec 9 '12 at 1:22
    
Added answers above. :) –  Marc Edwards Dec 9 '12 at 4:51
    
That was a classy answer. You sir are a gentlemen, not some bogan from frannie. (I have nothing against bogans or people from Frankston, I use to live in Melbourne myself :] ) Asked one last follow up above to make it the best question/response SE has ever seen, if you have the energy –  Emin Israfil Dec 9 '12 at 8:39
    
Ha. No probs. Added some extra info. Also, nothing wrong with Franga, although that's not where I'm from. :D –  Marc Edwards Dec 9 '12 at 9:33

The closest I have come to a pure css method is creating a semi-transparent grain tile (PNG). This way the background color can be changed via css (e.g. a frontend color toggle) and the color always looks grainy in the same way. No need to go back to Photoshop for new colors or shapes.

It has its limitations but I must say it works quite nicely.

share|improve this answer

I like to use this: http://www.noisetexturegenerator.com/

So I don't even have to go into photoshop ;)

CSS: {background: url(whatever.png) repeat repeat; }

share|improve this answer
  • List item

    Heading


enter preformatted text here

Blockquote enter link description here strong text

share|improve this answer
1  
How does this answer the question? Please explain! BTW: Welcome to GD.SE! –  Kurt Oct 25 at 11:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.