Effect

エフェクト用のCSS

詳しい導入事例は導入方法を参照してください。

Shadow

  • shadow
shadow
shadow hover
  • CSS
.shadow {box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;}

Class Copy

Ripple

  • ripple

使い方

rippleエフェクトは[data-ripple]属性を追加することでMUIの疑似rippleエフェクトを追加できます。
[data-ripple]属性がNULLなら半透明の白で、カラーコードを入れればその色で波紋疾走します。

rippleエフェクトはCSSというよりもScript ライブラリですが便宜上ここにも掲載しています。

Class Copy