= 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}[http://www.colorzilla.com/gradient-editor/] 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}[tinypng.org] 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
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
== Other
Add issues, I always answer.