LESS Long Shadow

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

• Source: https://github.com/zensimilia/less-long-shadow
• Author Twitter: @zensimilia

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 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. Enjoy!

Usage

.box {
	overflow: hidden;

	.longShadow(@color, @size, @spread);
	.longShadowBox(@color, @size, @spread);
}

Params

• @color of shadow e.g. #00FFFF, @buttonShadowColor or darken(#00FFFF).
• @size in pixels that shadow would be.
• @spread shadow opacity. Greater value - straighter edges. Defaults:
• longShadow: 100
• longShadowBox: 1

Issues

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

Changelog

1.0

• Initial release

Copyright and license

MIT License