Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

compass-inline-gradient

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

compass-inline-gradient

  • 0.0.1
  • Rubygems
  • Socket score

Version published
Maintainers
1
Created
Source

= 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

  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.

FAQs

Package last updated on 19 Jul 2013

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc