Safari 4(ベータ版)では、レンダリングエンジンのWebKitが採用したCSSの新機能「グラディエント」「反転」「マスク」を利用できるようになった。本連載で紹介したトランスフォーム(回転、拡大・縮小、スキュー、移動)の機能と合わせると、これまではグラフィックソフトが必須だった処理の多くをスタイルシートだけで実現できるようになる。 今回は、これらの機能がどのようなものなのかを簡単に紹介したい。 CSSでグラディエント、反転、マスク 次のサンプルは「グラディエント(Gradient)」「反転(Reflect)」「マスク(Mask)」のそれぞれの機能を利用して、Safari 4(ベータ版)で表示したものだ。左から順に、背景をグラデーションカラーで表示したもの、テキストと画像を反転させたもの、画像の輪郭をマスクでぼかしたものとなっている。
![Safari 4が対応したCSSの新機能:グラディエント、反転、マスク - builder by ZDNet Japan](https://cdn-ak-scissors.b.st-hatena.com/image/square/f6e6ab36cf76380efa38d62dd0f0f1fd05340d93/height=288;version=1;width=512/https%3A%2F%2Fbuilder.japan.zdnet.com%2Fstorage%2F2011%2F01%2F24%2F17798864c7c1c6fdc736a723c20c510a%2Fstory_media%2F20389157%2F090302css-firefox-safari_samp00_184x138.jpg)