Elegante efecto faux-3D en Pure CSS-Prism

Vista prévia

Descripción

Prism. CSS es una librería CSS pura que aplica efectos de faux-3D interactivos y anidados a los elementos usando CSS/CSS3 puro.

¿Cómo funciona?

Cargue la hoja de estilos compilada en el documento.

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

Agregue la clase ' Prism-THEME-base ' al contenedor.

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

...
</div>

Aplique los efectos faux-3D a sus elementos.

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

Personalice los efectos de faux-3D en el ' _ 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;