frontenddeveloping/compass-inline-gradient

Compass/Sass extension to create inline images (base64 hash) from css3 gradients syntax

Compass::InlineGradient¶ ↑

It’s a alpha release. Soon:¶ ↑

• 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.