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

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

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

　Safari 4（ベータ版）では、レンダリングエンジンのWebKitが採用したCSSの新機能「グラディエント」「反転」「マスク」を利用できるようになった。本連載で紹介したトランスフォーム（回転、拡大・縮小、スキュー、移動）の機能と合わせると、これまではグラフィックソフトが必須だった処理の多くをスタイルシートだけで実現できるようになる。

　今回は、これらの機能がどのようなものなのかを簡単に紹介したい。

CSSでグラディエント、反転、マスク

　次のサンプルは「グラディエント（Gradient）」「反転（Reflect）」「マスク（Mask）」のそれぞれの機能を利用して、Safari 4（ベータ版）で表示したものだ。左から順に、背景をグラデーションカラーで表示したもの、テキストと画像を反転させたもの、画像の輪郭をマスクでぼかしたものとなっている。

Safari 4（ベータ版）でサンプルを表示したもの（画像をクリックすると拡大します） Safari 4（ベータ版）でサンプルを表示したもの（画像をクリックすると拡大します）

背景をグラデーションカラーで表示する

　グラディエント（Gradient）の機能を利用すると、背景をグラデーションカラーで表示することができる。

　たとえば、次のサンプルは

の背景を暗い青色（#004466）に指定して、文字を白色で表示したものだ。これまでのCSSでは、このように単色の背景色で表示することしかできなかった。

背景を暗い青色で表示したもの（画像をクリックすると拡大します） 背景を暗い青色で表示したもの（画像をクリックすると拡大します） 
div{
background: #004466;
}


GRADIENT
※ブラウザで表示を確認する

　この

の背景をグラデーションカラーで表示するには、-webkit-gradientプロパティを利用する。ここでは上から下への線形グラデーションで、暗い青色（#004466）から水色（#00aaee）に、最後に白色（#ffffff）に変化するように指定している。

背景をグラデーションカラーで表示したもの（画像をクリックすると拡大します） 背景をグラデーションカラーで表示したもの（画像をクリックすると拡大します） 
div{
background: #004466;
background: -webkit-gradient(linear, left top, left bottom, from(#004466), color-stop(0.5, #00aaee), to(#ffffff));
}
※ブラウザで表示を確認する

テキストや画像を反転する

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