The purpose of this library is to facilitate the use of CSS3 on different browsers.

All CSS3 Properties used in the mixins are being supported by Safari 5.

Created by: Matthieu Aussaguel, @mattaussaguel


Mixins Arguments (with default values)
background-gradient Start Color: #3C3C3C, End Color: #999999
background-size Width: 100%, Height: 100%
border-radius Radius: 5px
border-radius-separate Top Left: 5px, Top Left: 5px, Bottom Left: 5px, Bottom Right: 5px
box Orientation: horizontal, Pack: center, Align: center
box-rgba R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C
box-shadow X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
box-sizing Type: border-box
columns Count: 3, Gap: 10
double-borders Color One: #3C3C3C, Color Two: #999999, Radius: 0
flex Value: 1
flip Value: ScaleX: -1
font-face Value: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf
opacity Opacity: 0.5
outline radius Radius: 5px
resize Direction: both
rotate Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0
text-shadow X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
transform Parameters: null
transition What: all, Length: 1s, Easing: ease-in-out
triple-borders Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0

Examples and Instructions

// Import the mixins
@import "css3-mixins.scss"

// Call Mixins
@include opacity();
@include border-radius(3px); 
@include transition(color, .5s, ease-in);