Pickupニュース

CSS matic: Box Shadow
Webサービス

CSS matic: Box Shadow

CSSボックスシャドウシミュレート
Webブラウザ上でbox-shadowプロパティ用のシャドウパターンを作成して、CSSコードを出力するWebサービスです。

CSS matic: Box Shadowのご利用はこちらから

Webサイト

動画デモ

CSS matic: Box Shadowの動画デモです。

https://www.youtube.com/watch?v=k-ut79X6-Wo

解説

  1. Horizontal Lengthで影の水平方向の距離、Vertical Lengthで影の垂直方向の距離を指定します。
  2. Blur Radiusでぼかし距離、Spread Radiusで広がり距離を指定します。
  3. Shadow Colorで影の色を指定します。
  4. Background Colorで背景色、Box Colorでボックスの背景色を指定します(これらはプレビュー用でスタイルシートには反映されません)。
  5. Opacityで影の透明度を指定します。
  6. Copy Textボタンをクリックして生成されたスタイルシートをコピーして使用します。

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.

記事ランキング