Skip to content

Instantly share code, notes, and snippets.

@ct27stf
Created November 23, 2012 10:40
Show Gist options
  • Save ct27stf/4135054 to your computer and use it in GitHub Desktop.
Save ct27stf/4135054 to your computer and use it in GitHub Desktop.
Photoshop effects in LESS
.linear-gradient (@angle:90deg, @startcolor, @endcolor) {
@w3c-angle: @angle - 90;
background-color: @startcolor;
background: -webkit-linear-gradient(@angle, @startcolor, @endcolor);
background: -moz-linear-gradient(@angle, @startcolor, @endcolor);
background: -ms-linear-gradient(@angle, @startcolor, @endcolor);
background: -o-linear-gradient(@angle, @startcolor, @endcolor);
background: linear-gradient(@w3c-angle, @startcolor, @endcolor);
}
.photoshop-drop-shadow (@angle: 120, @distance: 5, @spread: 0, @size: 5, @color: rgba(0,0,0, 0.75)) {
@angle_rad: ~`(180 - @{angle}) * Math.PI / 180`;
@offset-x: ~`Math.round( Math.sin( @{angle_rad} ) * @{distance} ) + 'px'`;
@offset-y: ~`Math.round( Math.cos( @{angle_rad} ) * @{distance} ) + 'px'`;
@css_spread: @size * @spread / 100;
@spread-radius: ~`Math.round( @{css_spread} ) + 'px'`;
@blur-radius: ~`Math.round( (@{size} - @{css_spread}) ) + 'px'`;
-moz-box-shadow: @offset-x @offset-y @blur-radius @spread-radius @color;
-webkit-box-shadow: @offset-x @offset-y @blur-radius @spread-radius @color;
-o-box-shadow: @offset-x @offset-y @blur-radius @spread-radius @color;
box-shadow: @offset-x @offset-y @blur-radius @spread-radius @color;
}
.photoshop-inner-shadow (@angle: 120, @distance: 5, @spread: 0, @size: 5, @color: rgba(0,0,0, 0.75)) {
@angle_rad: ~`(180 - @{angle}) * Math.PI / 180`;
@offset-x: ~`Math.round( Math.sin( @{angle_rad} ) * @{distance} ) + 'px'`;
@offset-y: ~`Math.round( Math.cos( @{angle_rad} ) * @{distance} ) + 'px'`;
@css_spread: @size * @spread / 100;
@spread-radius: ~`Math.round( @{css_spread} ) + 'px'`;
@blur-radius: ~`Math.round( (@{size} - @{css_spread}) ) + 'px'`;
-moz-box-shadow: inset @offset-x @offset-y @blur-radius @spread-radius @color;
-webkit-box-shadow: inset @offset-x @offset-y @blur-radius @spread-radius @color;
-o-box-shadow: inset @offset-x @offset-y @blur-radius @spread-radius @color;
box-shadow: inset @offset-x @offset-y @blur-radius @spread-radius @color;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment