1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
@import compass
.ex
width: 48%
margin-right: 2%
float: left
+clearfix
.gradient-example
width: 80px
height: 80px
background: red
float: left
margin: 1em 1em 0 0
// This will yield a radial gradient with an apparent specular highlight
#radial-gradient
+background-image(radial-gradient(45px 45px, #0ff 10px, #1e90ff 30px))
// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient
+background-image(linear-gradient(left top, #fff, #ddd))
// This yields a gradient starting at the top with #fff, ending in #aaa
#v-gradient
+background-image(linear-gradient(#fff, #aaa))
// Same as above but with a #ccc at the halfway point
#v-gradient-2
+background-image(linear-gradient(#fff, #ccc, #aaa))
// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
#v-gradient-3
+background-image(linear-gradient(#fff, #ccc 30%, #bbb 70%, #aaa))
// This yields a horizontal linear gradient spanning from left to right.
#h-gradient
+background-image(linear-gradient(left, #fff, #ddd))
#svg-gradient
$experimental-support-for-svg: true
+background-image(linear-gradient(left, #2ac363, #cd8c14, #9c4cc2))
width: 80px
height: 80px
|
