Twitterでブログ更新情報を配信中

【CSS】filterエフェクト10選!ぼかしやセピアの加工をPhotoshopなしで再現する

画像加工と聞くとPhotoshopなどのソフトをイメージするかもしれません。実はCSSのfilterを使えば、「ぼかし」や「セピア」といったアレンジが値ひとつでできてしまいます!

IEを除くブラウザの対応になるため、仕様やクライアントの要望を確認のうえ取り入れみてください。

イメージ画像にフィルターをかけるだけであれば、こちらの記事が役立つかもしれません。IEにも対応していますよ!

【CSS】IEに対応!画像に半透明のフィルターをかけて文字の見やすさをアップ

brightness(明度)

filter:brightness(0.5); /* 明度 50% */
filter:brightness(80%); /* 明度 80% */

パーセンテージもしくは小数で0~指定します。数値が高いほど明るさが上がります。

brightness(明度)の例

blur(ぼかし)

filter:blur(3px); /* 半径 3px の範囲 */
filter:blur(3em); /* 半径 3em の範囲 */
filter:blur(3rem); /* 半径 3rem の範囲 */
filter:blur(3vw); /* 半径 3rem の範囲 */

指定できる範囲は4つあります。数値が高いほど、ぼかしの度合いが強くなります。

blur(ぼかし)の例

contrast(コントラスト)

filter:contrast(0.2); /* コントラスト率 20% */
filter:contrast(120%); /* コントラスト率 120% */

パーセンテージもしくは小数で0~指定します。数値が高いほどメリハリが出て、低いほど灰色がかった明暗の差のないコントラストとなります。

contrast(コントラスト)の例

grayscale(モノクロ)

filter:grayscale(0.9); /* グレースケール率 90% */

小数で0~1まで指定できます。数値が高いほどモノクロとなり、低いほど色みがわずかに残ります。

grayscale(モノクロ)の例

hue-rotate(色相)

filter:hue-rotate(120deg); /* 120度の回転 */
filter:hue-rotate(-120deg); /* 240度の回転 */
filter:hue-rotate(.3turn); /* 3回転 */

角度の「deg」と回転の「turn」で色相を変更します。

hue-rotate(色相)の例

invert(反転)

filter:invert(1); /* 反転率 100% */

0.6以上の指定が必要になります。0.5以下ではグレーアウト、1以下はややグレーがかります。

invert(反転)の例

opacity(透明度)

filter:opacity(0.5); /* 透明度 50% */
filter:opacity(80%); /* 透明度 80% */

パーセンテージもしくは小数で0~指定します。数値が高いほど不透明度(透明の効果がない)が上がります。filterを使わないopacityプロパティも同じエフェクトが利用できます。

opacity(透明度)の例

saturate(彩度)

filter:saturate(0.1); /* 彩度 10% */
filter:saturate(300%); /* 彩度 300% */

パーセンテージもしくは小数で0~指定します。数値が高いほど鮮やかさがアップし、低いほどグレースケールのようにモノクロになります。

saturate(彩度)の例

sepia(セピア)

filter:sepia(0.5); /* セピア率 50% */
filter:sepia(80%); /* セピア率 80% */

パーセンテージもしくは小数で0~指定します。数値が高いほどセピア色が濃くなります。

sepia(セピア)の例

drop-shadow(シャドウ)

filter:drop-shadow(2px 4px 6px black);

「box-shadow」と同じく影をつける効果があります。一見同じように見えますが、こちらは文字や画像(pngのみ)の場合はオブジェクトの周りに影がつきます。

drop-shadow(シャドウ)の例
box-shadow:10px 10px 10px rgba(0,0,0,0.4);

一方でbox-shadowでは文字、画像(pngを含む全て)のボックスの周りを囲むように影がつきます。

CSSプロパティの「filter」があれば、Photoshopで編集したような効果を簡単に再現することができます。「明るさ」や「ぼかし」は見出しとの組み合わせに、「セピア」や「モノクロ」などを取り入れてモダンなサイトに、と活かせるシーンはさまざまです。

この他にinitial、inherit、unsetの値がありますが、こちらは初期値となるためエフェクトはありません。noneのように各効果を解除するときに使いましょう。