LoginSignup
13

More than 5 years have passed since last update.

ブラウザ上でInstagram風の写真加工ができて、CSSが生成できるサイトをつくってみた。

Posted at

filtermix-blend-mode

CSS3で実装されたfiltermix-blend-modeを使用することでCSSのみで画像を編集できるようになりました。
というわけでinstagramみたいな画像編集をCSSだけでやってみました。

このゴールデンゲートブリッジを
golden_gate_bridge_before.png

こんな画像に
golden_gate_bridge_after.png

ロンドンの景色を
london_tower_before.png
こんな画像に
london_tower_after.png

これらはCSSのみで編集しています。

CSS filter Generator

これは使える!ということで、Instagram風の写真加工ができるサイトをつくりました。
http://www.sottar.net/filter-generator/

機能

  • instagram風のfilterはプリセットで用意
  • 細かい値の設定も可能
  • CSSのコードが取得できる
  • ローカルの画像アップロードできる
  • ベンダープレフィックスにも対応
  • 変更前と後を比べながら編集できる

まだまだ作成途中なので、こんな機能が欲しい!とか、ここが使いにくい!とかがあれば教えていただけると嬉しいです!

よかったら使ってみてください
http://www.sottar.net/filter-generator/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13