Colors
Gradients
Typography
Buttons
Links
Default form elements
Paragraphs, font-sizing, etc...
rte paragraphs, lists...
various styles and lists
- this ul has no specified class
- Strong
- Emphasis
- a class="link-unstyled"
- Strike
- Sup
- this ul
- is class:
- list-unstyled
- this ul is class: rte
- isn't it
- pretty?
- this ol
- is class:
- alpha
- this ol
- is class:
- numbr
- this ul
- is class:
- asterisk
Blockquotes
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.The author of the quote
Various Shadows
dropshadow
shadow2
shadowcurve
More stuff...
<div class="gradient-block">
<div class="gradient-blocky">
<div class="neu">
<div class="neu2">
<div class="neu3">
<div class="waterheart">
<div class="seethis w-100 mb-50> (note that it has it's own centered positioning built-in)<
.seethis {
font-weight: 600;
padding: 18px;
position: relative;
left: 50%;
transform: translateX(-50%);
border-radius: 255px 25px 225px 19px/15px 235px 25px 185px;
animation: animatedgradient 6s ease-in-out infinite alternate;
background: #000 linear-gradient(45deg, #000, #2f0d3a, #10092d, #192040, #381244, #000);
background-size: 400% 400%;
border: 10px inset #261763}
.seethis, .seethis > p {
color: #fff;
text-shadow:none;
text-align:center
}
<div class="seeit w-100 mb-50">
div class="wave-ocean" (with 3 svg waves...)
Here is a 300px high div class="ripped".
(It's only fancy once screen gets large.)
div class="wborder"
div class="seascape" div class="seamask"
‹div class="fillerbg"› ‹div class="filler clip-circle"›‹/div› ‹/div›
div class="water-animated" div class="watermask"
Neumorphic css!
<div class="neu pseudo-hover">
class="np-element np-hover np-circle-xxl np-shadow-border-circle-push mb-3 mr-3 softsqueeze"
Basic Element
Integrates an element with base neumorphism design
Trying out the .np-text-shadow class here on default text and #d1b5b5 bg
Trying out the np-d-text-shadow on dark bg with white text
Shadows
Integrates an element with diferent shadows
Example: <div class="np-element np-hover np-square-xxl np-shadow-double"></div> <div class="np-element np-hover np-square-xxl np-shadow"></div> <div class="np-element np-hover-inverse np-square-xxl np-shadow-inverse"></div> <div class="np-element np-hover np-square-xxl np-shadow-border-square"></div> <div class="np-element np-hover np-square-xxl np-shadow-border-square-push"></div> <div class="np-element np-hover np-circle-xxl np-shadow-border-circle"></div> <div class="np-element np-hover np-circle-xxl np-shadow-border-circle-push"></div>
Lists
- List element
- List element
- List element
- List element
- List element
Example: <ul class="np-list"> <li class="np-list-element">List element</li> <li class="np-list-element">List element</li> <li class="np-list-element">List element</li> <li class="np-list-element">List element</li> <li class="np-list-element">List element</li> </ul>
Hovers
Integrates an hover neumorphism shadow effect
Example: <div class="np-element np-hover"></div>
Hover inverse
Integrates an inverse hover neumorphism shadow effect
Example: <div class="np-element np-shadow-inverse np-hover-inverse"></div>
Buttons
Example: <button class="np-btn">+</button> <button class="np-btn np-square-sm">+</button> <button class="np-btn np-circle-sm">+</button>
Dividers
Example: <div class="np-divider"></div> <div class="np-divider-fat"></div>
Shapes
Squares
Circles
Example: Sizes: sm - md - lg - xl - xxl <button class="np-element np-hover np-square-$size"></button> <button class="np-element np-hover np-circle-$size"></button>
Forms
<form class="np-form-group py-15 mb-15"> <label class="np-text-accent" for="np-form-element1">Label for np-form-group > np-form-element input</label> <input id="np-form-element1" type="text" class="np-form-element" value="Value" placeholder="Placeholder"> <label for="np-option-select">Label</label> <select name="np-option-select" id="np-option-select" class="np-form-element"> <option value="1">Value</option> <option value="1">Value</option> <option value="1">Value</option> <option value="1">Value</option> <option value="1">Value</option> </select> </form>