Shadows
Neumorphism shadows
These different shadows are the main feature of neu-axentix. They will allow you to create any component with a neumorphism design. Note that you need to add your neumorphism theme color class to an element before adding a shadow class to any child.
Flat shadow
Create an element with a flat shadow using the neu-flat class.
Pressed shadow
Create an element with a pressed shadow using the neu-pressed class.
Bordered shadow
Create an element with a bordered shadow using the neu-bordered class.
Concave shadow
Create an element with a concave shadow using the neu-concave class.
Large and small shadows
The large and small shadows allow you to choose the shadow you like the most.
To use them, you just have to add the .neu-small or .neu-large class.
The large shadow are really large, so we recomment to space them with the other elements.
Small neu-flat
Neu-flat
Large neu-flat
Dynamic shadows
| Mode name | Description |
|---|---|
| clicked |
Change the neumorphic class when the element is clicked. Click again to reset the neumorphic class. |
| click |
Change the neumorphic class when the mouse is pressed on the element. Release the click to reset the neumorphic class. |
| hover |
Change the neumorphic class when the element is hovered. Stop hovering the element to reset the neumorphic class. |
| focus |
Change the neumorphic class when the element is focused. Stop focusing the element to reset the neumorphic class. |
Examples
-
The first button has a
data-neu-click set to the
.neu-pressed class, so when we hold the click on it, the .neu-pressed
class will switch with his .neu-flat class.
-
The second button has a
data-neu-clicked set to the
.neu-pressed class, so when we click on it, the .neu-pressed
class will switch with his .neu-flat class.
By clicking on it again, they will switch again.
-
The third button has a
data-neu-hover set to the
.neu-pressed, so it will switch to this shadow once hovered.
-
The forth example is an input, it has a
data-neu-focus set to the
.neu-pressed, so it will switch to this shadow once focused.
data-neu-click set to the
.neu-pressed class, so when we hold the click on it, the .neu-pressed
class will switch with his .neu-flat class.
data-neu-clicked set to the
.neu-pressed class, so when we click on it, the .neu-pressed
class will switch with his .neu-flat class. By clicking on it again, they will switch again.
data-neu-hover set to the
.neu-pressed, so it will switch to this shadow once hovered.
data-neu-focus set to the
.neu-pressed, so it will switch to this shadow once focused.