Started work on the CSS3 Module Example page.

examples/css3/index.html.haml

@@ -2,7 +2,54 @@
 %html
   %head
     %link(href="stylesheets/fancy-fonts.css" rel="stylesheet" type="text/css")
+    %link(href="stylesheets/main.css" rel="stylesheet" type="text/css")
+    %link(href="stylesheets/gradient.css" rel="stylesheet" type="text/css")
   %body
-    %h1 This is a Fancy Title
-    %h2 This is a Fancy Subtitle
+    %h1 Compass CSS3 Module
+    #container
+      .examples
+        #background-clip.example
+          %h2 Background Clip & Origin
+          %pre.padding-box
+            %code<>
+              +background-clip("padding-box")<br />+background-origin("padding-box")
+          %pre.border-box
+            %code<>
+              +background-clip("border-box")<br />+background-origin("border-box")
+        .gutter
+        #background-size.example
+          %h2 Background Size
+          %pre.top-left
+            %code<>
+              +background-size(50% 50%)
+          %pre.centered
+            %code<>
+              +background-size(50% 50%)<br />background-position: center center
+        .gutter
+        #gradients.example
+          %h2 Gradients
+          %pre.horizontal
+            %code<>
+              +h-gradient(#d92626, #2626d9)
+          %pre.vertical
+            %code<>
+              +v-gradient(#d92626, #2626d9)
+          %pre.diagonal
+            %code<
+              +linear-gradient("left top",
+              "right bottom",
+              \#d92626, #2626d9)
+          %pre.radial
+            %code<>
+              +radial-gradient(<br />  "center center, 10, center center, 100",<br />  #d92626, #2626d9)
+      .examples
+        #border-radius.example
+          %h2 Border Radius
+        .gutter
+        #box-shadow.example
+          %h2 Box Shadow
+        .gutter
+        #box-sizing.example
+          %h2 Box Sizing
+
 

examples/css3/src/_base.sass

@@ -0,0 +1,14 @@
+@import compass/utilities.sass
+@import compass/css3.sass
+
+=container
+  +clearfix
+  overflow: auto
+
+=row
+  +clearfix
+
+=column
+  float: left
+  +box-sizing("border-box")
+

examples/css3/src/fancy-fonts.sass

@@ -1,10 +1,7 @@
 @import compass/css3.sass
 
-+font-face("Vtks Revolt", font-files("Vtks Revolt.ttf", 'truetype'))
 +font-face("Angelina", font-files("angelina.ttf", 'truetype'))
 h1
-  font-family: "Vtks Revolt"
-  font-size: 5em
-h2
   font-family: "Angelina"
-  font-size: 3em
+  font-size: 5em
+

examples/css3/src/gradient.sass

@@ -1,6 +1,6 @@
 @import compass/css3/gradient.sass
 
-div
+#gradient
   width: 200px
   height: 100px
   border: 1px solid #777

examples/css3/src/main.sass

@@ -0,0 +1,80 @@
+@import blueprint/reset.sass
+@import base.sass
+
+!border_color = #aaa
+
+#container
+  +container
+
+!min_width = 340px
+.examples
+  margin-bottom: 1em
+  +row
+  min-width= !min_width * 3 + 20px * 2 + 20px
+
+h1
+  text-align: center
+
+.example, .gutter
+  min-height: 21em
+
+.example
+  +column
+  width: 30%
+  min-width= !min_width
+  border: 4px solid #{!border_color}
+  +border-radius(0.667em)
+  +box-shadow(darken(!border_color, 40), 5px, 5px, 2px)
+  margin-bottom: 1em
+  h2
+    font-family: Angelina
+    margin: 0.5em 0 1em
+    text-align: center
+
+.gutter
+  display: block
+  float: left
+  width: 2.5%
+  min-width: 20px
+  content: " "
+
+.example
+  +v-gradient(#fff, #ccc)
+  pre
+    padding: 1em
+    margin: 1em
+    color: white
+    text-shadow: 1px 1px 2px #000
+    font-weight: bold
+#background-clip
+  pre
+    background: transparent #{image-url("fresh-peas.jpg")} no-repeat
+    border: 1em solid #{transparentize(red, .75)}
+  .padding-box
+    +background-clip("padding-box")
+    +background-origin("padding-box")
+  .border-box
+    +background-clip("border-box")
+    +background-origin("border-box")
+
+#background-size
+  pre
+    background: transparent #{image-url("fresh-peas.jpg")} no-repeat
+    border: 1em solid #{transparentize(red, .75)}
+  .top-left
+    +background-size(50% 50%)
+  .centered
+    +background-size(50% 50%)
+    background-position: center center
+
+#gradients
+  .horizontal
+    +h-gradient(#d92626, #2626d9)
+  .vertical
+    +v-gradient(#d92626, #2626d9)
+  .diagonal
+    +linear-gradient("left top", "right bottom", #d92626, #2626d9)
+  .radial
+    +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9) 
+    background-color: #2626d9
+