Stylish Faux-3D Effect In Pure CSS – Prism

Prism.css is a pure CSS library which applies interactive, nested faux-3D effects to elements using pure CSS/CSS3.

Basic usage:

Load the compiled stylesheet in the document.

<link rel="stylesheet" href="prism-blue/prism.css">

Add the ‘prism-THEME-base’ class to the container.

<div class="prism-red-base">
  ...
</div>

Apply the faux-3D effects to your elements.

<div class="prism-red-base">
  <div class="box-1 prism-box-lg"></div>
  <div class="box-2 prism-box-sm"></div>
  <div class="box-3 prism-notch-sm"></div>
  <div class="box-4 prism-notch-lg"></div>
  <div class="box-4 prism-blank"></div>
</div>

Customize the faux-3D effects in the ‘_prism-config.scss’:

// General configuration
$prism_base_suffix: base;
$prism_base_index: 5;
$prism_max_nesting: 2;
$prism_transition_duration: 0.2s;
$prism_shadow_offset_lg: 4px;
$prism_shadow_offset_sm: 2px;
// Convenience color variables - not used directly by prism.scss
$prism_bg_max: #FFFFFF;
$prism_bg_base: #808080;
$prism_bg_min: #000000;
$prism_sh_max: mix(black, $prism_bg_max, 10%);
$prism_sh_base: mix(black, $prism_bg_base, 10%);
$prism_sh_min: mix(black, $prism_bg_min, 10%);
// Color output
$prism_bg_list:
    $prism_bg_min
    mix($prism_bg_min, $prism_bg_base, 75%)
    mix($prism_bg_min, $prism_bg_base, 50%)
    mix($prism_bg_min, $prism_bg_base, 25%)
    $prism_bg_base
    mix($prism_bg_max, $prism_bg_base, 25%)
    mix($prism_bg_max, $prism_bg_base, 50%)
    mix($prism_bg_max, $prism_bg_base, 75%)
    $prism_bg_max;
$prism_sh_list:
    $prism_sh_min
    mix($prism_sh_min, $prism_sh_base, 75%)
    mix($prism_sh_min, $prism_sh_base, 50%)
    mix($prism_sh_min, $prism_sh_base, 25%)
    $prism_sh_base
    mix($prism_sh_max, $prism_sh_base, 25%)
    mix($prism_sh_max, $prism_sh_base, 50%)
    mix($prism_sh_max, $prism_sh_base, 75%)
    $prism_sh_max;
$prism_tx_list:
    $prism_bg_max
    $prism_bg_max
    $prism_bg_max
    $prism_bg_max
    $prism_bg_max
    $prism_bg_max
    $prism_bg_min
    $prism_bg_min
    $prism_bg_min;