Description
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:
| 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);