Photoshopで作成されたデザインカンプを参考にしてコーディングする場合、

ドロップシャドウをCSS3でどう表現するのか。

 

その方法について記載していきます。

Photoshopでドロップシャドウの値をチェック

例えば以下のように

ピンク色のボックスの下にドロップシャドウが入っている場合を例に説明していきます。

 

ドロップシャドウ


 

 

レイヤーパネルのドロップシャドウをダブルクリックして

詳細を確認してください。

 

ドロップシャドウ


 

 

ここでドロップシャドウの設定値を確認するのですが、

さらに描画モードの右横にあるカラーピッカーをクリックしてみてください。

ここで影の部分の色を確認できます。

 

ドロップシャドウの設定値


 

 

チェックするべき値は、

  • 不透明度:29%
  • 角度:90度
  • 距離:3px
  • スプレッド:0%
  • サイズ:5px

 

ドロップシャドウの影の部分の色は、カラーピッカーに表示されているRGB値で確認できます。

  • R:163
  • G:127
  • B:156

 

ドロップシャドウの値をCSS3で表現すると

 

.box-pink{
    width: 300px;
    height: 200px;
    margin: 100px auto;
    background-color: #fdedfa;

    /* ボックスシャドウ */
    box-shadow: 0 3px 5px rgba(163, 127, 156, 0.29);
}

 

 

8行目に記載したbox-shadowで表現しています。

プロパティ値の詳細。

 

○○○ {

box-shadow: 右側(左側)の影px 下側(上側)の影px ぼかしの量px 影の広がりpx 色 内向き;

}

 

 

今回は角度が90度で下向きの影のみなので、右側の影はゼロ

box-shadow: 0 3px 5px rgba(163, 127, 156, 0.29);

 

 

「距離」:3pxなので、下向きの影は3pxになります。

box-shadow: 0 3px 5px rgba(163, 127, 156, 0.29);

 

 

「サイズ」の数値は、影のほかしの量になります。

今回は「サイズ」:5pxなのでぼかしを5pxに指定

box-shadow: 0 3px 5px rgba(163, 127, 156, 0.29);

 

 

「スプレッド」:0%なので、影の広がりはゼロ

今回は0と入力せずに省略しています。

 

 

影の色は、カラーピッカーに記載されているRGB値と、不透明度を指定します。

今回「R」:163、「G」:127、「B」:156、「不透明度」:29%

なので、

box-shadow: 0 3px 5px rgba(163, 127, 156, 0.29);

 

 

という感じで

Phosothopで調べたドロップシャドウの値をすべてCSSに当てはめるだけで実現できます。

 

ちなみに、左側や上側の影はマイナス値で指定します。

例えば左側に5px上側に7pxの影だと

box-shadow: -5px -7px 5px rgba(163, 127, 156, 0.29);

となります。


スポンサーリンク

Photoshopでシャドウ(内側)の値をチェック

 

例えば以下のように

薄茶色のボックスの上側にシャドウ(内側)が入っている場合を例に説明していきます。

 

シャドウ(内側)


 

 

レイヤーパネルのシャドウ(内側)をダブルクリックして

詳細を確認してみると、

 

シャドウ(内側)


 

 

シャドウ(内側)の設定値が確認できます。

描画モードの右横にあるカラーピッカーをクリックしてみると、影の部分の色も確認できます。

 

シャドウ(内側)の設定値


 

 

ここでもチェックするべき値は先程とだいたい同じ。

  • 不透明度:75%
  • 角度:90度
  • 距離:3px
  • チョーク:0%
  • サイズ:5px

 

シャドウの影の部分の色は、カラーピッカーに表示されているRGB値で確認できます。

  • R:222
  • G:209
  • B:192

 

シャドウ(内側)の値をCSS3で表現すると

 

.box-brown{
    width: 300px;
    height: 200px;
    margin: 100px auto;
    background-color: #f7ecde;

    /* ボックスシャドウ */
    box-shadow: 0 3px 5px rgba(222, 209, 192, 0.75) inset;
}

 

 

シャドウ(内側)も、8行目のbox-shadowで実現できます。

プロパティ値の詳細は、

 

 

○○○{

box-shadow: 左側(右側)の影px 上側(下側)の影px ぼかしの量px 影の広がりpx 色 内向き;

}

 

 

シャドウ(内側)の場合、

最後に「内向き」を指定するためのinsetを記述するのがポイント。

他の値はドロップシャドウの時と全く同じです。

 

 

ちなみに、右側、下側にシャドウ(内側)を入れたい場合はマイナス表示になります。

右側に3px、下側に6pxのシャドウ(内側)を入れたい場合は、以下のような記述になります。

 

box-shadow: -3px -6px 5px rgba(222, 209, 192, 0.75) inset;

 

 

今回は以上になります。

コーダーの方はPhotoshopの値を確認してコーディングしましょう。


スポンサーリンク