background-13958_640

最近は、たくさんのグラデーション出来るツールがありますがどのように作成されているのかという成り立ちを知っておくとあの部分はこういうことなのかと発見できたり、いろいろと応用なども出来るのではないでしょうか。

『webkit系』『mozilla系』,『InternetExplorer』での記述方法が若干違います。

『webkit系』?って何?『mozilla系』?って何?となった方はこちらのウェブブラウザの一覧(※ wiki参照)をご覧ください。

まずは、デモをご覧ください。

対応ブラウザ Google Chrome / Safari 5+/ Firefox 7+/ Opera 11+/ InternetExplorer 10

『webkit系』の基本的な記述

上記の内容を図にしてみると

緑の字のところがグラデーションする位置で、ピンクの字のところがグラデーションの色を指定しています。

『mozilla系』の基本的な記述

上記の内容を図にしてみると

緑の字のところがグラデーションする位置で、ピンクの字のところがグラデーションの色を指定しています。

『InternetExplorer』の基本的な記述

IE5.5-7に対応させるための記述

上記の内容を図にしてみると

緑の字のところがグラデーションする位置で、ピンクの字のところがグラデーションの色を指定しています。

IE8-9に対応させるための記述

IE10に対応させるための記述

GradientTypeについて

  • GradientType=1は水平方向へグラデーションします。
  • GradientType=0は垂直方向へグラデーションします。

一括指定する

上記を踏まえて、グラデーションする位置が上から下への場合の一括指定で書くにはこのように書きます。

CSS

複数の色を使ったグラデーション

※ InternetExplorerで確認できなかったので、今回は対象外。

基本的な書き方というのは、変わらないのですが 複数の色を使うので、そのために途中、色をどれだけの範囲で使うのかというのを追加する感じで、書いていきます。

『webkit系』

『mozilla系』

ここでいろいろ書いたのをサンプルとしてつくりました。

サンプルをダウンロードする

※ 追記

今一度まとめ的な記事書きました。宜しければそちらも読んでいただければと思います。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る