58 lines
1.7 KiB
Plaintext
58 lines
1.7 KiB
Plaintext
!!!
|
|
%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
|
|
|
|
|