[CSS]CSS3グラデーションの表示サンプルと指定方法のまとめ

現在、Firefox, Safari, Chromeで利用できるCSS3グラデーションの表示サンプルと指定方法のまとめをDynamic Driveから紹介します。

サイトのキャプチャ

CSS Library:CSS3 Linear Gradients

下記は各ポイントをピックアップしたものです。

CSS3グラデーションの基礎知識

CSS3グラデーションをサポートしているブラウザは現在のところ、下記の三つです。

  • Firefox 3.6+
  • Safari 2+
  • Chrome

CSS3グラデーションの対応エレメントは、下記の二つです。

  • background
  • background-image

CSS3グラデーションの指定方法はmoz系(Firefox)とwebkit系(Safari, Chrome)で異なり、下記のようになります。

moz系

webkit系

表示サンプルと指定方法

デモのキャプチャ

左から右へのグラデーション

デモのキャプチャ

右から左へのグラデーション

デモのキャプチャ

上から下へのグラデーション

デモのキャプチャ

下から上へのグラデーション

デモのキャプチャ

左上から右下へのグラデーション

デモのキャプチャ

右上から左下へのグラデーション

デモのキャプチャ

左から右へのグラデーションで途中でとめる

デモのキャプチャ

左上からオレンジ・イエロー・ホワイトのグラデーション

デモのキャプチャ

暗いブルーと明るいブルーと中間のブルーを均等にフェードさせるグラデーション

デモのキャプチャ

7色のレインボーカラーのグラデーション

top of page

©2017 coliss