Safari 4が対応したCSSの新機能：グラディエント、反転、マスク

エ・ビスコム・テック・ラボ
2009-03-02 19:19:02
Safari 4では、CSSの新機能として、テキストや画像を「グラディエント」「反転」「マスク」することができる。グラフィックソフトで処理していた作業が、スタイルシートだけで実現できる可能性が高まった。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

Google Chromeの対応状況

　Safariと同じレンダリングエンジン、WebKitを利用しているGoogle Chromeでは、開発版（バージョン2.0.156.1以上）がグラディエント、反転、マスクの機能に対応している。

　Google Chromeの開発版を利用するには、チャンネルの設定を「Developer preview channel」に変更してアップデートを実行する。ただし、開発版には動作が不安定になるといったリスクがあるので、こうした可能性を承知の上で利用することが必要だ。詳しくは「Early Access Release Channels」を参照してほしい。

　たとえば、先ほどのサンプルをGoogle Chrome（開発版）で表示すると以下のようになる。マスクを利用したサンプルでは、透過されるべき部分が黒色になることがわかる。

Google Chrome（開発版）で表示したもの（画像をクリックすると拡大します） Google Chrome（開発版）で表示したもの（画像をクリックすると拡大します）

　なお、グラディエント、反転、マスクの細かな機能や設定については、次回に紹介したい。

  • 新着記事
  • 特集
  • ブログ