Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

CSS Filter Effectsを編集できるブラウザベースのツール「CSS FilterLab」

原題:CSS FilterLabの概要

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 2011年10月、アドビは、Webに映画のようなエフェクトを実現するための方法としてCSS Shadersを提案しました。彩度、ガンマ、焼き込み、フォールド、カールから、ディゾルブやエクスプロードなどのエフェクトを、CSSによって通常のHTML要素に適用することができるというものでした。この提案が進化しました。オープンな議論、更新が行われ、CSS Filter Effects仕様に融合されました。現在、一般的なブラウザーで使用できるようにするための作業が進められています。CSS Shadersは、現在、CSS Custom Filtersという名前で呼ばれていますが、その表現力は変わりません。

目次

(この記事は、アドビ システムズ 株式会社発行の「Adobe Developer Connection」から許可を得て転載したものです)

CSS FilterLab

 CSS FilterLabはブラウザーベースのツールで、CSSフィルターを使用した再生、CSSフィルターの調整、リアルタイムでのエフェクトの確認を行うことができます(図1を参照)。このツールを使用して、複数のフィルターを組み合わせたり、アニメーション化したりして、高度な映画のようなエフェクトを作成できます。

図1.CSS FilterLabによるフィルターの作成と適用。
図1.CSS FilterLabによるフィルターの作成と適用。

 この記事の執筆時点では、これは本当に最先端のテクノロジーであるため、サポートされているのは数種類のブラウザーのみです。したがって、使用しているブラウザーでCSS FilterLabを開いたときに、最適なエクスペリエンスを実現するための手順が表示されます。アドビでは、この手順をできるだけ簡単でわかりやすいものにすることに注意を払いました。

最初の手順

 CSS FilterLabの機能を試してみるのは簡単です。ブラウザーでCSS FilterLabを開いたら、Add Filter(フィルターを追加)メニューからフィルターを追加できるようになります。

 組み込みフィルターまたはカスタムフィルターを適用することを選択できます。

 幸い、CSS FilterLabには、カスタムフィルターとその基になるシェーダーの優れた例がいくつかバンドルされています。このような例の1つがFoldです。この例は、HTML要素に折りたたまれた紙のような3Dの外観を提供します(図2を参照)。

  • 組み込みフィルターは、デフォルトでブラウザーに付属しているフィルターです。グレースケール、セピア、彩度、コントラストなどの基本的なカラーエフェクトを実現します。
  • カスタムフィルターは、まったく新しいレベルのエフェクトを提供します。作成済みのいくつかの例には、焼き込み、カール、フォールド、ディゾルブ、エクスプロード、その他多くのエフェクトが含まれています。カスタムフィルターはブラウザーには付属していません。開発者自身が作成するものです。カスタムフィルターでは、カラーやジオメトリを細かく制御できるようにする、シェーダーと呼ばれる小さなプログラムが使用されます。シェーダーはハードウェアアクセラレーションを利用し、一般的にゲームのビジュアルエフェクトで使用されます。CSS開発者にとって、シェーダーはなじみが薄いものであるかもしれません。また、シェーダーを使用するには、一般的に数学を十分に理解している必要があります。
図2.CSS FilterLabでHTML要素に適用されたFoldカスタムフィルター。
図2.CSS FilterLabでHTML要素に適用されたFoldカスタムフィルター。

 フィルターを適用すると、そのパラメーターコントロールが表示されます。これによって、非常に簡単にフィルターを微調整して、探し求めているエフェクトを得ることができます。さらに、複数の組み込みフィルターやカスタムフィルターを組み合わせて適用し、すばらしい結果を実現できます。

 この結果に満足したら、変更内容をプリセットとして保存します。これにより、同じ設定を後で再利用できます。

エフェクトのアニメート

 エフェクトは単に発生するだけではありません。エフェクトは発生して、ある状態から別の状態に遷移します。これによってエフェクトに豊かな表現力が生まれます。

 CSS FilterLabには、基本的なアニメーションコントロールのセットが用意されており、フィルターのパラメーター値の間で滑らかなトランジションを作成できます。

 タイムラインとコントロールは画面の下部にあります。タイムラインの任意の位置をクリックすると、アクティブなフィルターのパラメーターが変更されます。これにより、タイムライン上で新しいキーフレームが作成されます。再生ボタンをクリックすると、アニメーション全体が再生されます(図3を参照)。

 キーフレームは、タイムライン上で追加、ドラッグ、削除することができ、アニメーションを思ったとおりに微調整できます。

 アニメーションのデュレーションは、タイムラインの右側にある入力から変更できます。デュレーションの設定は秒単位です。

 CSS FilterLabで折りたたみのアニメーションを作成する簡単な手順。(0:19)


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • アドビ システムズ株式会社(アドビ システムズ カブシキガイシャ)

    アドビ システムズ社は、時間や場所、利用するメディアや機器を問わず、あらゆるユーザーの、アイデアや情報との関わり方に変革をもたらしています。アドビ システムズ 株式会社はその日本法人です。同社に関する詳細な情報は、Webサイト(http://www.adobe.com/jp)に掲載されています。...

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5