画像を扱うプロジェクトに役立つ!CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS
Post on:2021年9月10日
画像を編集できるのは、Photoshopだけではありません。
CSSフィルタで、画像にさまざまなエフェクトを与えることができます。
画像に適用するエフェクトを見ながら、そのCSSフィルタのコードをコピペで利用できるオンラインツールを紹介します。
![CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS](http://coliss.com/wp-content/uploads-202103/2021091001@2x.png)
FilterSSは、CSSフィルタのさまざまなエフェクトを実装するCSSをコピペで利用できます。
サポートブラウザは、Chome、Safari、Firefox、Edgeです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021091001-01.png)
使い方は、簡単です。
フィルターが適用されている画像をクリックすると、CSSがコピーできます。
1 |
.filter-1 {-webkit-filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);} |
あとは、このCSSを画像に適用するだけです。
FilterSSでは、たくさんのフィルターがコピペで使用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021091001-02.png)
画像をアップロードすることもできます。
実際に使用する画像にCSSフィルタを適用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021091002.png)
画像: ぱくたそ
CSSフィルタにもいろいろなエフェクトがあり、楽しめます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021091001-04.png)
写真だと、セピア、白黒、ネガとか面白いですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021091001-05.png)
sponsors