Stylish Faux-3D Effect In Pure CSS – Prism

Category: CSS & CSS3 | August 21, 2017
Views Total:393 views
Official Page:Go to website
Last Update:August 21, 2017


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">

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>

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
    mix($prism_bg_min, $prism_bg_base, 75%)
    mix($prism_bg_min, $prism_bg_base, 50%)
    mix($prism_bg_min, $prism_bg_base, 25%)
    mix($prism_bg_max, $prism_bg_base, 25%)
    mix($prism_bg_max, $prism_bg_base, 50%)
    mix($prism_bg_max, $prism_bg_base, 75%)
    mix($prism_sh_min, $prism_sh_base, 75%)
    mix($prism_sh_min, $prism_sh_base, 50%)
    mix($prism_sh_min, $prism_sh_base, 25%)
    mix($prism_sh_max, $prism_sh_base, 25%)
    mix($prism_sh_max, $prism_sh_base, 50%)
    mix($prism_sh_max, $prism_sh_base, 75%)

You Might Be Interested In:

Leave a Reply