compass-rgbapng 0.1.1 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +15 -4
- data/lib/rgbapng/functions.rb +12 -12
- data/lib/stylesheets/_rgbapng.scss +15 -9
- metadata +53 -62
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# rgbapng - Compass plugin
|
2
2
|
|
3
|
-
rgbapng is a Compass plugin for providing cross
|
3
|
+
rgbapng is a Compass plugin for providing cross-browser* compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.
|
4
4
|
|
5
5
|
## Installation
|
6
6
|
|
@@ -20,15 +20,16 @@ And then import the mixins to your SASS/SCSS files:
|
|
20
20
|
|
21
21
|
### Configurable variables
|
22
22
|
|
23
|
-
There
|
23
|
+
There are two customzable global variables. This first `$rgbapng_path` defines the path to which your PNG images will be saved. This defaults to `rgbapng` inside your Compass images directory. The second `$rgbapng_px_size` defines the pixel square size of the generated png. This defaults to a 5x5 square.
|
24
24
|
|
25
25
|
$rgbapng_path: 'my_pngs';
|
26
|
+
$rgbapng_px_size: 8;
|
26
27
|
|
27
28
|
### Mixins
|
28
29
|
|
29
30
|
There are two mixins available to you.
|
30
31
|
|
31
|
-
#### rgba-background($color, [$path])
|
32
|
+
#### rgba-background($color, [$path, $pixel])
|
32
33
|
|
33
34
|
Sets the background property to use the RGBA value, falling back to the compiled PNG.
|
34
35
|
|
@@ -39,7 +40,7 @@ Compiles to:
|
|
39
40
|
background: url('/images/rgbapng/000000bf.png?1282127952');
|
40
41
|
background: rgba(0, 0, 0, 0.75);
|
41
42
|
|
42
|
-
#### rgba-background-inline($color)
|
43
|
+
#### rgba-background-inline($color, [$pixel])
|
43
44
|
|
44
45
|
Sets the background property to use the RGBA value, falling back to a base64 encoded image data.
|
45
46
|
|
@@ -61,6 +62,16 @@ There are two `Sass::Script` functions which can be used in your SASS:
|
|
61
62
|
# Returns a String of the base64 encoded image data
|
62
63
|
png_base64(color)
|
63
64
|
|
65
|
+
## * Cross-browser? Really?
|
66
|
+
|
67
|
+
OK, caveat time. When I say "cross-browser", what I really mean is all browsers that either natively support RGBA or support alpha-transparent PNGs. What I don't mean, is IE6. If alpha-transparency in IE6 is important to you, here are some suggestions:
|
68
|
+
|
69
|
+
* Use [DD_BelatedPNG](http://www.dillerdesign.com/experiment/DD_belatedPNG/) JavaScript library to bootstrap PNG support to IE6.
|
70
|
+
* Don't use this plugin at all and instead create your own mixin using [Microsoft's proprietary filters](http://dimox.net/cross-browser-rgba-support/) - just make sure you wash your hands afterwards!
|
71
|
+
* Be a rebel and either forget about IE6 or serve it up a [universal stylesheet](http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css).
|
72
|
+
|
73
|
+
The choice is yours.
|
74
|
+
|
64
75
|
## Credit where it's due
|
65
76
|
|
66
77
|
* The CSS technique used was initially described by Lea Verou in [Bulletproof, cross-browser RGBA backgrounds, today](http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/).
|
data/lib/rgbapng/functions.rb
CHANGED
@@ -7,31 +7,31 @@ require "base64"
|
|
7
7
|
# to which generated PNGs are saved.
|
8
8
|
|
9
9
|
module Sass::Script::Functions
|
10
|
-
|
11
|
-
def png_pixelate(c, dir = "rgbapng")
|
10
|
+
|
11
|
+
def png_pixelate(c, dir = "rgbapng", px = 5)
|
12
12
|
color = ChunkyPNG::Color.rgba(c.red, c.green, c.blue, (c.alpha * 100 * 2.55).round)
|
13
|
-
image = ChunkyPNG::Image.new(
|
13
|
+
image = ChunkyPNG::Image.new(px.to_i, px.to_i, color)
|
14
14
|
dir = dir.is_a?(Sass::Script::String) ? dir.value : dir
|
15
|
-
file = File.join(dir, ChunkyPNG::Color.to_hex(color).gsub(/^#/, "") + ".png")
|
15
|
+
file = File.join(dir, ChunkyPNG::Color.to_hex(color).gsub(/^#/, "") + "-#{ px.to_s }.png")
|
16
16
|
path = File.join(Compass.configuration.images_path, file)
|
17
|
-
|
17
|
+
|
18
18
|
if !File.exists?(path) || options[:force]
|
19
|
-
puts "Writing #{file}"
|
19
|
+
puts "Writing #{file}" unless options[:quiet]
|
20
20
|
[Compass.configuration.images_path, File.join(Compass.configuration.images_path, dir)].each do |d|
|
21
|
-
Dir.mkdir(d) unless File.exists?(d)
|
21
|
+
Dir.mkdir(d) unless File.exists?(d)
|
22
22
|
end
|
23
23
|
image.save(path)
|
24
24
|
end
|
25
|
-
|
25
|
+
|
26
26
|
Sass::Script::String.new(file)
|
27
27
|
end
|
28
28
|
|
29
|
-
def png_base64(c)
|
29
|
+
def png_base64(c, px = 5)
|
30
30
|
color = ChunkyPNG::Color.rgba(c.red, c.green, c.blue, (c.alpha * 100 * 2.55).round)
|
31
|
-
image = ChunkyPNG::Image.new(
|
31
|
+
image = ChunkyPNG::Image.new(px.to_i, px.to_i, color)
|
32
32
|
data = Base64.encode64(image.to_blob).gsub("\n", "")
|
33
|
-
|
33
|
+
|
34
34
|
Sass::Script::String.new("url('data:image/png;base64,#{data}')")
|
35
35
|
end
|
36
|
-
|
36
|
+
|
37
37
|
end
|
@@ -1,17 +1,23 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
rgba-background mixin can now be passed an option $dir variable
|
4
|
-
*/
|
1
|
+
// Mixins are slightly modified from Benjamin Doherty's first implementations: http://gist.github.com/377912
|
2
|
+
// rgba-background mixin can now be passed an option $dir variable
|
5
3
|
|
6
|
-
$rgbapng_path:
|
4
|
+
$rgbapng_path: 'rgbapng' !default;
|
5
|
+
$rgbapng_px_size: 5 !default;
|
7
6
|
|
8
|
-
@mixin rgba-background($color, $dir:$rgbapng_path){
|
9
|
-
background:
|
7
|
+
@mixin rgba-background($color, $dir:$rgbapng_path, $pixel:$rgbapng_px_size){
|
8
|
+
background: rgba-png($color, $dir, $pixel);
|
10
9
|
background: $color;
|
11
10
|
}
|
12
11
|
|
13
|
-
@mixin rgba-background-inline($color){
|
14
|
-
background:
|
12
|
+
@mixin rgba-background-inline($color, $pixel:$rgbapng_px_size){
|
13
|
+
background: rgba-inline($color, $pixel);
|
15
14
|
background: $color;
|
16
15
|
}
|
17
16
|
|
17
|
+
@function rgba-png($color, $dir:$rgbapng_path, $pixel:$rgbapng_px_size) {
|
18
|
+
@return image_url(png_pixelate($color, $dir, $pixel));
|
19
|
+
}
|
20
|
+
|
21
|
+
@function rgba-inline($color, $pixel:$rgbapng_px_size) {
|
22
|
+
@return png_base64($color, $pixel);
|
23
|
+
}
|
metadata
CHANGED
@@ -1,94 +1,85 @@
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass-rgbapng
|
3
|
-
version: !ruby/object:Gem::Version
|
4
|
-
|
5
|
-
|
6
|
-
- 0
|
7
|
-
- 1
|
8
|
-
- 1
|
9
|
-
version: 0.1.1
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.2.1
|
5
|
+
prerelease:
|
10
6
|
platform: ruby
|
11
|
-
authors:
|
7
|
+
authors:
|
12
8
|
- Aaron Russell
|
13
9
|
- Benjamin Doherty
|
14
10
|
autorequire:
|
15
11
|
bindir: bin
|
16
12
|
cert_chain: []
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
dependencies:
|
21
|
-
- !ruby/object:Gem::Dependency
|
13
|
+
date: 2013-06-26 00:00:00.000000000 Z
|
14
|
+
dependencies:
|
15
|
+
- !ruby/object:Gem::Dependency
|
22
16
|
name: compass
|
23
|
-
|
24
|
-
|
25
|
-
requirements:
|
26
|
-
- -
|
27
|
-
- !ruby/object:Gem::Version
|
28
|
-
segments:
|
29
|
-
- 0
|
30
|
-
- 10
|
31
|
-
- 0
|
17
|
+
requirement: !ruby/object:Gem::Requirement
|
18
|
+
none: false
|
19
|
+
requirements:
|
20
|
+
- - ! '>='
|
21
|
+
- !ruby/object:Gem::Version
|
32
22
|
version: 0.10.0
|
33
23
|
type: :runtime
|
34
|
-
version_requirements: *id001
|
35
|
-
- !ruby/object:Gem::Dependency
|
36
|
-
name: chunky_png
|
37
24
|
prerelease: false
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
25
|
+
version_requirements: !ruby/object:Gem::Requirement
|
26
|
+
none: false
|
27
|
+
requirements:
|
28
|
+
- - ! '>='
|
29
|
+
- !ruby/object:Gem::Version
|
30
|
+
version: 0.10.0
|
31
|
+
- !ruby/object:Gem::Dependency
|
32
|
+
name: chunky_png
|
33
|
+
requirement: !ruby/object:Gem::Requirement
|
34
|
+
none: false
|
35
|
+
requirements:
|
36
|
+
- - ! '>='
|
37
|
+
- !ruby/object:Gem::Version
|
46
38
|
version: 0.8.0
|
47
39
|
type: :runtime
|
48
|
-
|
49
|
-
|
40
|
+
prerelease: false
|
41
|
+
version_requirements: !ruby/object:Gem::Requirement
|
42
|
+
none: false
|
43
|
+
requirements:
|
44
|
+
- - ! '>='
|
45
|
+
- !ruby/object:Gem::Version
|
46
|
+
version: 0.8.0
|
47
|
+
description: Compass plugin for providing cross-browser compatible RGBA support by
|
48
|
+
creating transparent PNGs on the fly for browsers that don't support RGBA. Uses
|
49
|
+
the pure Ruby ChunkyPNG library for hassle free install and deployment.
|
50
50
|
email: aaron@gc4.co.uk
|
51
51
|
executables: []
|
52
|
-
|
53
52
|
extensions: []
|
54
|
-
|
55
53
|
extra_rdoc_files: []
|
56
|
-
|
57
|
-
files:
|
54
|
+
files:
|
58
55
|
- LICENSE
|
59
56
|
- README.md
|
60
57
|
- lib/rgbapng/functions.rb
|
61
58
|
- lib/rgbapng.rb
|
62
59
|
- lib/stylesheets/_rgbapng.scss
|
63
|
-
has_rdoc: false
|
64
60
|
homepage: http://github.com/aaronrussell/compass-rgbapng
|
65
61
|
licenses: []
|
66
|
-
|
67
62
|
post_install_message:
|
68
63
|
rdoc_options: []
|
69
|
-
|
70
|
-
require_paths:
|
64
|
+
require_paths:
|
71
65
|
- lib
|
72
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
requirements:
|
81
|
-
- -
|
82
|
-
- !ruby/object:Gem::Version
|
83
|
-
|
84
|
-
- 0
|
85
|
-
version: "0"
|
66
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
67
|
+
none: false
|
68
|
+
requirements:
|
69
|
+
- - ! '>='
|
70
|
+
- !ruby/object:Gem::Version
|
71
|
+
version: '0'
|
72
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
73
|
+
none: false
|
74
|
+
requirements:
|
75
|
+
- - ! '>='
|
76
|
+
- !ruby/object:Gem::Version
|
77
|
+
version: '0'
|
86
78
|
requirements: []
|
87
|
-
|
88
79
|
rubyforge_project:
|
89
|
-
rubygems_version: 1.
|
80
|
+
rubygems_version: 1.8.25
|
90
81
|
signing_key:
|
91
82
|
specification_version: 3
|
92
|
-
summary: Compass plugin for providing cross-browser compatible RGBA support by creating
|
83
|
+
summary: Compass plugin for providing cross-browser compatible RGBA support by creating
|
84
|
+
transparent PNGs on the fly for browsers that don't support RGBA.
|
93
85
|
test_files: []
|
94
|
-
|