CSS 3D Text-Shadow Magic with Less.js

I just found Mark Ottos CSS-based 3D-Text. His CSS class is fixed to a certain font-size, and I decided to create a Less-class for this. Here it is:

.shadow-3d (@color: #fff, @size: 20px) {
    @o: @size/80;
    @c: @color - 48;
    color: @color;
    font-size: @size;
    text-shadow:
        0 @o    0 @c - 8,
        0 @o*2  0 @c - 16,
        0 @o*3  0 @c - 24,
        0 @o*4  0 @c - 32,
        0 @o*5  0 @c - 48,
        0 @o*6  @o    rgba(0,0,0,.1),
        0 0     @o*5  rgba(0,0,0,.1),
        0 @o*1  @o*3  rgba(0,0,0,.3),
        0 @o*3  @o*5  rgba(0,0,0,.2),
        0 @o*5  @o*10 rgba(0,0,0,.25),
        0 @o*10 @o*10 rgba(0,0,0,.2),
        0 @o*20 @o*20 rgba(0,0,0,.15);
}

And here you can see it in action (via Less-compiled CSS-classes):

Big Text

Small Text

Now isn't that fancy?
Stay tuned for more magic with modern web-technologies!

-- Juve