CSS3円形および楕円形のグラデーション[CSS3 Tips]
今日私達は私達の議論を続けるつもりです CSS3グラデーション. 前回の記事では、作成方法を説明しました。 線形グラデーション. 今回は彼らの親戚をカバーします, 円形および楕円形のグラデーション.
グラデーション構文
CSS3のグラデーションは、 背景画像 財産。追加する必要がある場合、これはより良い互換性のためです。 背景色 それらが互いに衝突しないように、単一のルールセット内で。それから、放射状グラデーションを作成するために、これを単純にこれと呼びます。 放射状グラデーション（） 関数。グラデーションを適切に設定するために関数に含まれるべき4つの値があります.
最初の値は グラデーション位置. top、bottom、center、leftなどのわかりやすいキーワードを使用することも、またはより具体的にすることもできます。, 50％50％ 中心にグラデーションを設定する 0％0％ 開始点のグラデーションを設定する 左上.
2番目の値は 形状とグラデーションサイズ, グラデーションを形成するための2つの引数があります。 楕円 これがデフォルトで、2番目は サークル.
そしてのために グラデーションサイズ, 以下の6つの引数から1つ選択できます。.
| 値 | 説明 |
|---|---|
最近接 | グラデーションの形状は、ボックスの中心に最も近い側（円の場合）または面に近い垂直と水平の両方の側（楕円の場合）に一致します。. |
最寄りの角 | グラデーションの形状は、その中心からボックスの最も近い隅に正確に合うようにサイズ設定されています. |
最も遠い側 | 最も近い側と似ていますが、形状が、ボックスの中心から最も遠い側（または垂直方向と水平方向の側面）に合うようなサイズになっている点が異なります。. |
一番遠い | グラデーションの形状は、ボックスの中心から最も遠いコーナーと正確に一致するようにサイズ設定されています. |
含む | の同義語 |
カバー | の同義語 |
テーブルの出典： Mozilla開発者ネットワーク.
最後に、3番目と4番目は 色の組み合わせ. それで、これを作成するための構文を書く方法は次のとおりです。 だ円 グラデーション、そして今回は使用します カバー グラデーションサイズは、コンテナを覆って広く広がるでしょう。
ボディ背景画像：放射状グラデーション（中心中心、楕円カバー、＃ffeda3、＃ffc800）;
を作成する 円形 グラデーショングラデーションは、単純にこうすることができます。
ボディ背景画像：放射状グラデーション（中心中心、円カバー、＃ffeda3、＃ffc800）;
名前が示すように、グラデーション形状は円になります.
ブラウザのサポート
ただ注意してください、すべてのブラウザはまだこの機能のフルサポートを提供する過程にあるので、彼らはまだベンダープレフィックスを必要とします。したがって、最近のすべてのブラウザで機能する完全な構文全体 - IE10以降、Firefox 3.6以降、Chrome 4.0以降、Safari 4.0以降、およびOpera 11+ - このようになります。
body background-image：放射状グラデーション（中央下、楕円形カバー、＃ffeda3、＃ffc800）;背景画像：-o-radial-gradient（中央下部、楕円カバー、＃ffeda3、＃ffc800）; background-image：-ms-radial-gradient（中央下、楕円カバー、＃ffeda3、＃ffc800）; background-image：-moz-radial-gradient（中央下、楕円形カバー、＃ffeda3、＃ffc800）; background-image：-webkit-radial-gradient（中央下部、楕円カバー、＃ffeda3、＃ffc800）;
デモをチェックするか、ソースをダウンロードしてグラデーションで遊んでください。.
- デモ
- ソースをダウンロード
最後の言葉
CSS3放射状グラデーションを作成することはあなたが考えるほど難しくありません、そして特にあなたがコードを生成するためにこれらのツールから助けを得るとき。
- Colorzillaグラデーション
- グラジエントゥー
放射状グラデーションはCSS3の一種の唯一の種類であり、今後の記事ではこの問題について引き続き説明しますので、Hongkiat.comにご注目ください。
