Posted By

delomos on 02/04/11


Tagged

css CSS3 SASS mixin scss


Versions (?)

Who likes this?

8 people have marked this snippet as a favorite

Internet-Uzver
sethetter
robotici
secretgspot
jpsirois
artificialkid
lookingforsome
StephenOdieleHarlow


CSS3 mixins


 / Published in: SASS
 

URL: zenecherub.com

SCSS/SASS mixin for commonly used CSS3 styling, can be used with your main stylesheet with the "@import" command.

  1. /*****
  2. SCSS CSS 3 Property Maxin v 0.1
  3.  
  4. by Dele O
  5. *******/
  6.  
  7. @mixin rounded($radius: 10px) {
  8. border-radius: $radius;
  9. -moz-border-radius: $radius;
  10. -webkit-border-radius: $radius;
  11. }
  12.  
  13.  
  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. }
  24.  
  25.  
  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. }
  31.  
  32.  
  33.  
  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. }
  41.  
  42.  
  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. }
  49.  
  50.  
  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);
  57.  
  58. }

Report this snippet  

You need to login to post a comment.