CSS3 LESS a fork in progress

CSS3-transitional.less.css

//
// Rounded Corners
//

.border-radius(@radius)
  -moz-border-radius: @radius
  -webkit-border-radius: @radius
  border-radius: @radius
  
.border-top-left-radius(@radius)
  -moz-border-radius-topleft: @radius
  -webkit-border-top-left-radius: @radius
  border-top-left-radius: @radius
  
.border-top-right-radius(@radius)
  -moz-border-radius-topright: @radius
  -webkit-border-top-right-radius: @radius
  border-top-right-radius: @radius
  
.border-bottom-left-radius(@radius)
  -moz-border-radius-bottomleft: @radius
  -webkit-border-bottom-left-radius: @radius
  border-bottom-left-radius: @radius
  
.border-bottom-right-radius(@radius)
  -moz-border-radius-bottomright: @radius
  -webkit-border-bottom-right-radius: @radius
  border-bottom-right-radius: @radius

.border-top-radius(@radius)
  +border-top-right-radius(@radius)
  +border-top-left-radius(@radius)
  
.border-bottom-radius(@radius)
  +border-bottom-right-radius(@radius)
  +border-bottom-left-radius(@radius)
  
.border-left-radius(@radius)
  +border-top-left-radius(@radius)
  +border-bottom-left-radius(@radius)
  
.border-right-radius(@radius)
  +border-top-right-radius(@radius)
  +border-bottom-right-radius(@radius)
  
//
// Box Shadow
//

.box-shadow(@x, @y, @blur, @color : black)
  -moz-box-shadow: @x @y @blur @color /* FF3.5+ */
  -webkit-box-shadow: @x @y @blur @color /* Saf3.0+, Chrome */
  box-shadow: @x @y @blur @color /* Opera 10.5, IE 9.0 */
  // IE 6, 7
  filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX.@x, OffY.@y, Color.'@color')"
  // IE 8
  -ms-filter: "\"progid:DXImageTransform.Microsoft.dropshadow(OffX.@x, OffY.@y, Color.'@color')\""
  
//
// Gradients
//

.vertical-gradient(@from, @to, @bgcolor : "")
	background-color: @bgcolor
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@from), to(@to))
  background-image: -moz-linear-gradient(top, @from, @to)
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr.'@from', endColorstr.'@to')
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr.'@from', endColorstr.'@to')"

.horizontal-gradient(@from, @to, @bgcolor : "")

    background-color: @bgcolor
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@from), to(@to))
  background-image: -moz-linear-gradient(top, @from, @to)
  // No IE style that I'm aware of does this.


//
// Rotation
//

.rotate(@degrees)
  @percent: @degrees / 360.0;
  -moz-transform: rotate(@degreesdeg)
  -o-transform: rotate(@degrees)
  -webkit-transform: rotate(@degreesdeg)
  filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation.@percent)
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation.@percent)"

intro.markdown

CSS3 for Less

This is a simple LESS file that provides a number of useful mixins to achieve CSS3 effects cross-browser. For each rule, the styles are implemented for as many browsers as possible.

Box Effects

Rounded Corners

Syntax

.border-radius(@radius)
.border-[top|bottom]-[left|right]-radius(@radius)
.border-[top|bottom|left|right]-radius(@radius)

Browser Support

• Firefox
• Safari
• Chrome
• Opera

Drop Shadows

Syntax

.box-shadow(@x-offset, @y-offset, @blur, @color)

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• IE (no custom blur amount, no rgba colors)

Gradients

Syntax

.vertical-gradient(@from-color, @to-color)
.horizontal-gradient(@from-color, @to-color)

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• IE (vertical only)

Transformations

Rotate

Syntax

.rotate(@degrees)

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• IE