better examples and some comments.

examples/css3/index.html.haml

@@ -30,21 +30,37 @@
           %h2 Gradients
           %pre.horizontal
             %code<>
-              +h-gradient(#d92626, #2626d9)
+              :preserve
+                +linear-gradient(
+                  color_stops(#d92626, #2626d9),
+                  "left")
           %pre.vertical
             %code<>
-              +v-gradient(#d92626, #2626d9)
+              :preserve
+                +linear-gradient(
+                  color_stops(#d92626, #2626d9))
           %pre.diagonal
             %code<
-              +linear-gradient("left top",
-              "right bottom",
-              \#d92626, #2626d9)
+              :preserve
+                
+                
+                
+                
+                
+                +linear-gradient(
+                  color_stops(#d92626, #2626d9),
+                  "top left")
+                
+                
+                
+                
           %pre.radial
             %code<>
               +radial-gradient(<br />  "center center, 10, center center, 100",<br />  #d92626, #2626d9)
       .examples
         #border-radius.example
           %h2 Border Radius
+          %p This box has rounded corners
         .gutter
         #box-shadow.example
           %h2 Box Shadow

examples/css3/src/fancy-fonts.sass

@@ -1,6 +1,6 @@
 @import compass/css3.sass
 
-+font-face("Angelina", font-files("angelina.ttf", 'truetype'))
++font-face("Angelina", font_files("angelina.ttf", "truetype"))
 h1
   font-family: "Angelina"
   font-size: 5em

examples/css3/src/gradient.sass

@@ -5,6 +5,6 @@
   height: 100px
   border: 1px solid #777
 .linear
-  +v-gradient(#fff, #aaa, color_stop(50%, #ccc, 50%, #bbb))
+  +linear-gradient(color_stops(#fff, #f00 50%, #ff0 75%, #0f0))
 .radial
   +radial-gradient("45 45, 10, 52 50, 30", "Cyan", "DodgerBlue")

examples/css3/src/main.sass

@@ -39,7 +39,7 @@ h1
   content: " "
 
 .example
-  +v-gradient(#fff, #ccc)
+  +linear-gradient(color_stops(#fff, #ccc))
   pre
     padding: 1em
     margin: 1em
@@ -48,8 +48,8 @@ h1
     font-weight: bold
 #background-clip
   pre
-    background: transparent #{image-url("fresh-peas.jpg")} no-repeat
-    border: 1em solid #{transparentize(red, .75)}
+    background: transparent #{image_url("fresh-peas.jpg")} no-repeat
+    border: 1em solid rgba(255,0,0,.25)
   .padding-box
     +background-clip("padding-box")
     +background-origin("padding-box")
@@ -59,8 +59,9 @@ h1
 
 #background-size
   pre
-    background: transparent #{image-url("fresh-peas.jpg")} no-repeat
-    border: 1em solid #{transparentize(red, .75)}
+    background: transparent #{image_url("fresh-peas.jpg")} no-repeat
+    border: 1em solid #{mix(red, white, .5)}
+    border: 1em solid rgba(255,0,0,.25)
   .top-left
     +background-size(50% 50%)
   .centered
@@ -69,12 +70,13 @@ h1
 
 #gradients
   .horizontal
-    +h-gradient(#d92626, #2626d9)
+    +linear-gradient(color_stops(#d92626, #2626d9), "left")
   .vertical
-    +v-gradient(#d92626, #2626d9)
+    +linear-gradient(color_stops(#d92626, #2626d9))
   .diagonal
-    +linear-gradient("left top", "right bottom", #d92626, #2626d9)
+    +linear-gradient(color_stops(#d92626, #2626d9), "right top")
   .radial
-    +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9) 
+    +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
 

lib/compass/sass_extensions/functions/gradient_support.rb

@@ -33,6 +33,7 @@ module Compass::SassExtensions::Functions::GradientSupport
   end
 
   module Functions
+    # returns the opposite position of a side or corner.
     def grad_opposite_position(position)
       opposite = position.value.split(/ +/).map do |pos|
         case pos
@@ -46,6 +47,8 @@ module Compass::SassExtensions::Functions::GradientSupport
       end
       Sass::Script::String.new(opposite.join(" "))
     end
+
+    # returns color-stop() calls for use in webkit.
     def grad_color_stops(color_list)
       positions = color_list.values.map{|c| [c.stop && c.stop.value, c.color]}
       # fill in the blank positions
@@ -74,12 +77,18 @@ module Compass::SassExtensions::Functions::GradientSupport
         Sass::Script::String.new(color_stops.join(", "))
       end
     end
+
+    # the first color from a list of color stops
     def grad_start_color(color_list)
       color_list.values.first.color
     end
+
+    # the last color from a list of color stops
     def grad_end_color(color_list)
       color_list.values.last.color
     end
+
+    # the given a position, return a point in percents
     def grad_point(position)
       position = position.value
       position = if position[" "]