diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.sass b/frameworks/compass/stylesheets/compass/css3/_gradient.sass index f4eafc92..730175a7 100644 --- a/frameworks/compass/stylesheets/compass/css3/_gradient.sass +++ b/frameworks/compass/stylesheets/compass/css3/_gradient.sass @@ -1,30 +1,31 @@ -// This yields a linear gradient spanning from top to bottom // -// +linear-gradient(color_stops(white, black)) -// -// This yields a linear gradient spanning from bottom to top -// -// +linear-gradient(color_stops(white, black), "bottom") -// -// This yields a linear gradient spanning from left to right -// -// +linear-gradient(color_stops(white, black), "left") -// -// This yields a linear gradient starting at white passing -// thru blue at 33% down and then to black -// -// +linear-gradient(color_stops(white, blue 33%, black)) -// -// This yields a linear gradient starting at white passing -// thru blue at 33% down and then to black at 67% until the end -// -// +linear-gradient(color_stops(white, blue 33%, black 67%)) -// -// Browsers Supported: -// -// - Chrome -// - Safari -// - Firefox 3.6 + This yields a linear gradient spanning from top to bottom + + +linear-gradient(color_stops(white, black)) + + This yields a linear gradient spanning from bottom to top + + +linear-gradient(color_stops(white, black), "bottom") + + This yields a linear gradient spanning from left to right + + +linear-gradient(color_stops(white, black), "left") + + This yields a linear gradient starting at white passing + thru blue at 33% down and then to black + + +linear-gradient(color_stops(white, blue 33%, black)) + + This yields a linear gradient starting at white passing + thru blue at 33% down and then to black at 67% until the end + + +linear-gradient(color_stops(white, blue 33%, black 67%)) + + Browsers Supported: + + - Chrome + - Safari + - Firefox 3.6 =linear-gradient(!color_stops, !start = "top") // Firefox's gradient api is nice. @@ -33,23 +34,24 @@ background-image: -webkit-gradient(linear, #{grad_point(!start)}, #{grad_point(!end)}, #{grad_color_stops(!color_stops)}) background-image: -moz-linear-gradient(#{!start}, #{!color_stops}) -// Due to limitation's of webkit, the radial gradient mixin works best if you use -// pixel-based color stops. -// -// Examples: -// -// // Defaults to a centered, 100px radius gradient -// +radial-gradient(color_stops(#c00, #00c)) -// // 100px radius gradient in the top left corner -// +radial-gradient(color_stops(#c00, #00c), "top left") -// // Three colors, ending at 50px and passing thru #fff at 25px -// +radial-gradient(color_stops(#c00, #fff, #00c 50px)) // -// Browsers Supported: -// -// - Chrome -// - Safari -// - Firefox 3.6 + Due to limitation's of webkit, the radial gradient mixin works best if you use + pixel-based color stops. + + Examples: + + // Defaults to a centered, 100px radius gradient + +radial-gradient(color_stops(#c00, #00c)) + // 100px radius gradient in the top left corner + +radial-gradient(color_stops(#c00, #00c), "top left") + // Three colors, ending at 50px and passing thru #fff at 25px + +radial-gradient(color_stops(#c00, #fff, #00c 50px)) + + Browsers Supported: + + - Chrome + - Safari + - Firefox 3.6 =radial-gradient(!color_stops, !center_position = "center center") !end_pos = grad_end_position(!color_stops, true)