Q
Version: 0.12.alpha.3
Source on Github

Compass Gradient

IMPORTANT: This module has been deprecated. See the new images module for the new, more flexible approach to gradients.

Provides mixins to create cross-browser CSS3 gradients.

This file can be imported using: @import "compass/css3/gradient"

Imports

  1. Hacks – Mixins for hacking specific browsers.
  2. Images – Specify linear gradients and radial gradients for many browsers.

Mixins

view source 

=linear-gradient($color-stops, $start: false, $image: false)
  @if $image
    @if $start
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))"
    @else
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))"
  @else
    @else if $start
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$start}, #{$color-stops}))"
    @else
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$color-stops}))"
  @if not $start
    $start: top
  +background-image($image, linear-gradient($start, $color-stops))

@mixin linear-gradient($color-stops, $start: false, $image: false) {
  @if $image {
    @if $start {
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))"; }
    @else {
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))"; } }
  @else {
    @else if $start {
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$start}, #{$color-stops}))"; }
    @else {
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$color-stops}))"; } }
  @if not $start {
    $start: top; }
  @include background-image($image, linear-gradient($start, $color-stops)); }

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
+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%))
// 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
  • Safari
  • Firefox 3.6
  • Opera

@deprecated Use the linear-gradient() function in conjunction with a

        property mixin like `background-image`.
view source 

=radial-gradient($color-stops, $center-position: false, $image: false)
  @if $image
    @if $center-position
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))"
    @else
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))"
  @else
    @else if $center-position
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$center-position}, #{$color-stops}))"
    @else
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$color-stops}))"
  @if not $center-position
    $center-position: center center
  +background-image($image, radial-gradient($center-position, $color-stops))

@mixin radial-gradient($color-stops, $center-position: false, $image: false) {
  @if $image {
    @if $center-position {
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))"; }
    @else {
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))"; } }
  @else {
    @else if $center-position {
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$center-position}, #{$color-stops}))"; }
    @else {
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$color-stops}))"; } }
  @if not $center-position {
    $center-position: center center; }
  @include background-image($image, radial-gradient($center-position, $color-stops)); }

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 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
  • Safari
  • Firefox 3.6
  • Opera

@deprecated Use the radial-gradient() function in conjunction with a

        property mixin like `background-image`.