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

エ・ビスコム・テック・ラボ
2009-03-02 19:19:02
  • このエントリーをはてなブックマークに追加

 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));
}
ブラウザで表示を確認する

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

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