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 would like to render/generate a CSS pattern that looks something like green poker table felt or AstroTurf. Is this possible?

Alternatively, would an image-based pattern be a better solution? If so, why?

share|improve this question
1  
CSS is not a graphics program like Illustrator. While it probably can be done, the effort would be better put to using anything else. Another question would be the cost in computing time to generate the image each time and whether it would slow the page down. –  Rob Dec 24 '13 at 15:55
    
possible duplicate of Textures - How to use in Web Design –  Alex Blackwood Dec 24 '13 at 16:12
add comment

2 Answers 2

up vote 2 down vote accepted

No. Not without the use of images.

CSS offers solid color fills and gradient fills. It does not offer texture fills.

With CSS filters you can.... blur, greyscale, sepia tone.... adjust brightness, contrast, hue, saturation, opacity .... add a drop shadow or invert the image. Be aware CSS filters are only supported in most recent browsers and fail in older versions.

That is the extent of CSS image capabilities.

If it were me, I'd create a transparent pattern tile (png) to use as a background image over a solid CSS color fill. This would provide the texture while retaining the ability to alter the actual color underneath.

I used this technique to create this background on a web site:

texture

The actual color is a CSS gradient, then on top of that there is a transparent PNG to provide the noise or texture effect. This allows the png to remain very, very small in terms of file size. In addition, I can alter the base color easily with one CSS selector.

share|improve this answer
add comment

Technically, yes you can. Here is a (not very stylish) Fiddle.

Here is where I got it from. (the fiddle was just me testing).

Here is Patternify - not very stylish yet, but just to get the point across.

Simurais playground.

Similar things are often used in progress-bars, but they will always have fall-backs for non-css3 browsers.

enter image description here

Beware: Pure CSS3 background patterns are not widely supported. But you could always make one, and have a fall-back on a pattern based on the traditional technique of using tiles. And with JS you can do all sorts of magic.

share|improve this answer
    
Thanks for the examples. I also found this gallery while I was looking for options. –  Micah - ps I love you Dec 25 '13 at 20:29
    
good - that was the first link in my answer:-) It will be fiddly to make, but it is technically possible. –  Random O'Reilly Dec 25 '13 at 20:31
    
Very interesting and render taxing :) Should note too... "Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+" and that patternify link simply generates an image as base 64 data URI You can do that with any image. It's just as taxing on page load as a direct image, although it is one less HTTP request. –  Scott Dec 25 '13 at 22:09
    
Yes, first link is basically generating an "image" with css and then repeating. Patternify was more of a sidenote, really. No, it is not widely supported yet, but hey, live on the edge! I would not really be all that worried about http reqs either way. Personally, I would not be too worried about loadtime either. I like living on the sharp CSS edge :-) –  Random O'Reilly Dec 25 '13 at 22:16
add comment

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.