LESS Long Shadow

This LESS loop mixins generates trendy flat long shadow with any angle for inline text, font icons, block elements and SVGs. Looks best if wrapped by square overflow: hidden; container with bold padding and rounded corners. Dont forget about good contrast color palette. Enjoy!

• Source: GitHub
• Demo: CodePen
• Author: Di M Dub

Installation

1. Make shure that you installed client or server-side LESS css-preprocessor
2. Clone git repo or Download and copy long-shadow.less to your e.g. /assets/less directory
3. Plug it to project by insert @import "long-shadow.less"; at beginning of main LESS/CSS stylesheet file
4. Assign mixins to elements rules.
5. PROFIT

Usage

.someClass {
    #long-shadow.inline(@color, @angle, @size); // For text or icon
    #long-shadow.block(@color, @angle, @size, @prefix); // For container
    #long-shadow.svg(@color, @angle, @size, @prefix); // For SVG
}

Params

• @color of shadow e.g. #00FFFF, @someVariable or darken(#00FFFF):
  • Default #CCCCCC.
• @angle of shadow from 0 to 360. Zero meant horizontal shadow with right direction:
  • Default 45.
• @size that shadow length would be:
  • Default 10.
• @prefix param define the use of CSS browser-prefixes for box-shadow or filter rule:
  • 0 : false
  • 1 : true Default

Be careful with large values of the param size with client-side compiling. Using LESS in the browser is great for development, but it's not recommended for production due low performance.

Contributing & Issues

Have a bug or a feature request? Please open a new issue. Before opening any issue, please search for existing issues.

TODO

• Correctly implement spread transparency.
• Add support for shadows on SVG.
• Add ability to specify an angle of shadow.

Changelog

2.1.1

• Fix default color var. Thanx to Sergey Pimenov.

2.1.0

• Add support for shadows on SVG by Randall Bruder.

2.0.0

• INCOMPATIBLE CHANGES! Add namespace and rename mixins.
• Add ability to specify an angle of shadow. Idea Mark Campbell.
• Add option to choose whether to use browser-prefixes.
• Remove spread parameter. Now total flat shadow.

1.0.0

• Initial release.

License

MIT License