■CSSフィルターで簡単画像変換（４）：ドロップシャドウ（drop-shadow）

　CSS（Cascading Style Sheets）のフィルター機能を使用すると、カラー画像に対して容易に下記に示す各種変換を施すことができます。

（１）blur（ぼかし）
（２）brightness（明度）
（３）contrast（コントラスト）
（４）drop-shadow（ドロップシャドウ）
（５）grayscale（グレースケール）
（６）hue-rotate（色相環）
（７）invert（階調の反転）
（８）opacity（不透明度）
（９）saturate（彩度）
（10）sepia（セピア）

　ここでは、（４）のdrop-shadow（ドロップシャドウ）の例を示します。

　ドロップシャドウとは、illustratorやPhotoshopなどでもお馴染みのツールで、選択したオブジェクトに影を付ける機能です。
　影の位置や色、ぼかし方などを細かく設定することで違った印象を与えることができます。

　・使用フィルター：　{filter: drop-shadow(2px 5px 10px #808080)}、　{filter: drop-shadow(10px 15px 20px #ff0000)}
　　　　引数の説明：　順に　x方向の位置、y方向の位置、ぼかしの大きさ、シャドウの色

　（元画像）
　 　 　


ホーム