ブログデザイン備忘録～クレイモーフィズム

ニューモーフィズム、グラスモーフィズムに続いて今度はクレイモーフィズム (Claymorphism) というデザイン手法が登場した。

名前の通り粘土のような質感を取り入れた3Dデザインで、メタバースとの相性が良いようだ。

Clay.cssはクレイモーフィズムスタイルを実装するスタイルシートで、例えばCDNで読み込む場合は

  <link rel="stylesheet" href="https://unpkg.com/claymorphism-css/dist/clay.css">

次に、CSSでカスタマイズするにはhtmlのクラス名にclayを追加する。例えば

<div class="clay card">Salmon</div>

cssでは

.card{
  --clay-background: salmon;
  --clay-border-radius: 48px;

とするとクラス"clay card"の背景色や境界の曲率を変更できる。

他にオブジェクトの影を以下のオプションで設定できるが、基本的にはデフォルトのものでよさそう。

--clay-shadow-outset: 5px 5px 10px green;
  --clay-shadow-inset-primary: 5px 5px 5px green;
  --clay-shadow-inset-secondary: 5px 5px 5px white;

指定する場合はbox-shadowと同じようにオフセットX, Y, ぼかし範囲, 拡散範囲, 色という構文になっているようだ。

以下Code Penではshadow-inset-primaryやshadow-inset-secondaryも設定してみたが、適当に設定すると綺麗ではないので有効な配色な組み合わせがわかっている場合に使用して、それ以外はデフォルトでも十分だと思う。

Code Penの実行例は以下の通り。

See the Pen Claymorphism by ATATAT (@atatat) on CodePen.

つれづれなる備忘録