linear-gradients.sass

gistfile1.txt

// Sass:
+linear-gradient(colors(#ddd, #aaa)) //assumes "top"
+linear-gradient(colors(#ddd, #aaa), "left")
+linear-gradient(colors(#ddd, #aaa), "top left")
+linear-gradient(colors(#ddd, #aaa), "top right")

// Color stops - I'm using default vertical gradients for simplicity

+linear-gradient(colors(#ddd, #ccc, #aaa))
+linear-gradient(colors(#ddd, #ccc 20%, #aaa))
+linear-gradient(colors(#ddd, #ccc 20%, #eee, #aaa))
+linear-gradient(colors(#ddd 80%, #aaa))
+linear-gradient(colors(#ddd, #aaa 20%))
+linear-gradient(colors(#ddd 40%, #aaa 50%))
+linear-gradient(colors(#ddd 40%, #000, #aaa 50%))

// Notice: when specifying a coordinate for the first or last color.
// Webkit requires the use of a color stop: "#ddd 40%" becomes "from(#ddd), color-stop(40%, #ddd)"

// Webkit:
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#aaa))
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#ddd), to(#aaa))
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#ddd), to(#aaa))
background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, from(#ddd), to(#aaa))
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(50%, #ccc), to(#aaa))
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(20%, #ccc), to(#aaa))
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(20%, #ccc), color-stop(60%, #eee), to(#aaa))
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(80%, #ddd), to(#aaa))
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(20%, #aaa), to(#aaa))
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(40%, #ddd), color-stop(50%, #aaa), to(#aaa))
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(40%, #ddd), color-stop(45%, #000), color-stop(50%, #aaa), to(#aaa))


// Gecko:
background-image: -moz-linear-gradient(top, #ddd, #aaa)
background-image: -moz-linear-gradient(left, #ddd, #aaa)
background-image: -moz-linear-gradient(left top, #ddd, #aaa)
background-image: -moz-linear-gradient(right top, #ddd, #aaa)
background-image: -moz-linear-gradient(top, #ddd, #ccc, #aaa)
background-image: -moz-linear-gradient(top, #ddd, #ccc 20%, #aaa)
background-image: -moz-linear-gradient(top, #ddd, #ccc 20%, #eee, #aaa)
background-image: -moz-linear-gradient(top, #ddd 80%, #aaa)
background-image: -moz-linear-gradient(top, #ddd, #aaa 20%)
background-image: -moz-linear-gradient(top, #ddd 40%, #aaa 50%)
background-image: -moz-linear-gradient(top, #ddd 40%, #000, #aaa 50%)

-----------------------------------------------------

// Shortcut Mixins:

// vertical linear gradient: (top to bottom)
+v-gradient(#ddd, #aaa)
  +linear-gradient(colors(!color1, !color2))
  
// horizontal linear gradient: (left to right)
=h-gradient(!color1, !color2)
  +linear-gradient(colors(!color1, !color2), "left")

-----------------------------------------------------

// % coord reference //
----------------------
| 0% 0%      0% 100% |
|
| 0% 100%  100% 100% |
----------------------

// These can be used to assume direction
// values on the left will work for firefox
// values on the right will work for webkit (percents recommended in Webkit)

"top", "0% 50%"               => "0% 0%, 0% 100%", "top left, bottom left"
"bottom", "100% 50%"          => "0% 100%, 0% 0%", "bottom left, top left"

"left", "0%"                  => "0% 0%, 100% 0%", "top left, top right"
"top left", "0% 0%"           => "0% 0%, 100% 100%", "top left, bottom right"
"bottom left", "0% 100%"      => "0% 100%, 100% 0%", "bottom left, top right"
                            
"right", "100%"               => "100% 0%, 0% 0%", "top right, top left"
"top right", "100% 0%"        => "100% 0%, 0% 100%", "top right, bottom left"
"bottom right", "100% 100%"   => "100% 100%, 0% 0%", "bottom right, top left"