Welcome to the navigation

Reprehenderit id dolore ut anim incididunt mollit irure in aliqua, aute do quis consectetur laborum, proident, ipsum in minim est exercitation qui magna veniam, cillum. Ullamco aliquip lorem velit aute anim pariatur, nulla aliqua, officia eiusmod incididunt dolore in cillum excepteur sunt ea dolor tempor irure eu reprehenderit sint dolor

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 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>
.test-box {
    width: 150px;
    height: 50px;
    margin: 50px;
    text-align: center;
    line-height: 50px;

        .boxshadow(@spread: 3px, @blur: 15px);
        .boxshadow(@horizontalOffset: 3px, @verticalOffset: 7px);

        .boxshadow(@inset: true);
        .boxshadow(@color: blue, @opacity: 1, @blur: 15px, @spread: 1px);
Please note that this portal is a BETA site , I will continuously improve all functionality and performance during the coming weeks / the author