Is there a way to use multiple background sizes with multiple background gradients?

[Historical Forums User]

Hello all. I was joyfully making some beautiful CSS3 buttons the other day when I hit a bit of a snag (uh-oh!). Please, take a ride with me as I tell you my story….

So I was sitting at my computer, minding my own business, creating some awesome-sauce buttons in Illustrator (that I thought I should be able to accomplish with the POWER of CSS3). Then I hopped over to my text editor and started banging out some markup, like so;

Send Form

*KA-POW, YESSSSS!*

Then I lifted my voice to the heavens, praying to the style gods, so that I may be able to create truly divine webkit button styles. Then, IT happened…

I had wanted to create several gradient backgrounds, one of which generated a 45-degree diagonal line pattern. This is when things got hairy. To create this ’45-degree-diagonal-line-pattern-of-glory’ I’d need to declare a background size;

-webkit-background-size: 4px 4px;

However, to my – very limited- (see how humble I am) knowledge you cannot declare a background-size per background gradient. This wrecks my button and is not acceptable. The style gods will destroy me, and my family will be thrown to the streets. Css wizards of css-tricks, I beseech you, is there a way to accomplish this madness?

[Historical Forums User]

Sorry wolfcry911, I read that whole page, and there are no answers to be found. I’m not sure you understood the question.

Making a background pattern using CSS3 requires the use of some kind of background-size property. Right now, if you declare a background-size on an element, ALL of the backgrounds declared (all gradients) are sized accordingly. If I would like a smooth left-to-right gradient at 30% opacity over a diagonal patterned gradient, it is impossible at this point to do so…. which is a bummer. I’m assuming I could use a pseudo element, but I’m unsure if thats the best (only?) way. What is the best way to achieve this?

[Historical Forums User]

I found an article Jonathan Snook published Feb 1st, 2010 that deals with this issue.

http://snook.ca/archives/html_and_css/multiple-bg-css-gradients

I also created an example of what I wanted to accomplish and published it on jsfiddle.
I only coded this for webkit browsers, so it will probably make your eyes bleed in any other browser. Also, I didn’t actually code any spectacular hover or active states, though I know they would look spectacular. I’m creating a bunch of buttons like these for a ‘button factory’ project. For now, have fun with this.

http://jsfiddle.net/jXBN6/41/

P.S. – If you are fortunate enough to have Trade Gothic installed, this will look great. Everyone else, you’re stuck with Yanone Kaffeesatz from the Google Font Directory.

P.S.S. – If anyone animates this button, go ahead and post a followup!

[Historical Forums User]

Judging from the comments made (none) I’m more excited about this than most. Anyways, I gave my little button an active transition. Looks glorious in webkit browsers…

http://jsfiddle.net/jXBN6/44/

[chrisburton]

Here’s a few I made.

CSS3 Patterns:

• Diagonal Graph – Coyier slightly altered this (Original Here)
• Criss Cross Tablecloth
• Criss Cross Tablecloth – V2 (Large)

[Author]

Posts