Add Depths & Shadows To Block Elements Using Only CSS – blocks.css

Preview:

Description:

blocks.css is a pure CSS library to make block element stand out from the page by applying custom, interactive depths and shadows using pure CSS/CSS3.

How to use it:

Import the minified version of the blocks.css from a CDN.

<link rel="stylesheet" href="https://unpkg.com/blocks.css/dist/blocks.min.css" />

Add the CSS class 'block' to the element and done.

<button class="block">Button</button>
<div class="fixed wrapper block">
  <iframe ...></iframe>
</div>

Make the block element accent using the 'accent' class.

<button class="accent block">Accented Button</button>

Make the block element static (without interactions).

<button class="fixed block">Fixed Button</button>

Override the default variables to create your own styles.

body {
  --block-text-color: #222;
  --block-background-color: #fff;
  --block-accent-color: #00ae86;
  --block-shadow-color: #444;
}