diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss index 45ec3317..bec19a89 100644 --- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss +++ b/frameworks/compass/stylesheets/compass/css3/_gradient.scss @@ -1,30 +1,30 @@ @import "shared"; -// This yields a linear gradient spanning from top to bottom +// The linear gradient mixin works best across browsers if you use percentage-based color stops. // +// Examples: +// +// // 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 -// +// // 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 -// +// // 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 -// +// // 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 -// +// // 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%)) // -// This yields a linear gradient on top of a background image -// +// // This yields a background image on top of the gradient; requires an image +// // with an alpha-layer. // +linear-gradient(color_stops(white,black), top, image-url('noise.png')) +// // Browsers Supported: // // - Chrome @@ -52,20 +52,24 @@ background-image: #{$background}linear-gradient($start, $color-stops); } -// Due to limitation's of webkit, the radial gradient mixin works best if you use +// Because of webkit's limitations, 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)) -// // a background image on top of the gradient -// // Requires an image with an alpha-layer. +// +// // A background image on top of a 100px radius gradient; requires an image +// // with an alpha-layer. // +radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png"))) +// // Browsers Supported: // // - Chrome