compass/examples/css3/index.html.haml

!!!
%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 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<>
              :preserve
                +linear-gradient(
                  color_stops(#d92626, #2626d9),
                  "left")
          %pre.vertical
            %code<>
              :preserve
                +linear-gradient(
                  color_stops(#d92626, #2626d9))
          %pre.radial
            %code<>
              +radial-gradient(<br>  color_stops(#d92626, #2626d9))
          %a(href="gradients.html") More Gradients
      .examples
        #border-radius.example
          %h2 Border Radius
          %p This box has rounded corners
        .gutter
        #box-shadow.example
          %h2 Box Shadow
        .gutter
        #box-sizing.example
          %h2 Box Sizing