github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update the gradient examples

Browse Source
This commit is contained in:
Chris Eppstein 2010-02-21 23:06:16 -08:00
parent ad4a486ea1
commit fd11471a5a
5 changed files with 160 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
examples/css3/gradients.html.haml Normal file
View File

@ -0,0 +1,60 @@
!!!
%html
%head
%link(href="stylesheets/gradients.css" rel="stylesheet" type="text/css")
%body
%table
%thead
%th  
%th.linear Linear
%th.radial Radial
%tbody
%tr.default
%th Default
%td.linear <br><br><br>
%td.radial <br><br><br>
%tr.default
%th
%td.linear-code
%td.radial-code
%tr.top-left
%th Top Left
%td.linear <br><br><br>
%td.radial <br><br><br>
%tr.top-left
%th
%td.linear-code
%td.radial-code
%tr.bottom-right
%th Bottom Right
%td.linear <br><br><br>
%td.radial <br><br><br>
%tr.bottom-right
%th
%td.linear-code
%td.radial-code
%tr.three-color
%th Three Evenly-spaced Colors
%td.linear <br><br><br>
%td.radial <br><br><br>
%tr.three-color
%th
%td.linear-code
%td.radial-code
%tr.four-color
%th Four Positioned Colors
%td.linear <br><br><br>
%td.radial <br><br><br>
%tr.four-color
%th
%td.linear-code
%td.radial-code
%tr.filled-in
%th Filled-in End-points
%td.linear <br><br><br>
%td.radial <br><br><br>
%tr.filled-in
%th
%td.linear-code
%td.radial-code

18
examples/css3/index.html.haml
View File

@ -39,24 +39,10 @@
:preserve
+linear-gradient(
color_stops(#d92626, #2626d9))
%pre.diagonal
%code<
:preserve
+linear-gradient(
color_stops(#d92626, #2626d9),
"top left")
%pre.radial
%code<>
+radial-gradient(<br /> "center center, 10, center center, 100",<br /> #d92626, #2626d9)
+radial-gradient(<br> color_stops(#d92626, #2626d9))
%a(href="gradients.html") More Gradients
.examples
#border-radius.example
%h2 Border Radius

10
examples/css3/src/gradient.sass
View File

@ -1,10 +0,0 @@
@import compass/css3/gradient.sass
#gradient
width: 200px
height: 100px
border: 1px solid #777
.linear
+linear-gradient(color_stops(#fff, #f00 50%, #ff0 75%, #0f0))
.radial
+radial-gradient("45 45, 10, 52 50, 30", "Cyan", "DodgerBlue")

69
examples/css3/src/gradients.sass Normal file
View File

@ -0,0 +1,69 @@
@import compass/css3.sass
#gradient
width: 200px
height: 100px
border: 1px solid #777
thead th
min-height: 50px
min-width: 100px
+text-shadow(#fff)
th.linear
+linear-gradient(color_stops(#fff, #f00 50%, #ff0 75%, #0f0))
th.radial
+radial-gradient(color_stops(#fff, #f00 20px, #ff0 30px, #0f0 40px))
tr.default
td.linear
+linear-gradient(color_stops(#c00, #00c))
td.radial
+radial-gradient(color_stops(#c00, #00c))
td.linear-code:before
content: "+linear-gradient(color_stops(#c00, #00c))"
td.radial-code:before
content: "+radial-gradient(color_stops(#c00, #00c))"
tr.top-left
td.linear
+linear-gradient(color_stops(#c00, #00c), "top left")
td.radial
+radial-gradient(color_stops(#c00, #00c), "top left")
td.linear-code:before
content: "+linear-gradient(color_stops(#c00, #00c), \"top left\")"
td.radial-code:before
content: "+radial-gradient(color_stops(#c00, #00c), \"top left\")"
tr.bottom-right
td.linear
+linear-gradient(color_stops(#c00, #00c), "bottom right")
td.radial
+radial-gradient(color_stops(#c00, #00c), "bottom right")
td.linear-code:before
content: "+linear-gradient(color_stops(#c00, #00c), \"bottom right\")"
td.radial-code:before
content: "+radial-gradient(color_stops(#c00, #00c), \"bottom right\")"
tr.three-color
td.linear
+linear-gradient(color_stops(#c00, #fff, #00c))
td.radial
+radial-gradient(color_stops(#c00, #fff, #00c 50px))
td.linear-code:before
content: "+linear-gradient(color_stops(#c00, #fff, #00c))"
td.radial-code:before
content: "+radial-gradient(color_stops(#c00, #fff, #00c 50px))"
tr.four-color
td.linear
+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))
td.radial
+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))
td.linear-code:before
content: "+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))"
td.radial-code:before
content: "+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"
tr.filled-in
td.linear
+linear-gradient(color_stops(#c00 33%, #00c 66%))
td.radial
+radial-gradient(color_stops(#c00 25px, #00c 75px))
td.linear-code:before
content: "+linear-gradient(color_stops(#c00 33%, #00c 66%))"
td.radial-code:before
content: "+radial-gradient(color_stops(#c00 25px, #00c 75px))"

32
examples/css3/src/main.sass
View File

@ -76,7 +76,33 @@ h1
.diagonal
+linear-gradient(color_stops(#d92626, #2626d9), "right top")
.radial
+radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
background-image: -moz-radial-gradient(20px center, circle, 40px center #d92626 10px, #2626d9 100px)
background-color: #2626d9
/* +radial-gradient(color_stops(#d92626 0, #2626d9 1))
+radial-gradient(color_stops(#d92626 10px, #2626d9 150px))
// +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
// background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
// background-color: #2626d9
.radial-1
// A default radial gradient:
/* +radial-gradient(color_stops(#ddd, #aaa))
+radial-gradient(color_stops(#ddd, #aaa))
.radial-2
// A centered gradient
/* +radial-gradient(color_stops(#ddd, #aaa))
+radial-gradient(color_stops(#ddd, #aaa))
.radial-3
// A centered radial gradient at the top
/* +radial-gradient(color_stops(#ddd, #aaa), "top center")
+radial-gradient(color_stops(#ddd, #aaa), "top center")
.radial-4
// A centered radial gradient with fixed color stops
/* +radial-gradient(color_stops(#ddd 20px, #aaa 50px))
+radial-gradient(color_stops(#ddd 20px, #aaa 50px))
.radial-5
// A centered gradient with several color stops
/* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00))
+radial-gradient(color_stops(#ddd 20px, #aaa 50%, #c00 200px))
.radial-6
// A centered gradient with color stops
/* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c))
+radial-gradient(color_stops(#0c0 0px, #ddd 20px, #aaa 50px, #00c 100px))