__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.

DISCLAIMER: this gist is not ready. I forked it to develop a more useful mixin list, but discovered some mixins are behaving other than expected. Needs rework. Use at your own risk!

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)

Vertical Gradients

Syntax

+vertical-gradient(!from_color, !to_color, !background) !background is optional.

Explanation

• Set normal background color as a fallback (optional, but needed for Opera)
• Set webkit gradient
• Set Mozilla gradient, use 90deg to make sure it's a vertical gradient
• Set IE gradient using filter
• IE8 now supports CSS grammar, thus needs a vendor prefix for filter
• Set zoom to 1, to force hasLayout = true. Needed for filters to work.

Browser Support

• Firefox
• Safari
• Chrome
• Opera (will only show background color)
• IE

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: -webkit-gradient(linear, 0 0, 0 100%, from(#{!from}), to(#{!to}))
  background: -moz-linear-gradient(90deg, #{!to}, #{!from})
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{!from}', endColorstr='#{!to}')
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{!from}', endColorstr='#{!to}')"
  zoom: 1


//
// 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})"