LESS MIXINS for Highlighting Images

.arrow(@weight, @length, @rotation, @color);

A simple straight arrow mixin

Parameters and default values:

@weight: 4px (the stroke weight of the line)
@length: 100px (the length of the line)
@rotation: 0deg (the direction of the arrow)
@color: orange (self-explanatory)

.arrow-extended(@weight, @length, @rotation, @ext-angle, @ext-length, @color);

An arrow with an added line to make more complex paths

Parameters and default values:

@weight: 4px (the stroke weight of the line)
@length: 100px (the length of the line)
@rotation: 0deg (the direction of the arrow)
@ext-angle: 90deg (the direction the extra line will extend... values closer to right angles work better)
@ext-lenght: 100px (the length of the additional line)
@color: orange (self-explanatory)

.circle-line(@weight, @diameter, @length, @rotation, @color);

A line with a circle at the end for highlighting an area

Parameters and default values:

@weight: 4px (the stroke weight of the line)
@diameter: 20px (the size of the circle)
@length: 100px (the lenght of the line)
@rotation: 0deg (the direction of the line)
@color: orange (self-explanatory)

.circle-line-extended(@weight, @diameter, @length, @rotation, @ext-angle, @ext-length, @color);

A circle-line with an additional line for complex paths

Parameters and default values:

@weight: 4px (the stroke weight of the line)
@diameter: 20px (the size of the circle)
@length: 100px (the length of the line)
@rotation: 0deg (the direction of the line)
@ext-angle: 90deg (the direction of the additional line)
@ext-length: 100px (the length of the addtional line)
@color: orange (self-explanatory)

.box-line(@weight, @length, @box-width, @box-height, @rotation, @color);

A line with a box on the end for highlighting an area.

Parameters and default values:

@weight: 4px (the stroke weight of the line)
@length: 100px (the length of the line)
@box-width: 20px (the width of the box)
@box-height: 20px (the height of the box)
@rotation: 0deg (the direction of the line)
@color: orange (self-explanatory)

.box-line-extended(@weight, @length, @box-width, @box-height, @rotation, @ext-angle, @ext-length, @color);

A box line with an additional line for complex paths

Parameters and default values:

@weight: 4px (the stroke weight of the line)
@length: 100px (the length of the line)
@box-width: 20px (the width of the box)
@box-height: 20px (the height of the box)
@rotation: 0deg (the direction of the line)
@ext-angle: 90deg (the direction of the additional line)
@ext-length: 100px (the length of the additional line)
@color: orange (self-explanatory)

Additionally, add ".active" to any of these classes for a flashing animation on the line.

Image Labels

This mixin allows the easy addition of a text label to any image or div. The HTML:

    <div id="labeled-img">
      <img src="#" alt="" />
      <p>HELLO LABEL WORLD!</p>
    </div>

Apply one of the following mixins to #labeled-img in your LESS. Any direct child img of the containing div (#labeled-img in this case) will have a width of 100% applied, and any direct child p will have appropriate positioning based on the arguments passed to the mixin.

My Bottom Label

My Top Label

My Left Label

My Right Label

LESS Mixins for Image Highlighting

Image Labels