Photoshop ドロップ シャドウと CSS ボックス シャドウ変換_html/css_WEB-ITnose

「ブレンド モード」: Photoshop はさまざまなブレンド モードを提供しますが、CSS3 シャドウは通常モードのみをサポートします。

「色」: 影の色。 CSS3 シャドウのカラー値に対応します。

「不透明度」: 影の不透明度。 CSS3 シャドウの rgba() の値に対応する色。

「角度」: 投影の角度。

「距離」: 影の距離。 CSS3 シャドウの x オフセットと y オフセットは、角度と距離に基づいて計算できます。 x-offset = 距離 * cos(180 - 角度)、y-offset = 距離 * sin(180 - 角度)

「Spread」: 影の拡大サイズ。影の単色とぼかしの色を制御します。スプレッド * サイズ = シャドウ内の単色のサイズ。残っているのはぼやけた色だけです。 CSS3 シャドウスプレッド半径 = スプレッド * サイズ

「サイズ」: 影のサイズ。 CSS3 では、blur-radius + Spread-radius = サイズは、blur-radius = Size - Spread-radius です。

上の図の値を例として考えてみましょう。

color: rgba(118,113,113,.75)x-offset: 5 * cos(180°- 145°) = 4.09pxy-offset: 5 * sin(180°- 145°) = 2.87pxspread-radius: 10 * 6% = 0.6pxblur-radius: 10 - 0.6 = 9.4px;

box-shadow: 4.09px 2.87px 9.4px 0.6px rgba(118,113,113,.75);text-shadow: 4.09px 2.87px 9.4px rgba(118,113,113,.75);

text-shadow にはスプレッド半径がないため、PS での効果を完全に実現できません。