pn

project-neon

Neon is a very Simple, Modern, easy to use CSS based library that inherits effect from background

Showing:

Popularity

Downloads/wk

5

GitHub Stars

10

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

project-neon

Neon is a very simple Modern, easy to use CSS based library. Neon made with an awesome variation of CSS3 Filter, Box shadow, Background inherit property that takes neon effect from your background Image. Neon inspired by Microsoft Fluent Design concept.

Neon will provide a revolutionary user experience on your website Buttton, Modal, Hover effect, Navigation, Dropdown Menu etc. Neon is an eloquent CSS effect for a complex world.

Demo: coderentor.com/project-neon

Installation

npm

npm install --save project-neon

Now add it to your project:

<html>
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="/path/to/neon.min.css">
  </head>
  <body>
    ...
  </body>
</html>

Usage

Neon takes effect from your parent div background image.

HTML

<div class="demo-bg">
    <button class="neon-info-hi">Demo button</button>
</div>

CSS

    .demo-bg{
        background: url("../path/to/image.jpg") fixed;
        /* set your custom CSS */
    }
    /* customize your button  for better look  */

Options

You can set saven different colors & four different effect

Neon options

MainColorEffectCSS Class
NeonStandardStandard.neon-st-st
NeonStandardMedium.neon-st-md
NeonStandardHigh.neon-st-hi
NeonStandardExtra High.neon-st-ex-hi
NeonLightStandard.neon-light-st
NeonLightMedium.neon-light-md
NeonLightHigh.neon-light-hi
NeonLightExtra High.neon-light-ex-hi
NeonDarkStandard.neon-dark-st
NeonDarkMedium.neon-dark-md
NeonDarkHigh.neon-dark-hi
NeonDarkExtra High.neon-dark-ex-hi
NeonsuccessStandard.neon-success-st
NeonsuccessMedium.neon-success-md
NeonsuccessHigh.neon-success-hi
NeonsuccessExtra High.neon-success-ex-hi
NeonwarningStandard.neon-warning-st
NeonwarningMedium.neon-warning-md
NeonwarningHigh.neon-warning-hi
NeonwarningExtra High.neon-warning-ex-hi
NeondangerStandard.neon-danger-st
NeondangerMedium.neon-danger-md
NeondangerHigh.neon-danger-hi
NeondangerExtra High.neon-danger-ex-hi
NeoninfoStandard.neon-info-st
NeoninfoMedium.neon-info-md
NeoninfoHigh.neon-info-hi
NeoninfoExtra High.neon-info-ex-hi
NeonpurpleStandard.neon-purple-st
NeonpurpleMedium.neon-purple-md
NeonpurpleHigh.neon-purple-hi
NeonpurpleExtra High.neon-purple-ex-hi

Licence

Neon is under MIT licence

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100