Sirensong Loading
Shella-4-6-2-V14

Colors

Gradients

Typography

Buttons

Links

Default form elements

Paragraphs, font-sizing, etc...

rte paragraphs, lists...

various styles and lists


  • this ul
  • is class:
  • list-unstyled

  • this ul is class: rte
  • isn't it
  • pretty?
  1. this ol
  2. is class:
  3. alpha

  1. this ol
  2. is class:
  3. 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

prettyshadow
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">
.mcard
.mround
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
np-element

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

Hover
    	Example:    	<div class="np-element np-hover"></div>    
Hover inverse

Integrates an inverse hover neumorphism shadow effect

Hover inverse
    	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>    
Pre-loader