CSS3 mixins

SUBMITTED BY: Guest

DATE: Jan. 15, 2014, 11:21 p.m.

FORMAT: Text only

SIZE: 2.4 kB

Raw Download

HITS: 750

Report
  1. /*****
  2. SCSS CSS 3 Property Maxin v 0.1
  4. by Dele O
  5. *******/
  7. @mixin rounded($radius: 10px) {
  8. border-radius: $radius;
  9. -moz-border-radius: $radius;
  10. -webkit-border-radius: $radius;
  11. }
  14. @mixin roundedSides($topLeft, $topRight, $bottomRight, $bottomLeft) {
  15. -moz-border-radius-topleft: $topLeft;
  16. -moz-border-radius-topright: $topRight;
  17. -moz-border-radius-bottomright: $bottomRight;
  18. -moz-border-radius-bottomleft: $bottomLeft;
  19. border-top-left-radius:$topLeft;
  20. border-top-right-radius: $topRight;
  21. border-bottom-right-radius: $bottomRight;
  22. border-bottom-left-radius: $bottomLeft;
  23. }
  26. @mixin shadow( $off-y, $off-x, $blur, $color){
  27. -moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */
  28. -webkit-box-shadow: $off-y $off-x $blur $color; /* Saf3.0+, Chrome */
  29. box-shadow: $off-y $off-x $blur $color; /* Opera 10.5, IE9 */
  30. }
  34. @mixin gradient($baseColor, $toColor){
  35. background-color:$baseColor;
  36. background-image: -moz-linear-gradient(top, $baseColor, $toColor); /* FF3.6 */
  37. background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $baseColor),color-stop(1, $toColor)); /* Saf4+, Chrome */
  38. background-image: linear-gradient(top,$baseColor, $toColor);
  39. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='$baseColor', EndColorStr='$toColor'); /* IE6�IE9 */
  40. }
  43. @mixin trasition($property, $duration:0.3s, $function: ease-out){
  44. -moz-transition: $property $durations $function; /* FF3.7+ */
  45. -o-transition: $property $durations $function; /* Opera 10.5 */
  46. -webkit-transition: $property $durations $function; /* Saf3.2+, Chrome */
  47. transition: $property $durations $function;
  48. }
  51. @mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y){
  52. -moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  53. -webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  54. -o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  55. -ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  56. transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  58. }
comments powered by Disqus