Shadows are not so common on iOS or MacOS. But having a curated collection of shadows can help your interface, which is why I added it! You can use Shadows by downloading the CSS of Shadows or downloading the full CSS (Not recommended if you are just going to use this component).
Shadows are very simple, just a simple class will do. There are 4 shadow types currently, which are:
p-shadow-1
p-shadow-2
p-shadow-3
p-shadow-4
Usage:
<div class="p-shadow-1"></div>
<div class="p-shadow-2"></div>
<div class="p-shadow-3"></div>
<div class="p-shadow-4"></div>
Sometimes you want to add that effect of depth when the user hovers over your elements and we get that. And how do we achieve that? Hover classes! Usage is similar to the default shadows, just add to after the p-, like so p-to-shadow-1. Or just copy the classes below:
Hover over me!
p-to-shadow-1
Hover over me!
p-to-shadow-2
Hover over me!
p-to-shadow-3
Hover over me!
p-to-shadow-4
Usage:
<div class="p-to-shadow-1"></div>
<div class="p-to-shadow-2"></div>
<div class="p-to-shadow-3"></div>
<div class="p-to-shadow-4"></div>