Compass::InlineGradient

It’s a alpha release. Next week (22 - 28 July 2013) I will release beta version with:

  • Full linear gradient support (now don’t work as native angles like 23deg, 58deg and other customs)

  • Multiple gradients (like multiple backgrounds)

  • Radial gradient support

  • W3C closest-side syntax

This is a compass/sass extension for inline(data uri) linear gradients with already image optimization. It converts css linear gradient syntax to data uri (base64) background-image.

Why use base64 background-images not native gradient?

Native css gradients have a lot of prefixes, you must use filters for IE, IE9 and Opera needs inline svg gradients. Just look at this terrible default example.

But data uri (base64) has a excellent support. It’s just don’t work in IE 7-, and work fine in other browsers: desktop, mobile, everywhere. You will have less code and more browser support. Use it!

N.B. inline-gradient function already using TinyPNG API for image optimization.

P.S. I need this function more than anyone :) Stay online with me!

Installation

Add this line to your application’s Gemfile:

gem 'compass-inline-gradient'

And then execute:

$ bundle

Or install it yourself as:

$ gem install compass-inline-gradient

Usage

See example/example.html for more information and ready examples.

Code examples:

some-css-selector {
    background-image: inline-gradient(linear, 200, 100, 90deg, red 0, green 100px, blue 200px);
}

some-css-selector {
    background-image: inline-gradient(linear, 200, 70, to left, red 0%, orange 16.67%, yellow 33.34%, green 50%, lightskyblue 66.67%, blue 83.33%, violet 100%);
}

Contributing

  1. Fork it

  2. Create your feature branch (‘git checkout -b my-new-feature`)

  3. Commit your changes (‘git commit -am ’Add some feature’‘)

  4. Push to the branch (‘git push origin my-new-feature`)

  5. Create new Pull Request

Other

Add issues, I always answer.