Snippet: CSS 3 Vendor Prefixes in LESS CSS

  1. .rotate(@deg: 7deg){
  2.   -webkit-transform: rotate(@deg);
  3.   -moz-transform: rotate(@deg);
  4.   -o-transform: rotate(@deg);
  5.   transform: rotate(@deg);
  6. }
  7. .box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  8.   @val: @x @y @blur rgba(0, 0, 0, @alpha);
  9.   box-shadow: @val;
  10.   -webkit-box-shadow: @val;
  11.   -moz-box-shadow: @val;
  12. }
  13. .transition(@property, @duration, @effect){
  14.   @val: @property @duration @effect;
  15.   -webkit-transition: @val;
  16.   -moz-transition: @val;
  17.   -o-transition: @val;
  18.   transition: @val;
  19. }
  20. .scale(@mod){
  21.   -moz-transform: scale(@mod);
  22.   -webkit-transform: scale(@mod);
  23.   -o-transform: scale(@mod);
  24.   transform: scale(@mod);
  25. }
  26. .rotate-and-scale(@deg,@mod){
  27.   -moz-transform: scale(@mod) rotate(@deg);
  28.   -webkit-transform: scale(@mod) rotate(@deg);
  29.   -o-transform: scale(@mod) rotate(@deg);
  30.   transform: scale(@mod) rotate(@deg);
  31. }
  32. .border-radius(@rad){
  33.   -moz-border-radius: @rad;
  34.   -webkit-border-radius: @rad;
  35.   border-radius: @rad;
  36. }

This snippet works with LESS CSS, a dynamic extension of CSS writing. Learn to save more time and focus on development with LESS CSS.

Comments

 Give your comments about this article

 Give comment







Back to Top
logovcard

I am a website designer who create website that really works and easy to use. I am capable of creating website with XHTML, CSS, and jQuery. WordPress is my preferred tools of trade.

Saya adalah seorang desainer website yang mampu membuat website yang benar-benar berfungsi dan mudah digunakan. Saya dapat membuat website dengan XHTML, CSS dan jQuery. WordPress adalah piranti pilihan saya.

My Photo
Archive
 
I am not available for design work at this time
Saya tidak bisa menerima pekerjaan desain untuk saat ini