青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

box-shadowってなに、PhotoshopのドロップシャドウからどうCSSに落とし込むの

ってなりません?

ボタンとか、後ろから浮かせたいものにつけるシャドウ。

あと、Photoshopでドロップシャドウってついてるやつ、値とかそのままCSSに入れればOK、とならないんですよ。面倒くさいったらありゃしない。

developer.mozilla.org

まあ影つけるやつですよね、それは知ってます。

で、具体的に入れてる値がなんなのか、って話ですよ。

bsj-k.com

不透明度:29%
角度:90度
距離:3px
スプレッド:0%
サイズ:5px R:163
G:127
B:156

(値は上記のサイトからそのまま拝借しました)

みたいにPhotoshopのドロップシャドウなってるんですよ。いやどうすればええねん。

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

これになります。
まあ色と不透明度はいいでしょう。

1つ目は水平方向の影の距離。今回90度、つまり縦にまっすぐ。なので水平方向に影は入らない。故に0。

2つ目は垂直方向の影の距離。今回3px。なので3px。

3つ目はブラー、ぼかしの量。サイズは5px。なので5px。

4つ目はブラー、ぼかしの広がり。これがスプレッド。

まあ少しわかった気がする…

ただ正直ね、

photoshop.thinktaro.jp

たぶんこんな感じに、Photoshopでレイヤー > CSSをコピー でドロップシャドウかかってるレイヤーのCSSまるごとコピーして、box-shadowの部分だけまるごと使うほうが簡単です…笑

まあでも、一応意味はわかっておこうぜ、というお話。