TOP  >  WebDesign  >  写真加工に使える！CSSで実現するイメージフェクト「20 Image Effects With CSS」
2016年11月22日

写真加工に使える！CSSで実現するイメージフェクト「20 Image Effects With CSS」

写真を利用する時、撮影されたまま利用するという事はソフトウェアが発達してきた現在まずありませんが、今日紹介するのはレタッチソフトでは無く、CSSで実現するイメージフェクト「20 Image Effects With CSS」です。

cssimage

水彩風から、黒板に書いた風のエッジを検出したものエアブラシで書いたものなどなど、全部で20ものエフェクトがCSSで指定するだけで簡単にエフェクトを利用することが可能です。

詳しくは以下

cssimage2

各エフェクトには参考写真とそれを実現するためのCSSがセットに書かれており、基本的にはそのクラスを画像に当てるだけで実現可能です。中には単純に色を買えるだけでは無く、写真を引き詰めて1枚の画像を作るMosicや、画像を反転して一枚の画像にするMirrorなど一風変わった表現も実現可能です。

アイデア次第で、新しい表現が手軽に実現できそうです。写真加工を利用したクリエイティブを考えている方は是非どうぞ。

Image Effects with CSS

※当サイトのに掲載されている一部画像、スクリ－ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 11:40  |  
Category: WebDesign   
tag: CSS CSS3 Flexbox scss WEBデザイン コーディング
このエントリーをはてなブックマークに追加

関連記事

CSS3 Flexbox UIパターン集「Flexbox Patterns」 ローディングアニメなどに利用できるシンプルなCSSスニペット「SpinKit」 CSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」 コピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」

Sponsor

最近の記事

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください 【商用可】アナログ感のあるドローイングフリーフォント「THRONE」 アイコンサイズやカラーを選んでSVGで出力できる「ICONSVG」 子どもをイメージしたフリーフラットアイコンセット「Download free Childhood flat icons set」 クリエイター向けモックアップテンプレートまとめ「15 Free Hero & Scene Creator Mockup Templates for Photoshop」 バレンタインを楽しく演出するフリーアイコンセット「50 free valentines themed icons」 インスタグラムの投稿をおしゃれに彩るフリーテンプレートまとめ「10 Free Instagram Story Templates」 花を抽象的にイメージしたパターン素材「Art Dimension abstract patterns」 個性的なラインナップを楽しめるフリーアイコンセット「Emojious Icons」 最新のクリエイティブなフリーフォントまとめ「20 New Free Fonts For 2019」

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ－ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに！をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る