About

小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。

赤い電動車いすに乗って生活をしています。色々と不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。

好き:食べる/スロープ/エレベーター
嫌い:食事制限/段差/階段
※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。

気づけばグルメブログになってしまわぬよう、しっかり更新頑張ります!

Links

【CSS3】Photoshopで行うような加工をfilterで再現してみる

こういった加工をCSSで

画像に対して彩度を上げたり、コントラストを下げたり、モノクロ処理やセピア処理…こういった加工を行いたい場合、一般的にはPhotoshop等の画像編集ソフトを使うのが普通かと思います。がしかし…こういった加工も簡易的であればCSS3のfilterプロバティを使うことにより簡単に再現できてしまうのです!どういった感じなのか…それでは見ていきましょう!
※ブラウザ毎の対応状況はCan I useでご確認ください。

コンテンツ一覧

    使える10種類のエフェクト

    基本的に使用できるエフェクトとしては、以下の10種類となります。

    blur ぼかし処理。【初期値:0px】
    grayscale モノクロ処理。【初期値:0%】
    sepia セピア処理。【初期値:0%】
    saturate 彩度。【初期値:100%】
    hue-rotate 色相回転。【初期値:0deg】
    invert 階調反転。【初期値:0%】
    opacity 透過度。【初期値:100%】
    brightness 明るさ。【初期値:100%】
    contrast コントラスト。【初期値:100%】
    drop-shadow 影処理。【初期値:none】

    例えば、とあるimg要素に対して彩度を上げたいといった場合…コード的には以下のような形になりますね。

    img {
      filter: saturate(200%);
    }
    

    たったのこれだけで彩度が上がって調整された画像が表示されるのです。はい、簡単便利ですね!
    それでは、実際にいくつかエフェクトを試してみましょう。

    コンテンツ一覧へ戻る

    いくつかエフェクトを試してみる

    彩度を上げる

    お刺身
    img {
      filter: saturate(200%);
    }
    
    お刺身

    モノクロ処理

    お刺身
    img {
      filter: grayscale(100%);
    }
    
    お刺身

    セピア処理

    お刺身
    img {
      filter: sepia(100%);
    }
    
    お刺身

    コンテンツ一覧へ戻る

    いかがでしたしょうか?
    1行の記述だけでこのようなエフェクトが適用できるfilter、といいますかCSS3といいますか…改めて便利だなーと痛感しました。

    この記事内では3種類のエフェクトをご確認いただきましたが、10種類のエフェクト全てが確認できるサンプルを今回も別途設けましたので、そちらも併せてご確認いただければと思います!

    サンプルを確認する

    積極的にCSS3が使いやすくなってきている昨今、恐れることなく挑み続け、便利なコーディングライフを勝ち取りたいですね!
    何が言いたいんでしょうね、以上です!

    コメントする

    トップへ戻る