Press "Enter" to skip to content

A Stylish Faux-3D Effect In Pure CSS | prism

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

3d image view javascript, webgl image effects, javascript image animation effects, 3d photo effect website, cool javascript animations

How to make use of it:

1. Load the compiled style sheet into the document.

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

2. Add a class “prism-THEME-base” to the container.

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

3. Apply 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>

4. Customize faux-3D effects in “_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%)

stylish faux-3d effect, prism Plugin/Github

See Demo And Download

Official Website(garcia): Click Here

This superior jQuery/javascript plugin is developed by garcia. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.