: How do so many app menus get that finished textured look? I don't know how to describe it but how do you create that nice textured look with css? Seen in the background: Also seen a bit

@Nimeshi706

List item
Heading




enter preformatted text here



Blockquote
enter link description here
strong text

Vote Up Vote Down

@Bryan765

I like to use this: www.noisetexturegenerator.com/
So I don't even have to go into photoshop ;)

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

Vote Up Vote Down

@Marchetta832

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.

Vote Up Vote Down

@Hamaas979

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:
www.mightymeta.co.uk/css-noise/
This page may also be of interest:
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.
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.

Vote Up Vote Down