LESS Classes


 / Published in: CSS
 

  1. .border-radius( @radius: 3px ) {
  2. -webkit-border-radius: @radius;
  3. -moz-border-radius: @radius;
  4. border-radius: @radius;
  5. }
  6.  
  7. .outline-radius( @radius: 3px ) {
  8. -webkit-outline-radius: @radius;
  9. -moz-outline-radius: @radius;
  10. outline-radius: @radius;
  11. }
  12.  
  13. .box-shadow(
  14. @x : 2px,
  15. @y : 2px,
  16. @blur : 5px,
  17. @spread : 0,
  18. @color : rgba(0,0,0,.6)
  19. ) {
  20. -webkit-box-shadow: @x @y @blur @spread @color;
  21. -moz-box-shadow: @x @y @blur @spread @color;
  22. box-shadow: @x @y @blur @spread @color;
  23. }
  24.  
  25. .transition(
  26. @what : all,
  27. @length : 1s,
  28. @easing : ease-in-out
  29. ) {
  30. -webkit-transition: @what @length @easing;
  31. -moz-transition: @what @length @easing;
  32. -o-transition: @what @length @easing;
  33. transition: @what @length @easing;
  34. }
  35.  
  36. .transform(
  37. @params
  38. ) {
  39. -webkit-transform: @params;
  40. -moz-transform: @params;
  41. transform: @params;
  42. }
  43.  
  44. .box(
  45. @orient : horizontal,
  46. @pack : center,
  47. @align : center
  48. ) {
  49. display: -webkit-box;
  50. display: -moz-box;
  51. display: box;
  52.  
  53. -webkit-box-orient: @orient;
  54. -moz-box-orient: @orient;
  55. box-orient: @orient;
  56.  
  57. -webkit-box-pack: @pack;
  58. -moz-box-pack: @pack;
  59. box-pack: @pack;
  60.  
  61. -webkit-box-align: @align;
  62. -moz-box-align: @align;
  63. box-align: @align;
  64. }
  65.  
  66. .flex( @val : 1 ) {
  67. -webkit-box-flex: @val;
  68. -moz-box-flex: @val;
  69. box-flex: @val;
  70. }
  71.  
  72. .resize( @direction ) {
  73. -webkit-resize: @direction;
  74. -moz-resize: @direction;
  75. resize: @direction;
  76. }
  77.  
  78. .linear-gradient(
  79. @begin: black,
  80. @end: white,
  81. @switch : 100%
  82. ) {
  83. background: @begin;
  84. background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end));
  85. background: -moz-linear-gradient(top, @begin, @end @switch);
  86. background: -o-linear-gradient(top, @begin, @end @switch);
  87. background: linear-gradient(top, @begin, @end @switch);
  88. }
  89.  
  90. .double-borders(
  91. @colorOne : green,
  92. @colorTwo : red,
  93. @radius : 0
  94. ) {
  95. border: 1px solid @colorOne;
  96.  
  97. -webkit-box-shadow: 0 0 0 1px @colorTwo;
  98. -moz-box-shadow: 0 0 0 1px @colorTwo;
  99. box-shadow: 0 0 0 1px @colorTwo;
  100.  
  101. .border-radius( @radius );
  102. }
  103.  
  104. .triple-borders(
  105. @colorOne : green,
  106. @colorTwo : red,
  107. @colorThree : blue,
  108. @radius : 0
  109. ) {
  110. border: 1px solid @colorOne;
  111.  
  112. .border-radius( @radius );
  113.  
  114. -webkit-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
  115. -moz-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
  116. box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
  117. }
  118.  
  119. .columns(
  120. @count : 3,
  121. @gap : 10
  122. ) {
  123. -webkit-column-count: @count;
  124. -moz-column-count: @count;
  125. column-count: @count;
  126.  
  127. -webkit-column-gap: @gap;
  128. -moz-column-gap: @gap;
  129. column-gap: @gap;
  130. }
  131.  
  132. .box-sizing( @type : border-box ) {
  133. -webkit-box-sizing: @type;
  134. -moz-box-sizing: @type;
  135. box-sizing: @type;
  136. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: firewalker06 on January 22, 2011

You beat me to it :D , I just had the same idea yesterday... http://snipplr.com/view/47683/less-css3/

Posted By: CJness on January 24, 2011

To include this file use this in your less/css: @import: url(classes.less);

Posted By: bdiddymc on January 25, 2011

This class system opens the door for having specific effects, rather than just avoiding vendors.

This one still needs tweaks, but gives an idea: http://www.snipplr.com/view/47826/less--page-curl/

Now would be nice if snipplr had a LESS category

Posted By: roflman79 on March 2, 2011

I've added a CSS3 glossy button using colour functions within LESS, feel free to add it if you want

http://www.snipplr.com/view/49937/css3-bevelled-button-less-mixin/

Posted By: ghprod on December 17, 2011

great!

nice css3

Posted By: ghprod on December 17, 2011

great!

nice css3

You need to login to post a comment.