CSS3 Multiple Background Images
Tuesday, February 01, 2011 07:15 PM
For the past several weeks, I’ve been working on an iPad project that makes copious use of buttons for navigation. These buttons consist of text, an icon, and a gradient. As my only browser is the iPad’s flavor of Safari, I can use a lot more fun CSS3. I decided to use multiple background images to display the gradient and icons, but have run into some issues that I would like some help with when it comes to the hover state.
According to the CSS3 spec for backgrounds and borders module, the allowed values for background-image are a color, an image, none (the default), or inherit. Now the way multiple backgrounds work is that you list each one in the background-image property in a comma separated list which appear in a descending order of top to bottom visually. You then can use the other background properties to manipulate each one, using the same comma style.
Here’s my problem. When the user hovers (or touches in the iPad case) the button I am changing the color of the gradient. I have a lot of these buttons, each with a unique icon but the same gradients. I would like to declare only once in my CSS what the hover state does. However, it seems that it is impossible to change only the gradient without mentioning the icon as well, as there are two backgrounds per button. By not declaring the icon it is removed on hover. This means that for every unique button, I must have a unique hover rule as well. (As an aside it also means that every button declaration in the CSS requires me to not only specify the unique icon, but to repeat the gradient code as well)
I would like to try to find a way, if possible, to only have to declare the hover state one time for all buttons so that the icon would remain declared automatically from the normal state. I’ve tried “inherit” and that just breaks the rule completely. Has anyone ever tried this and found a method?
Here’s a quick little page to demonstrate what I am talking about (WebKit or Firefox). Please leave any ideas or thoughts in the comments. Thank you!
Comments
Cesar Figueroa said
Since background images aren’t inherited, according to the CSS3 spec—gradients count as background images—your desired effect is impossible without additional markup. One thing you can do is combine all the properties into a shorthand “background” property, convert your colors from rgb to hex and save a couple of bytes. For example:
a {
background:rgb(228, 248, 232); /* For browsers that do not support multiple background images */
background:url(‘headerKoru.jpg’) no-repeat 10px 50%, -moz-linear-gradient(rgb(228, 248, 232), rgb(225, 243, 187));
background:url(‘headerKoru.jpg’) no-repeat 10px 50%, -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(228, 248, 232)), to(rgb(225, 243, 187)));
background:url(‘headerKoru.jpg’) no-repeat 10px 50%, -webkit-linear-gradient(rgb(228, 248, 232), rgb(225, 243, 187)); /* Future safari gradient syntax */
}
On 02/02 at 02:50 AM