Clean up the gradient demo page.
This commit is contained in:
parent
20d3e705e3
commit
af5ab4e6c9
@ -1,35 +1,37 @@
|
|||||||
%p
|
.ex
|
||||||
this box has no gradients
|
.gradient-example
|
||||||
|
%p
|
||||||
|
This box has no gradients
|
||||||
|
|
||||||
.gradient-example
|
.ex
|
||||||
|
#radial-gradient.gradient-example
|
||||||
|
%p
|
||||||
|
This will yield a radial gradient with an apparent specular highlight
|
||||||
|
|
||||||
%p
|
.ex
|
||||||
This will yield a radial gradient with an apparent specular highlight
|
#linear-gradient.gradient-example
|
||||||
|
%p
|
||||||
|
This yields a linear gradient spanning from $start to $end coordinates
|
||||||
|
|
||||||
#radial-gradient.gradient-example
|
.ex
|
||||||
|
#v-gradient.gradient-example
|
||||||
|
%p
|
||||||
|
This yields a gradient starting at the top with #fff, ending in #aaa
|
||||||
|
|
||||||
%p
|
.ex
|
||||||
This yields a linear gradient spanning from $start to $end coordinates
|
#v-gradient-2.gradient-example
|
||||||
|
%p
|
||||||
|
Same as above but with a #ccc at the halfway point
|
||||||
|
|
||||||
#linear-gradient.gradient-example
|
.ex
|
||||||
|
#v-gradient-3.gradient-example
|
||||||
|
%p
|
||||||
|
Same as the first example but with #ccc at the
|
||||||
|
30% from the top, and #bbb at 70% from the top
|
||||||
|
|
||||||
%p
|
|
||||||
This yields a gradient starting at the top with #fff, ending in #aaa
|
|
||||||
|
|
||||||
#v-gradient.gradient-example
|
.ex
|
||||||
|
#h-gradient.gradient-example
|
||||||
|
%p
|
||||||
|
This yields a horizontal linear gradient spanning from left to right.
|
||||||
|
|
||||||
%p
|
|
||||||
Same as above but with a #ccc at the halfway point
|
|
||||||
|
|
||||||
#v-gradient-2.gradient-example
|
|
||||||
|
|
||||||
%p
|
|
||||||
Same as the first example but with #ccc at the
|
|
||||||
30% from the top, and #bbb at 70% from the top
|
|
||||||
|
|
||||||
#v-gradient-3.gradient-example
|
|
||||||
|
|
||||||
%p
|
|
||||||
This yields a horizontal linear gradient spanning from left to right.
|
|
||||||
|
|
||||||
#h-gradient.gradient-example
|
|
@ -1,10 +1,18 @@
|
|||||||
@import compass/css3
|
@import compass
|
||||||
|
.ex
|
||||||
|
width: 48%
|
||||||
|
margin-right: 2%
|
||||||
|
float: left
|
||||||
|
+clearfix
|
||||||
|
|
||||||
.gradient-example
|
.gradient-example
|
||||||
width: 80px
|
width: 80px
|
||||||
height: 80px
|
height: 80px
|
||||||
background: red
|
background: red
|
||||||
margin: 20px
|
margin: 20px
|
||||||
|
border: 1px solid #111
|
||||||
|
float: left
|
||||||
|
margin: 1em 1em 0 0
|
||||||
|
|
||||||
// This will yield a radial gradient with an apparent specular highlight
|
// This will yield a radial gradient with an apparent specular highlight
|
||||||
#radial-gradient
|
#radial-gradient
|
||||||
|
@ -4,6 +4,8 @@
|
|||||||
h1
|
h1
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
|
#demo
|
||||||
|
+clearfix
|
||||||
#how
|
#how
|
||||||
+full(12)
|
+full(12)
|
||||||
+pie-clearfix
|
+pie-clearfix
|
||||||
|
Loading…
Reference in New Issue
Block a user