Skip to content

LESS loop mixins generates flat-trendy long shadows for any inline-text, font-icons, SVG or block-elements.

License

Notifications You must be signed in to change notification settings

zensimilia/less-long-shadow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

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!

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

2.1.0

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

About

LESS loop mixins generates flat-trendy long shadows for any inline-text, font-icons, SVG or block-elements.

Topics

Resources

License

Stars

Watchers

Forks

Languages