github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Docs: improved CSS3/Gradient

Browse Source
This commit is contained in:
Irina Dumitrascu 2010-11-05 20:41:33 -04:00 committed by Chris Eppstein
parent 257c57cb53
commit 393ed03fcd
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frameworks/compass/stylesheets/compass/css3/_gradient.scss
View File

@ -1,30 +1,30 @@
@import "shared"; @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)) // +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) // +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) // +linear-gradient(color-stops(white, black), left)
// //
// This yields a linear gradient starting at white passing // // This yields a linear gradient starting at white passing
// thru blue at 33% down and then to black // // thru blue at 33% down and then to black
//
// +linear-gradient(color-stops(white, blue 33%, black)) // +linear-gradient(color-stops(white, blue 33%, black))
// //
// This yields a linear gradient starting at white passing // // This yields a linear gradient starting at white passing
// thru blue at 33% down and then to black at 67% until the end // // thru blue at 33% down and then to black at 67% until the end
//
// +linear-gradient(color-stops(white, blue 33%, black 67%)) // +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')) // +linear-gradient(color_stops(white,black), top, image-url('noise.png'))
//
// Browsers Supported: // Browsers Supported:
// //
// - Chrome // - Chrome
@ -52,20 +52,24 @@
background-image: #{$background}linear-gradient($start, $color-stops); 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. // pixel-based color stops.
// //
// Examples: // Examples:
// //
// // Defaults to a centered, 100px radius gradient // // Defaults to a centered, 100px radius gradient
// +radial-gradient(color-stops(#c00, #00c)) // +radial-gradient(color-stops(#c00, #00c))
//
// // 100px radius gradient in the top left corner // // 100px radius gradient in the top left corner
// +radial-gradient(color-stops(#c00, #00c), top left) // +radial-gradient(color-stops(#c00, #00c), top left)
//
// // Three colors, ending at 50px and passing thru #fff at 25px // // Three colors, ending at 50px and passing thru #fff at 25px
// +radial-gradient(color-stops(#c00, #fff, #00c 50px)) // +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"))) // +radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png")))
//
// Browsers Supported: // Browsers Supported:
// //
// - Chrome // - Chrome