Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Recreate this pattern with CSS instead of image?

Recreate this pattern with CSS instead of image?

Problem

I came across this pattern online but it's an image and I'd like to avoid using images as decoration as much as possible.

Any ideas on how to Recreate this pattern? (excluding the background texture behind it)

Problem Courtesy of: samayres1992

Solution

Without cross-browsering, but here's the gist of it:

background-color: gray; /* Fallback */
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);

Taken from CSS3 Patterns Gallery. Tweak as needed.

Solution courtesy of: Madara Uchiha

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Recreate this pattern with CSS instead of image?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×