Add neumorphism (soft UI) design to your Html/CSS site.
Soft UI is yet another amazing design trend to join the playground.
It enables you to build beautiful design elements to your site that are easy on the eyes. the illusion shown in the fig below is achieved by making clever use of CSS outer and inner shadow.
I was impressed by the resulting interfaces but couldn’t find many existing libraries that implemented this.
It took it as a fun challenge to create a lightweight package that will offer building blocks to allow you to make your own neumorphic elements. Let me give you a quick tour…
Before that, I’d like to show you an existing project that was built with some components from the package.
You can view the live project build with react and gatsby here and the GitHub repository is here.
Enough talking, let’s get into the code;
To get started, first, you will need to add the package to your dependencies with npm or yarn.
npm install soft-ui-library# OR if you are using yarnyarn install soft-ui-library
The next step will be to import the CSS file with this command 👇
import "soft-ui-library/dist/css/neumorphism-ui.css"To work with pure HTML, without the import/require syntax, simply copy the CSS here in your project and you’ll be good to go.
Now that everything is installed, I’ll give you a quick tour of a couple of existing components you can use in your own designs.
INPUT ELEMENTS & BUTTONS
The library implements text, password field, text areas and buttons with a neumorphic approach, try the code below on your favorite text editor
<input type="text" class="sul-text-field" />
<input type="password" class="sul-text-field"/><a class="sul-btn">
<i class="fas fa-sign-in-alt"></i>Button
</a><textarea class="sul-text-field"></textarea><a class="sul-btn btn-primary">
<i class="fas fa-sign-in-alt"></i>
Button Primary
</a>
Here is the result. dead simple!
BOXES
We have boxes with fun hover effects too! simply append the “with-hover” class name to activate the hover effect. Try the code below
<div class="sul-box-raised-1 with-hover">
.box-raised-1 .with-hover
</div>Just as simple!
For a more detailed tour including every component, have a look at the documentation with examples.
DARK/LIGHT MODE
To toggle between the dark and light mode, simply add one of ‘dark-mode’ or ‘light-mode’ classes to the body of your HTML and you will be good to go.
There you have it, how to add neumorphism to your site, if you’d like to add/edit components in the library, your PR will be most welcome.
Loved the article? send your feedback!
