I'm giving my a linear gradient but in Firefox, even new versions, what I get is something like bars of solid color building the gradient. This is what's in my CSS:
background-color: #d3d3d3;
background-repeat: repeat-x;
background: -moz-linear-gradient(top, rgba(145,145,142,1) 0%, rgba(253,253,253,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#fcfcfc');
background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253));
According to this, it is most unlikely you are facing a version problem. Firefox, as usual, was the first to implement a standards-compliant (no prefix) CSS property (and it has already been 9 versions back).
Try removing the background-repeat property as it is mostly useless for gradients unless you've set a background size. If it solves, I'd recommend posting a bug report on Bugzilla. Does it work well on IE10 and Chrome?
Is anyone aware of a way to change one layer of a multi-layered background using CSS?
I've been searching around but can't find any mention of current, or even proposed future specification. My thinking says there probably wont be, but the net is so vast now I'm sure someone, somewhere, has information or links to discussions along these lines.
The following example would obviously have problems with regard to the order of precedence when applied to different elements:
.building-texture {
background: transparent, url(image/building-side.png);
}
.shade-dark {
background: url(image/shade-dark.png), unchanged;
}
.shade-mid {
background: url(image/shade-mid.png), unchanged;
}
.shade-light {
background: url(image/shade-light.png), unchanged;
}
<div class="building-texture shade-dark"></div>
Obviously there are a number of workarounds for the above, but none are ideal, especially when you start talking about a lot of different 'layer states' and a number of different 'textures':
Initial solutions
combined classes
This is the most optimal of the fallbacks, but gets ridiculous when you start to take vendor prefixes into account and when dealing with more than two layers.
.building-texture-shade-dark {
background: url(image/shade-dark.png), url(image/building-side.png);
}
.building-texture-shade-mid {
background: url(image/shade-mid.png), url(image/building-side.png);
}
.building-texture-shade-light {
background: url(image/shade-light.png), url(image/building-side.png);
}
separate elements
When running through some tests locally, I found that multi-layered backgrounds performed faster than using sub-elements. In fact for most modern browsers, even introducing a simple child (with no background applied) slowed the rendering down quite a bit.
<div class="building-texture">
<div class="shade-dark"></div>
</div>
JavaScript generation
To get over the pain of hand-typing the first option (combined classes), JavaScript could be used to generate the stylesheet. But you still have the awkwardness of the long class names. Plus when you want to change one applied effect of the combined class (e.g. remove shading), you have to script an ability to work out how to do so based on naming convention.
Style property via JavaScript
The other option is to dynamically rewrite the entire background via .style on each element. I haven't tested this, but my head tells me that this will be rather inefficient, as I'm sure the browsers are able to do quite a few optimisations when dealing with preset classes (i.e. by grouping element rendering by classification). Although I could be wrong.
Why...
I'm playing around with CSS 3D transforms (with perspective enabled) and how best to texture/light such structures in a simple and fast manner (example code):
http://pebbl.co.uk/wote/
(source: pebbl.co.uk)
After failing at producing a CSS solution I was happy with, I'm currently heading toward a Canvas-based solution that would pre-build all the textures I may want—along with their different shaded states—which would then generate a cached data URI to be attached as a single layer background. My tests have shown this to be optimal. However, I'd really like to use as many native browser-based solutions as possible, because with canvas there is a lot more code involved, and, because today's browsers are improving so quickly, it seems foolish to reinvent any wheels, engines, or road networks.
Even if it might be deemed that what I'm doing is not a 'proper' use of CSS, in my opinion, each background item is it's own unit—and to me it makes sense that there should be some specified way to modify each unit separately... even if it's way off in the future.
I'd be interested in any answers with links to discussions along these lines.
Unfortunately there is no way to do that in regular CSS. You can only change an entire property, not part of it. Which is why we have separate properties like background-image, background-color to start with. But nothing more fine-grained than that.
As ScottS suggested, pseudo-elements could be a way to go but you will probably have the same problems as multiple separate div elements.
If your main goal is to avoid typing code over and over, a good solution would be to use a CSS preprocessor like SASS. Your SCSS would then be something like this:
$img-side: url("image/building-side.png");
$img-dark: url("image/shade-dark.png");
$img-mid: url("image/shade-mid.png");
$img-light: url("image/shade-light.png");
.building-texture {
background: transparent, $img-side;
}
.shade-dark {
background: $img-dark, $img-side;
}
.shade-mid {
background: $img-mid, $img-side;
}
.shade-light {
background: $img-light, $img-side;
}
It would compile down to the more bulky CSS (with full URL definitions) but you certainly save a lot on development time. SASS can also help you generate the vendor prefixes using mixins (there is also Compass which adds that to SASS).
In fact, there is an upcoming CSS variables spec which you may be able to use in future, however I don't think any browsers support it yet.
Abstract it with Pseudo Elements
I am not aware of any way to "swap" a single background yet. One workaround is based off the "separate elements" technique, but the inner element is a pseudo-element instead. I have no idea about rendering speed. It also has the drawback that it will not work for IE8, as you cannot apply filter to pseudo-elements. However, since you are using the idea in conjunction with CSS3 perspective and such, the IE8 caveat is not an issue for you.
This achieves the abstraction of the texture from the shading. It could even add another layer through an :after pseudo-element, and it still could use multiple backgrounds in each of the three if needed/desired.
Here is the fiddle.
Sample Code:
HTML
<div class="texture"></div>
<div class="texture light"></div>
<div class="texture medium"></div>
<div class="texture dark"></div>
CSS (core)
.texture {
position: relative;
background: url(http://www.dummyimage.com/12x16/ff0000/ffffff.png&text=X++) top left repeat;
}
.light:before,
.medium:before,
.dark:before {
content: '';
position: absolute;
top:0;
right: 0;
bottom:0;
left: 0;
}
.light:before {
background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
}
.medium:before {
background: -moz-linear-gradient(left, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.6)), color-stop(100%,rgba(0,0,0,0.2)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}
.dark:before {
background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.3)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.3) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.3) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.3) 100%);
background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.3) 100%);
}
I would like to get a gradient in CSS (perhaps through Compass) that works in every major browser, including IE7+. Is there an easy way to do this (without writing a lot of code, and without a custom image file)?
I looked at Compass's gradient mixin, but it does not work with Internet Explorer.
Any ideas? (It does not need to be Compass -- I am happy install something else.)
Edit: What I am trying to get is some framework (like Compass?) that generates code like what Blowsie posted that's been tested across browsers. Basically like the Compass gradient mixin I mentioned, but with IE support. (I am a bit wary of just rolling my own SCSS mixin and pasting in blocks like Blowsie's code, because I haven't tested it and do not have the resources to do so.)
I just noticed that the current Compass beta (0.11.beta.6) has support for generating IE gradients in the compass/css3/images module (which supersedes the previous gradient module), so you can generate your gradients with a total of two short commands:
#import "compass/css3/images";
#import "compass/utilities/general/hacks"; /* filter-gradient needs this */
.whatever {
/* IE; docs say this should go first (or better, placed in separate IE-only stylesheet): */
#include filter-gradient(#aaaaaa, #eeeeee);
/* Fallback: */
background: #cccccc;
/* CSS 3 plus vendor prefixes: */
#include background(linear-gradient(top, #aaaaaa, #eeeeee));
}
This generates the following slew of CSS:
.whatever {
*zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
background: #cccccc;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
background: linear-gradient(top, #aaaaaa, #eeeeee);
}
I guess I would have preferred to have the IE and non-IE gradient code in one call, but since IE's DXImageTransform gradient function is pretty limited, that is probably not possible.
The code I use for all browser gradients..
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom:1;
You will need to specify a height or zoom:1 to apply hasLayout to the element for this to work in ie
While gradients are of limited complexity, they're complex enough to require what you would consider "lots of code".
Consider:
starting colour, ending colour and the hexadecimal math required to transition between one and the other
The number of "steps"
The width/height of each step
Since there is no pure CSS way of doing this, it means rendering HTML, one element for each colour/step, without messing up your existing HTML
So, no, without a plug-in that does all of this for you, it would require a bit of code, or an image.
Here's me fiddle:
http://jsfiddle.net/6yU6N/10/
I want to work some CSS magic on the table header:
Rounded corners in upper left and upper right
Gradient color background
Gradient border
Cross-browser compatibility
How can this all be done?
Gradients:
Most modern browsers have implemented these using CSS3 but for Internet Explorer you'll have to use special filters. Since CSS3 is an emerging standard, you have to use browser specific prefixes.
.gradient{
background: -moz-linear-gradient(top, #fff, #eee);
background: -webkit-linear-gradient(top, #fff, #eee);
background: -o-linear-gradient(top, #fff,#eee);
background: linear-gradient(top, #fff, #eee);
/* versions of IE use these */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff',EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eeeeee)";
}
there may be a third approach
keep in mind that you could always use an image with a repeat-x on the background.
Rounded Corners:
Rounded corners are covered by border-radius in most of your modern browsers:
border-radius:5px 5px 0px 0px;
For older versions of Internet Explorer, you'll unfortunately have to do more hackerly things that are probably not worth the time and effort really. http://webdesign.about.com/od/css/a/aa072406.htm is an example I found scanning the web really quickly.
For more stuff, the MDC is usually pretty good in my experience about explaining browser features and their compatibility and alternatives for the other browsers.