クレイモーフィズムCSSジェネレーター
粘土のような立体感と柔らかみが特徴的な、クレイモーフィズムを実装するためのCSSを生成します。
影の方向や立体度をカスタマイズできます。シャドウの詳細設定でさらに細かい設定も可能です。
出力されるCSSコードをコピペで簡単に使えます。
スポンサーリンク
カスタマイズ
プレビュー
CSSコード
.clay {
background-color: #62CDFF;
border-radius: 40px;
box-shadow: 12px 12px 18px rgba(0, 0, 0, 0.3), inset -12px -12px 18px rgba(0, 0, 0, 0.3), inset 12px 12px 18px rgba(255, 255, 255, 0.6);
}使用上の注意
- モダンブラウザでの使用を想定しており、IEや古いバージョンのブラウザではサポートされていないCSSプロパティを含む場合があります。
- 当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。
スポンサーリンク
