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 & Blur 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>
Blur is used pretty commonly along macOS and iOS apps, we have created a collection of curated blur levels for your usage in your apps. Keep in mind that blur levels also include a background, that you can override if you desire.
p-blur-1
p-blur-2
p-blur-3
p-blur-4
Usage:
<div class="p-blur-1"></div>
<div class="p-blur-2"></div>
<div class="p-blur-3"></div>
<div class="p-blur-4"></div>