Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/KennyOliver/neumorphia.css
Modern & neumorphic web elements! :art: :package:
https://github.com/KennyOliver/neumorphia.css
css css-framework css-library designer html modern modern-ui neumorphia neumorphia-css neumorphic neumorphic-ui neumorphism neumorphism-ui styling unique website-design
Last synced: 3 months ago
JSON representation
Modern & neumorphic web elements! :art: :package:
- Host: GitHub
- URL: https://github.com/KennyOliver/neumorphia.css
- Owner: KennyOliver
- License: agpl-3.0
- Created: 2021-03-05T18:10:09.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-12-11T14:35:35.000Z (almost 3 years ago)
- Last Synced: 2024-05-07T11:32:54.584Z (6 months ago)
- Topics: css, css-framework, css-library, designer, html, modern, modern-ui, neumorphia, neumorphia-css, neumorphic, neumorphic-ui, neumorphism, neumorphism-ui, styling, unique, website-design
- Language: CSS
- Homepage: https://kennyoliver.github.io/neumorphia.css/
- Size: 674 KB
- Stars: 16
- Watchers: 1
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-CSS-Resources - neumorphia.css:
README
# neumorphia.css :art: :package:
**Make websites elements modern & beautiful with neumorphia.css!**
Compatible with FontAwesome!
[](https://kennyoliver.github.io/neumorphia.css/)
[](https://kennyoliver.github.io/neumorphia.css/neumorphia.css)
## :package: Dynamic Installation & Updating:
Use this code in the header of your HTML file - neumorphia.css will be automatically updated without your intervention!
```html
```
> #### :chains: To use a specific version:
> ```html
>
> ```
---
## :art: How to use neumorphia.css
This section will go over how to incorporate elements of neumorphia.css in your HTML file.
Make sure to refer back to this when you first begin using neumorphia.css; these instructions may change!
> ### :warning: Quick Heads-Up!
> * **A light background (e.g. white) is not compatible!**
> * Elements are made from **divs**, apart from "hr-bar"
> * **"hr-bar"** is an **exception** to the guidelines for neumorphia.css
> * Instructions will be provided of how to structure your HTML code using containers provided by neumorphia.css
---
### Structuring your Code with "Containers"
neumorphia.css provides a smooth experience if you use "containers".
There a 2 provided: `"chunk"` and `"group"`.
#### "chunk"
Use "chunk" as a container for encapsulating a section of HTML that uses neumorphia.css
`"chunk"` creates a row.
`"chunk"` isn't an element, and therefore does not need the main `"neu"` class.
```html
```
#### "group"
Use `"group"` as a container for encapsulating groups of neumorphia.css elements.
`"group"` will automatically position itself when you have many `"group"`s in the same `"chunk"`
```html
```
> `"group"` can also be used within neumorphia.css elements to help structure their contents or their children elements.
> For example, grouping together 4 buttons (`"squircle"`/`"circle"`) in a 2x2 arrangement.
---
### Elements
```markdown
____ Represents a style
~~~~ Represents an animation
---- Represents an element
```
#### Styling your elements
> **Give all elements the main `"neu"` class.**
```html
```
##### Helper Classes for Styling (mandatory)
:warning: Your elements will not be displayed without one of these!
`flat` | `convex` | `concave` | `inset` | `outset`
Put one of the 5 styles in the gap
```html
```
> Note: underscores represent a style helper class
---
#### "hr-bar"
* `"hr-bar"` is the only exception of elements; but it's very simple to use
* `"neu"` is not needed
* Place it wherever: between `"chunk"`s, `"group"`s, elements, etc.
```html
```
#### "squircle" & "circle"
* Basic buttons
* Expect **1** character (or _FontAwesome_ icon) as the content
* Can be used in `"card"`
_Don't forget the styles!_
```html
CONTENT
CONTENT
```
**Recommended styles:** `convex` | `concave`
**Recommended animation:** `shrink` | `grow`
**Tip:** pair `"convex shrink"` & `"concave grow"`
#### "pill"
* Can be used alone or inside "card"
* Expects at most **6** characters when inside "card"
* When used alone, adapts to size if it has more than **6** characters
```html
```
**Recommended styles:** `inset` | `outset`
#### "card"
* Like a container, but is an element
* Used for holding elements
**Use cases:** [profile card](#create-a-basic-profile-card) | [search bar](#create-a-search-bar)
#### "photo-card"
* Holds images with a small description
```html
CONTENT
```
**Recommended styling:** `"flat"`
**Recommended animation:** `"grow"` (for img)
#### "ring"
* Can contain up to four characters
* Height/width can be changed using inline CSS
* Content can be either text or image
```html
75%
```
> **:warning: "ring" doesn't support styling**
> **Note:** "ring" doesn't display a percentage as a progress bar; `"ring"` is simply a border
**Recommended animation:** grow
**Use cases:** profile picture | percentage ring | [profile trio](#create-a-profile-trio)
---
### Helper Classes for Animations (optional)
* Animate certain elements
`grow` | `shrink`
Animations always go before an element's class, but after a style.
```html
```
---
### Compound Elements
#### Create a basic profile card
```html
Kenny
```
#### Create a search bar
```html
```
#### Create a profile trio
```html
```
---
Kenny Oliver ©2021