Add horizontal gradient mixin

matthieua · Jan 28, 2015 · edff623 · edff623
1 parent 97654c8
commit edff623
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -35,12 +35,16 @@ http://mynameismatthieu.com/sass-css3-mixins/
    <td>Start Color: #3C3C3C, End Color: #999999</td>
  </tr>
  <tr>
-   <td>background-size</td>
-   <td>Width: 100%, Height: 100%</td>
+   <td>background-horizontal</td>
+   <td>Start Color: #3C3C3C, End Color: #999999</td>
  </tr>
  <tr>
    <td>background-radial</td>
    <td>Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100%</td>
+ </tr>
+  <tr>
+   <td>background-size</td>
+   <td>Width: 100%, Height: 100%</td>
  </tr>
  <tr>
    <td>background-opacity</td>
@@ -52,7 +56,7 @@ http://mynameismatthieu.com/sass-css3-mixins/
  </tr>
  <tr>
    <td>border-radius-separate</td>
-   <td>Top Left: 5px, Top Left: 5px, Bottom Left: 5px, Bottom Right: 5px</td>
+   <td>Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px</td>
  </tr>
  <tr>
    <td>box</td>

diff --git a/css3-mixins.sass b/css3-mixins.sass
@@ -13,6 +13,7 @@
  *  Mixins available:
  *    -   css3-prefix             - arguments: Property, Value
  *    -   background-gradient     - arguments: Start Color: #3C3C3C, End Color: #999999
+*     -   background-horizontal   - arguments: Start Color: #3C3C3C, End Color: #999999
  *    -   background-radial       - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100%
  *    -   background-size         - arguments: Width: 100%, Height: 100%
  *    -   background-opacity      - arguments: Color: #000, Opacity: .85
@@ -66,6 +67,16 @@
   background-image:         linear-gradient(top, $startColor, $endColor)
   filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}')
 
+/* BACKGROUND HORIZONTAL */
+@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999)
+    background-color: $startColor
+    background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor))
+    background-image: -webkit-linear-gradient(left, $startColor, $endColor)
+    background-image:    -moz-linear-gradient(left, $startColor, $endColor)
+    background-image:     -ms-linear-gradient(left, $startColor, $endColor)
+    background-image:      -o-linear-gradient(left, $startColor, $endColor)
+    background-image:         linear-gradient(left, $startColor, $endColor)
+    filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1')
 
 /* BACKGROUND RADIAL */
 @mixin background-radial($startColor: #FFFFFF, $startPos: 0%, $endColor: #000000, $endPos:100%) 

diff --git a/css3-mixins.scss b/css3-mixins.scss
@@ -13,6 +13,7 @@
   Mixins available:
     -   css3-prefix             - arguments: Property, Value
     -   background-gradient     - arguments: Start Color: #3C3C3C, End Color: #999999
+    -   background-horizontal   - arguments: Start Color: #3C3C3C, End Color: #999999
     -   background-radial       - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100%
     -   background-size         - arguments: Width: 100%, Height: 100%
     -   background-opacity      - arguments: Color: #000, Opacity: .85
@@ -68,6 +69,18 @@
     filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
 }
 
+/* BACKGROUND HORIZONTAL */
+@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) {
+    background-color: $startColor;
+    background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
+    background-image: -webkit-linear-gradient(left, $startColor, $endColor);
+    background-image:    -moz-linear-gradient(left, $startColor, $endColor);
+    background-image:     -ms-linear-gradient(left, $startColor, $endColor);
+    background-image:      -o-linear-gradient(left, $startColor, $endColor);
+    background-image:         linear-gradient(left, $startColor, $endColor);
+    filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1');
+}
+
 /* BACKGROUND RADIAL */
 @mixin background-radial($startColor: #FFFFFF, $startPos: 0%, $endColor: #000000, $endPos:100%) {
     background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);