Clean up the gradient demo page.

This commit is contained in:
Chris Eppstein 2010-11-12 22:01:26 -08:00
parent 20d3e705e3
commit af5ab4e6c9
3 changed files with 40 additions and 28 deletions

View File

@ -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

View File

@ -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

View File

@ -4,6 +4,8 @@
h1 h1
text-align: center text-align: center
#demo
+clearfix
#how #how
+full(12) +full(12)
+pie-clearfix +pie-clearfix