Opt-in SVG support for gradients (linear & radial)
This commit is contained in:
Irina Dumitrascu
Chris Eppstein
parent
efa9e2408d
commit
6326835d5e
@ -23,3 +23,5 @@ $experimental-support-for-opera : true !default;
|
||||
$experimental-support-for-microsoft : true !default;
|
||||
// Support for khtml in experimental css3 properties.
|
||||
$experimental-support-for-khtml : true !default;
|
||||
// Support for svg in experimental css3 properties.
|
||||
$experimental-support-for-svg : false !default;
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
// - Chrome
|
||||
// - Safari
|
||||
// - Firefox 3.6
|
||||
// - Opera
|
||||
|
||||
@mixin linear-gradient($color-stops, $start: top, $image: false) {
|
||||
// Firefox's gradient api is nice.
|
||||
@ -38,6 +39,10 @@
|
||||
@if $image { $background : $image + unquote(", "); }
|
||||
$start: unquote($start);
|
||||
$end: opposite-position($start);
|
||||
|
||||
@if $experimental-support-for-svg {
|
||||
background-image: #{$background}linear-svg-gradient($color-stops, $start);
|
||||
}
|
||||
@if $experimental-support-for-webkit {
|
||||
background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
|
||||
}
|
||||
@ -66,12 +71,17 @@
|
||||
// - Chrome
|
||||
// - Safari
|
||||
// - Firefox 3.6
|
||||
// - Opera
|
||||
|
||||
@mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
|
||||
$center-position: unquote($center-position);
|
||||
$end-pos: grad-end-position($color-stops, true);
|
||||
$background: unquote("");
|
||||
@if $image { $background: $image + unquote(", "); }
|
||||
|
||||
@if $experimental-support-for-svg {
|
||||
background-image: #{$background}radial-svg-gradient($color-stops, $center-position);
|
||||
}
|
||||
@if $experimental-support-for-webkit {
|
||||
background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops));
|
||||
}
|
||||
|
||||
@ -38,6 +38,13 @@ module Compass::SassExtensions::Functions::GradientSupport
|
||||
module Functions
|
||||
# returns color-stop() calls for use in webkit.
|
||||
def grad_color_stops(color_list)
|
||||
stops = color_stops_in_percentages(color_list).map do |stop, color|
|
||||
"color-stop(#{stop.inspect}, #{color.inspect})"
|
||||
end
|
||||
Sass::Script::String.new(stops.join(", "))
|
||||
end
|
||||
|
||||
def color_stops_in_percentages(color_list)
|
||||
assert_list(color_list)
|
||||
normalize_stops!(color_list)
|
||||
max = color_list.values.last.stop
|
||||
@ -51,10 +58,8 @@ module Compass::SassExtensions::Functions::GradientSupport
|
||||
raise Sass::SyntaxError.new("Color stops must be specified in increasing order")
|
||||
end
|
||||
last_value = stop
|
||||
"color-stop(#{stop.inspect}, #{pos.color.inspect})"
|
||||
[stop, pos.color]
|
||||
end
|
||||
|
||||
Sass::Script::String.new(color_stops.join(", "))
|
||||
end
|
||||
|
||||
# returns the end position of the gradient from the color stop
|
||||
@ -148,6 +153,25 @@ module Compass::SassExtensions::Functions::GradientSupport
|
||||
end
|
||||
end)
|
||||
end
|
||||
|
||||
def linear_svg_gradient(color_stops, start)
|
||||
x1, y1 = grad_point(start).to_s.split
|
||||
x2, y2 = grad_point(opposite_position(start)).to_s.split
|
||||
stops = color_stops_in_percentages(color_stops)
|
||||
|
||||
svg = linear_svg(stops, x1, y1, x2, y2)
|
||||
inline_image_string(svg.gsub(/\s+/, ' '), 'image/svg+xml')
|
||||
end
|
||||
|
||||
def radial_svg_gradient(color_stops, center)
|
||||
cx, cy = grad_point(center).to_s.split
|
||||
r = grad_end_position(color_stops, Sass::Script::Bool.new(true))
|
||||
stops = color_stops_in_percentages(color_stops)
|
||||
|
||||
svg = radial_svg(stops, cx, cy, r)
|
||||
inline_image_string(svg.gsub(/\s+/, ' '), 'image/svg+xml')
|
||||
end
|
||||
|
||||
private
|
||||
def normalize_stops!(color_list)
|
||||
positions = color_list.values
|
||||
@ -186,5 +210,40 @@ module Compass::SassExtensions::Functions::GradientSupport
|
||||
return if value.is_a?(List)
|
||||
raise ArgumentError.new("#{value.inspect} is not a list of color stops. Expected: color_stops(<color> <number>?, ...)")
|
||||
end
|
||||
|
||||
def linear_svg(color_stops, x1, y1, x2, y2)
|
||||
gradient = <<-EOG
|
||||
<linearGradient id="grad" x1="#{x1}" y1="#{y1}" x2="#{x2}" y2="#{y2}">
|
||||
#{color_stops_svg(color_stops)}
|
||||
</linearGradient>
|
||||
EOG
|
||||
svg(gradient)
|
||||
end
|
||||
|
||||
def radial_svg(color_stops, cx, cy, r)
|
||||
gradient = <<-EOG
|
||||
<radialGradient id="grad" gradientUnits="userSpaceOnUse" cx="#{cx}" cy="#{cy}" r="#{r}">
|
||||
#{color_stops_svg(color_stops)}
|
||||
</radialGradient>
|
||||
EOG
|
||||
svg(gradient)
|
||||
end
|
||||
|
||||
# color_stops = array of: [stop, color]
|
||||
def color_stops_svg(color_stops)
|
||||
color_stops.each.map{ |stop, color|
|
||||
%{<stop offset="#{stop.to_s}" stop-color="#{color.inspect}" />}
|
||||
}.join
|
||||
end
|
||||
|
||||
def svg(gradient)
|
||||
svg = <<-EOS
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>#{gradient}</defs>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
|
||||
</svg>
|
||||
EOS
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@ -3,8 +3,7 @@ module Compass::SassExtensions::Functions::InlineImage
|
||||
def inline_image(path, mime_type = nil)
|
||||
path = path.value
|
||||
real_path = File.join(Compass.configuration.images_path, path)
|
||||
url = "url('data:#{compute_mime_type(path,mime_type)};base64,#{data(real_path)}')"
|
||||
Sass::Script::String.new(url)
|
||||
inline_image_string(data(real_path), compute_mime_type(path, mime_type))
|
||||
end
|
||||
|
||||
def inline_font_files(*args)
|
||||
@ -19,6 +18,13 @@ module Compass::SassExtensions::Functions::InlineImage
|
||||
Sass::Script::String.new(files.join(", "))
|
||||
end
|
||||
|
||||
protected
|
||||
def inline_image_string(data, mime_type)
|
||||
data = [data].flatten.pack('m').gsub("\n","")
|
||||
url = "url('data:#{mime_type};base64,#{data}')"
|
||||
Sass::Script::String.new(url)
|
||||
end
|
||||
|
||||
private
|
||||
def compute_mime_type(path, mime_type = nil)
|
||||
return mime_type if mime_type
|
||||
@ -46,7 +52,7 @@ private
|
||||
|
||||
def data(real_path)
|
||||
if File.readable?(real_path)
|
||||
[File.open(real_path, "rb") {|io| io.read}].pack('m').gsub("\n","")
|
||||
File.open(real_path, "rb") {|io| io.read}
|
||||
else
|
||||
raise Compass::Error, "File not found or cannot be read: #{real_path}"
|
||||
end
|
||||
|
||||
142
test/fixtures/stylesheets/compass/css/gradients.css
vendored
142
test/fixtures/stylesheets/compass/css/gradients.css
vendored
@ -1,11 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
.linear-1 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.linear-2 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(left, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(left, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
@ -20,42 +20,42 @@
|
||||
background-image: linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.linear-5 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); }
|
||||
|
||||
.linear-6 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); }
|
||||
|
||||
.linear-7 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); }
|
||||
|
||||
.linear-8 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); }
|
||||
|
||||
.linear-9 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); }
|
||||
|
||||
.linear-10 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
|
||||
background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
|
||||
|
||||
.linear-11 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%);
|
||||
background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); }
|
||||
|
||||
.linear-12 {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
|
||||
background-image: -moz-linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%);
|
||||
background-image: linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); }
|
||||
|
||||
@ -95,6 +95,126 @@
|
||||
background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
|
||||
|
||||
.alpha-linear {
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
|
||||
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%);
|
||||
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }
|
||||
|
||||
.linear-svg-1 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.linear-svg-2 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIwJSIgeTE9IjUwJSIgeDI9IjEwMCUiIHkyPSI1MCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(left, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(left, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.linear-svg-3 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top left, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top left, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.linear-svg-4 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIxMDAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top right, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.linear-svg-5 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); }
|
||||
|
||||
.linear-svg-6 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); }
|
||||
|
||||
.linear-svg-7 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiAvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZWVlZWVlIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); }
|
||||
|
||||
.linear-svg-8 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiIC8+IDwvbGluZWFyR3JhZGllbnQ+IDwvZGVmcz4gPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz4gPC9zdmc+IA==');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa 100%);
|
||||
background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); }
|
||||
|
||||
.linear-svg-9 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIiAvPiA8L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%);
|
||||
background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); }
|
||||
|
||||
.linear-svg-10 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
|
||||
background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
|
||||
|
||||
.linear-svg-11 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%);
|
||||
background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); }
|
||||
|
||||
.linear-svg-12 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiAvPjxzdG9wIG9mZnNldD0iMzMlIiBzdG9wLWNvbG9yPSIjMDAwMGZmIiAvPjxzdG9wIG9mZnNldD0iNjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiAvPiA8L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
|
||||
background-image: -moz-linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%);
|
||||
background-image: linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); }
|
||||
|
||||
.radial-svg-1 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.radial-svg-2 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.radial-svg-3 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iMCUiIHI9IjEwMCI+IDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIiAvPiA8L3JhZGlhbEdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
|
||||
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.radial-svg-4 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.radial-svg-5 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iMCUiIHI9IjEwMCI+IDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIiAvPiA8L3JhZGlhbEdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
|
||||
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
|
||||
background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||
|
||||
.radial-svg-6 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCI+IDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px);
|
||||
background-image: radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px); }
|
||||
|
||||
.radial-svg-7 {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCI+IDxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
|
||||
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background-image: -moz-radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px);
|
||||
background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
|
||||
|
||||
.alpha-linear-svg {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwKSIgLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDEyNywgMTI3LCAwLjUpIiAvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiAvPiA8L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
|
||||
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%);
|
||||
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }
|
||||
|
||||
@ -69,3 +69,74 @@
|
||||
|
||||
.alpha-linear
|
||||
+linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
|
||||
|
||||
$experimental-support-for-svg: true
|
||||
.linear-svg-1
|
||||
+linear-gradient(color_stops(#dddddd, #aaaaaa))
|
||||
|
||||
.linear-svg-2
|
||||
+linear-gradient(color_stops(#dddddd, #aaaaaa), left)
|
||||
|
||||
.linear-svg-3
|
||||
+linear-gradient(color_stops(#dddddd, #aaaaaa), unquote("top left"))
|
||||
|
||||
.linear-svg-4
|
||||
+linear-gradient(color_stops(#dddddd, #aaaaaa), unquote("top right"))
|
||||
|
||||
.linear-svg-5
|
||||
+linear-gradient(color_stops(#dddddd, #cccccc, #aaaaaa))
|
||||
|
||||
.linear-svg-6
|
||||
+linear-gradient(color_stops(#dddddd, #cccccc 20%, #aaaaaa))
|
||||
|
||||
.linear-svg-7
|
||||
+linear-gradient(color_stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa))
|
||||
|
||||
.linear-svg-8
|
||||
+linear-gradient(color_stops(#dddddd 80%, #aaaaaa))
|
||||
|
||||
.linear-svg-9
|
||||
+linear-gradient(color_stops(#dddddd, #aaaaaa 20%))
|
||||
|
||||
.linear-svg-10
|
||||
+linear-gradient(color_stops(#dddddd 40%, #aaaaaa 50%))
|
||||
|
||||
.linear-svg-11
|
||||
+linear-gradient(color_stops(#dddddd 40%, black, #aaaaaa 50%))
|
||||
|
||||
.linear-svg-12
|
||||
+linear-gradient(color-stops(white, blue 33%, black 67%))
|
||||
|
||||
.radial-svg-1
|
||||
// A default radial gradient:
|
||||
A centered gradient having the shape of the container (aka ellipse)
|
||||
+radial-gradient(color_stops(#dddddd, #aaaaaa))
|
||||
|
||||
.radial-svg-2
|
||||
// A centered gradient having the shape of the container (aka ellipse)
|
||||
+radial-gradient(color_stops(#dddddd, #aaaaaa))
|
||||
|
||||
.radial-svg-3
|
||||
// A centered gradient at the top having the shape of the container (aka ellipse)
|
||||
+radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center"))
|
||||
|
||||
.radial-svg-4
|
||||
// A centered gradient having a circular shape
|
||||
+radial-gradient(color_stops(#dddddd, #aaaaaa))
|
||||
|
||||
.radial-svg-5
|
||||
// A centered gradient at the top having a circular shape
|
||||
+radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center"))
|
||||
|
||||
.radial-svg-6
|
||||
// A centered circular gradient with color stops
|
||||
The color stops must be absolute units
|
||||
+radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px))
|
||||
|
||||
.radial-svg-7
|
||||
// A centered elliptical gradient with color stops
|
||||
The color stops must be relative units
|
||||
+radial-gradient(color_stops(#dddddd 20%, #aaaaaa 50px))
|
||||
|
||||
.alpha-linear-svg
|
||||
+linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user