インスタグラムやスマートフォンアプリで一気に身近になったフォトフィルター。写真に色を乗せたり、色を抜いたり、様々な加工を施して写真の印象を簡単に変えてくれるものですが、今回紹介するのはフォトレタッチソフトを利用したものではなく、CSSで実現するphotoフィルタ「Create a Trendy Retro Photo Effect Purely with CSS」　です。

こちらは現状webkitベースのsafariやChromeしか正しく動きませんが、CSSのみで実現しているため。classを指定するだけで、WEB上の写真にフィルタがかけられるようになります。

詳しくは以下

実現の方法としては、上位のレイヤーにCSSで、box-shadowやグラデーションカラーをかぶせた上で、透明度をコントロールする事で実現しています。レトロフィルタがサンプルとして上がっていますが、工夫次第では様々なCSSフィルタが開発できそうです。

具体的なコードサンプル等は「Create a Trendy Retro Photo Effect Purely with CSS」に公開されていましたので試してみたい方は是非どうぞ。

Create a Trendy Retro Photo Effect Purely with CSS