__README__.markdown

CSS3 for SASS

This is a simple SASS file that provides a number of useful mixins to achieve CSS3 effects cross-browser. For each rule, the styles are implemented for as many browsers as possible.

Note: You must use haml >= 3.0 for this to work as it uses the dollar assignment operator and equals-less assignment. This may mean installing the --pre version of HAML until its official release.

Box Effects

Rounded Corners

Syntax

+border-radius(!radius)
+border-[top|bottom]-[left|right]-radius(!radius)
+border-[top|bottom|left|right]-radius(!radius)

Browser Support

• Firefox
• Safari
• Chrome
• Opera

Drop Shadows

Syntax

+box-shadow(!x_offset, !y_offset, !blur, !color)

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• IE (no custom blur amount, no rgba colors)

Gradients

Syntax

+vertical-gradient(!from_color, !to_color)
+horizontal-gradient(!from_color, !to_color)

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• IE (vertical only)

Transformations

Rotate

Syntax

+rotate(!degrees)

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• IE

_css3.sass

//
// Rounded Corners
//

=border-radius($radius)
  -moz-border-radius: $radius
  -webkit-border-radius: $radius
  border-radius: $radius
  
=border-top-left-radius($radius)
  -moz-border-radius-topleft: $radius
  -webkit-border-top-left-radius: $radius
  border-top-left-radius: $radius
  
=border-top-right-radius($radius)
  -moz-border-radius-topright: $radius
  -webkit-border-top-right-radius: $radius
  border-top-right-radius: $radius
  
=border-bottom-left-radius($radius)
  -moz-border-radius-bottomleft: $radius
  -webkit-border-bottom-left-radius: $radius
  border-bottom-left-radius: $radius
  
=border-bottom-right-radius($radius)
  -moz-border-radius-bottomright: $radius
  -webkit-border-bottom-right-radius: $radius
  border-bottom-right-radius: $radius

=border-top-radius($radius)
  +border-top-right-radius($radius)
  +border-top-left-radius($radius)
  
=border-bottom-radius($radius)
  +border-bottom-right-radius($radius)
  +border-bottom-left-radius($radius)
  
=border-left-radius($radius)
  +border-top-left-radius($radius)
  +border-bottom-left-radius($radius)
  
=border-right-radius($radius)
  +border-top-right-radius($radius)
  +border-bottom-right-radius($radius)
  
//
// Box Shadow
//

=box-shadow($x, $y, $blur, $color : black)
  -moz-box-shadow: $x $y $blur $color /* FF3.5+ */
  -webkit-box-shadow: $x $y $blur $color /* Saf3.0+, Chrome */
  box-shadow: $x $y $blur $color /* Opera 10.5, IE 9.0 */
  // IE 6, 7
  filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$color}')"
  // IE 8
  -ms-filter: "\"progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$color}')\""
  
//
// Gradients
//

=vertical-gradient($from, $to, $bgcolor : "")
  @if $bgcolor != ""
    background-color: $bgcolor
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#{$from}), to(#{$to}))
  background-image: -moz-linear-gradient(top, #{$from}, #{$to})
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}')
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}')"

=horizontal-gradient($from, $to, $bgcolor : "")
  @if $bgcolor != ""
    background-color: $bgcolor
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#{$from}), to(#{$to}))
  background-image: -moz-linear-gradient(top, #{$from}, #{$to})
  // No IE style that I'm aware of does this.


//
// Rotation
//

=rotate($degrees)
  $percent: $degrees / 360.0
  -moz-transform: rotate(#{$degrees}deg)
  -o-transform: rotate(#{$degrees})
  -webkit-transform: rotate(#{$degrees}deg)
  filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$percent})
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$percent})"