User:VladVukicevic/CSS Background Gradient
Scratchpad for a potential moz CSS extension for background gradients.
-moz-background-gradient: horizontal red green;
- horizontal gradient from red to green (left to right)
-moz-background-gradient: vertical red green;
- vertical gradient from red to green (top to bottom)
-moz-background-gradient: 10px 10px 75px 75px red green;
- gradient from (10,10) to (75,75) from red to green; regions before = red, after = green (gradients are always padded). XXX coord spec should maybe be top right bottom left, like normal css
-moz-background-gradient: 10px 75px 75px 10px red,0.1 green,0.5 blue,0.9
- gradient from (10,10) to (75,75) (using TRBL), starting at red at 10%, to green at 50%, to blue at 90%
Maybe instead of just one -moz-background-gradient, which would be the shorthand for only horizontal, vertical, and evenly-spaced color stops, something like:
- -moz-background-gradient-axis: horizontal | vertical | top right bottom left;
- -moz-background-gradient-stops: 0.1 red 0.5 green 0.9 blue;
Interaction with background images... ideally, a background image should be painted over the gradient. However, that makes it harder to use images for fallback for gradients for non-gecko browsers. So maybe...
-moz-background-gradient-rendering: gradient-only | auto;
- if 'auto' (the default), any background color is painted, then any gradient, then any background image. If 'gradient-only', only the gradient is painted.
... or maybe ...
-moz-background-order: color gradient image;
- Specify the background painting order explicitly; omitted elements aren't painted.