Please forgive my poor english, code is my native toungue My disclaimer is I wanted to do it in LESS I have no preference for Sass or LESS. They are both awesome. But LESS doesn't get enough CSS lovin.

So after this flat movement started it was not long before Folks started writing flat Shadow mixins such as this(shameless plug):

But I thought to myself why are shadows always in a straight line? Why dont they curve as they go to the end point? Can a box shadow curve over the course of a loop? Can you control how much it curves or even where it curves? Can you animate multiple box-shadows on the same div at the same time?

Not only can you bend the shadow in the loop but you can animate it

Well in fact all these things are possible if you dont mind your machine being brought to its knees. I thought it would be greate to animate characters with moving body parts that were fluid, but you really wont get beyond a 1 second animation if you lucky.

Regarless this technique is useful for creating still shots or maybe even slight small scale animations. So I will break down what is going on:

  .splineArm(@color,
@size:0,
@max:3,
@length:100, 
@curve:100, 
@tmp: '') when ( @size < @max){

@t:@size;

@x:@t*@length;  

@y:@curve * sin(@t); 

@shadow:~'@{x}px @{y}px 0 0 @{color}';

@ends: ~"@{shadow}, @{tmp}";

@shadowString: ~"@{ends} 0px 0px 0 0 #000";

.bendArm(@string, @index, @total) when (@index <@total){

    -webkit-box-shadow: @string;

    -moz-box-shadow: @string;

    box-shadow: @string;   

}

.bendArm(@shadowString,@t + .05,@max);

.splineArm(@color,@size + .05,@max,@length, @curve, @ends);
}

There are plenty of mathmatical ways to contruct a spline but I wanted the simplist controls, and decided to go with a sin curve.

In its simplist form the equation comes down to: curve *sin(t); where the curve controls the peak of the bend and t controls where you are in reference to the peak. So lets break down each line of this mixin to see what makes it tick:

.splineArm(@color,@size:0,@max:3,@length:100, @curve:100, @tmp: '') when ( @size < @max){}

At the very start we can se all the setting I will be usising. @color is self-explanitory

@size will not be touched but needs to be less than the max in order for it to run.

@max has controls the distance from the origin, in the image above you see multiple curves, well the furthur the distance from the origin the more curves you can create. By default 3 only iterates over 1 full curve. lowering the number affects the location of the curve.

@length controls the number of iteration between the origin and the max, so it can be smooth or dotted.

@curve controls the height of the actual curve.

@tmp will pass the shadow

when ( @size < @max) because this is a loop at some point size will be equal to max at which point it stops running.

  @t:@size;
@x:@t*@length;  
@y:@curve * sin(@t); 

@t set to 0

@x set to @t or 0 * length or 100 = 0 As the loop progesses so does this number but its a straight number so it goes in one direction.

@y: this is where the sin curve happens and is mapped to y if you switch @y and @x you get a verticle curve.

  @shadow:~'@{x}px @{y}px 0 0 @{color}';
@ends: ~"@{shadow}, @{tmp}";
@shadowString: ~"@{ends} 0px 0px 0 0 #000"; 

@shadow so no you map out @x to x in the shadow and map out @y to y of a box-shadow oh and our color, I only choose to alter the x,y,and color but I did not touch the blur or that other thing.*dont judge me!

@end so you have 1,1,0,0,#111, ; the @tmp starts empty but we will pass it a value later

@shadowString: 1,1,0,0,#111, ,0px 0px 0 0 #000";

@shadowString: ~"@{ends} 0px 0px 0 0 #000"; ...The shadow string will map shadow over the loop.

     .bendArm(@string, @index, @total) when (@index <@total){
   -webkit-box-shadow: @string;

    -moz-box-shadow: @string;

    box-shadow: @string;   

}

.bendArm(@shadowString,@t + .05,@max);

.splineArm(@color,@size + .05,@max,@length, @curve, @ends);

So something happens here! In my John Madden voice

We create a function that ask for a string to supply for a box-shadow a index number to iterate and a total aka @max. Next we call that that function that sets our box-shadow and while calling that function we set @t to start increasing well! @t will increase until its equal to our max and this function states when that happens stop running. BUT WAIT THERES MORE

We then call our spline to run inside itself. I dunno why LESS and SCSS can do this but its cool! but remember it will only run while size is less than max. and everytime either runs it adds .05. Remeber those equations earlier @x and @y, well as the size increase so does the number for the problem. And then my friend you create this nice little curve for I have no clue what I just wanted to test out the blog feature!


1,681 0 1