Welcome to the navigation

Nulla duis aliquip exercitation enim cillum sunt proident, aliqua, incididunt ut in velit magna voluptate elit, officia nisi laborum, dolore aute esse minim dolore do. Esse incididunt quis consequat, ex irure est et dolore excepteur mollit elit, commodo labore enim minim dolore eu ullamco in qui reprehenderit proident, aliquip ut

Yeah, this will be replaced... But please enjoy the search!

LESS CSS Drop Shadow "Generator" mixin

Categories Tags

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);
    }
}