Ever needed a neat way to generate drop shadow using LESS? Here's a simple mixin for that
// boxshadow mixin from www.herlitz.nu .boxshadow(@horizontalOffset: 0, @verticalOffset: 0, @blur: 10px, @color: #000, @opacity: 0.8, @spread: 0, @inset: false ) { @red: red(@color); @green: green(@color); @blue: blue(@color); & when (@inset = true) { -webkit-box-shadow: inset @horizontalOffset @verticalOffset @blur @spread rgba(@red, @green, @blue, @opacity); -moz-box-shadow: inset @horizontalOffset @verticalOffset @blur @spread rgba(@red, @green, @blue, @opacity); box-shadow: inset @horizontalOffset @verticalOffset @blur @spread rgba(@red, @green, @blue, @opacity); } & when (@inset = false) { -webkit-box-shadow: @horizontalOffset @verticalOffset @blur @spread rgba(@red, @green, @blue, @opacity); -moz-box-shadow: @horizontalOffset @verticalOffset @blur @spread rgba(@red, @green, @blue, @opacity); box-shadow: @horizontalOffset @verticalOffset @blur @spread rgba(@red, @green, @blue, @opacity); } }
Usage examples
<div> <div class="test-box my-box1">my-box1</div> <div class="test-box my-box2">my-box2</div> <div class="test-box my-box3">my-box3</div> <div class="test-box my-box4">my-box4</div> <div class="test-box my-box5">my-box5</div> </div>
.test-box { width: 150px; height: 50px; margin: 50px; background-color:#ddd; text-align: center; line-height: 50px; &.my-box1{ .boxshadow(); } &.my-box2{ .boxshadow(@spread: 3px, @blur: 15px); } &.my-box3{ .boxshadow(@horizontalOffset: 3px, @verticalOffset: 7px); } &.my-box4{ .boxshadow(@inset: true); } &.my-box5{ .boxshadow(@color: blue, @opacity: 1, @blur: 15px, @spread: 1px); } }