CSS3グラデーション

情報を含むウェブサイトに追加する最高な効果のうちの一つがグラデーション。なぜなら、注意をそらさせないから。Safari, Chrome, そしてFirefoxにグラデーションを追加可能;これは、ある種のサイトへの訪問者のうち半分以上をカバー。

これは、 CSS3グラデーションを表示しているFirefoxのスナップショット:

CSS3線形グラデーション のシンタックスは、Firefox版とSafari/Chrome版であるかによって異なる。
   Firefox線形グラデーション:
-moz-linear-gradient(<point> || <angle>, color-stops)
   Safari, Chrome線形グラデーション
-webkit-gradient(linear, <point>, color-stops )

* ポイントかアングル: これは、グラデーションを開始するポイントを定義。値は、水平の位置におく場合、パーセント(%)、ピクセル、もしくは "左"、"中央" 、もしくは "右" 。垂直の位置におく場合、 "上"、 "中央" 、もしくは "下。" 水平か垂直の位置に置くのかを特定されない場合、値は既定の「中央」か50%に設定。Firefoxにおいては、アングルの値も特定可能(例:45°)。
* Color-stops: グラデーションが移行する範囲の色。二種類の色が特定されて、各色に関してstop valueが指定されていない場合、グラデーションは一つの色からもう一つの色へ、最終的なstopping colorにたどり着くまで、均等に移行。
      - Firefoxにおいて、各stop colorはシンタックスに従う <color> [ <percentage> | <length> ].Color名の後にパーセント(0から100%)かlengthの値(0から1.0)が定義されている場合、stop pointにおいて、一つ前の色はstop colorに消えて変わる。値が存在しない場合、色はstart colorからend colorへと徐々に消えて変わる。
      - Safariにおいて、各color stopはシンタックスに従う: color-stop(value, color). Stop valueはパーセント(0から100%)もしくはlength value(0から1.0)、もしくはfrom(color) と to(color)。最後の二つは、color-stop (0, color) color-stop(1.0, color)のshorthand function。

次のコードは、CSS3メニューにおける CSS3グラデーション の為に作成されました:
background-image: -moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));
background-image: -webkit-gradient(linear,50% 0%,50% 100%, from(rgba(255,255,255,0.38)), to(rgba(255,255,255,0.16)));

CSSグラデーション はFF3.6+, Opera 10.50, Safari 2+、そしてGoogle Chromeに対応。

こちらもご覧ください:
CSS3 Angoli arrotondati, CSS3 Ombra, CSS3 Animazione, CSS3 Text Ombra, CSS3 Gradientee, CSS3 Transition

ダウンロード

• 無料版をダウンロード
  WindowsかMac
• 商業用版をダウンロード
  WindowsかMac - $59

CSS3メニューを持つ、オブジェクトと背景上のCSS3グラデーション色

淡色調は、インターネット・ユーザーの視点からは古風となっているため、次第にウェブから除かれています。ミニマリスト・デザイン様式を持つ、世界的に知られている、Wikipediaのようなオンライン・リソースは、以前うまくいっているけれど、他のほとんどのウェブサイトは、全ての必要な方法をもって訪問者の注意を引くために奮闘する必要があります。