CSS3繰り返しグラデーション[CSS3 Tips]

私たちがウェブサイトを飾る方法を変える多くのCSS3機能があります、そのうちの1つはCSS3グラデーションです。 CSS3より前のバージョンでは、グラデーション効果を作成するために必ず画像が必要です。今、私たちはCSSを使うだけで同じ（そしてより良い）効果を届けることができます

これまでの記事では、CSS3で実現できる2種類のグラデーションについて説明しました。

ラジアル
線形グラデーション.

今回は彼らの兄弟を調べます。 繰り返しグラデーション.

基本的な繰り返し

繰り返しグラデーション 本質的には拡張子です。構文は、放射状グラデーションと線形グラデーションの定義方法と似ていますが、名前が示すとおり、指定された方向に色が繰り返されるだけです。線形グラデーションを繰り返すには、この関数を使います。 繰り返し線形勾配, 放射状または楕円形のグラデーションを繰り返す場合は、この関数を使用します。 繰り返し放射状グラデーション.

 / *線形* / .gradient 背景：繰り返し線形グラデーション（0deg、＃f9f9f9、＃cccccc 20px）;  / * Radial * / .gradient 背景：繰り返し放射状グラデーション（50％50％、円、＃f9f9f9、＃cccccc 20px）;

コードを除いて、コードの残りの部分に大きな違いはありません。 色の繰り返し. 以下は、この色の繰り返しがどのように機能するかを説明する簡単な図です。.

上の図は線形グラデーションの繰り返しについてのみ説明していますが、基本的な考え方は、色が無限に、この場合は任意の方向に繰り返される放射状グラデーションにも当てはまります。デモを見るには下のリンクをたどってください。.

デモを見る

次のセクションでは、実際の例でCSS3繰り返しグラデーションを利用する方法を説明します。.

例：パターンの作成

の最も一般的な実装 繰り返しグラデーション 背景パターンを作成することです。この例では、簡単な縦縞模様を作成します。.

 .グラデーション背景：繰り返し線形グラデーション（0deg、＃f9f9f9、＃f9f9f9 20ピクセル、＃cccccc 20ピクセル、＃cccccc 40ピクセル）;

2つの異なる色を定義する方法に注目してください - ＃f9f9f9 そして #cccccc - 同じ場所に, 20px. この例では、これら2つの色の違いを鮮明にし、あいまいさを解消します。.

方向を向けるために、角度を変えるだけです。 - 90度 それを水平にしながら 45度 斜めに向けるなど.

デモを見る

例：ペーパーラインの作成

この2番目の例では、ノートブックによく見られるようなペーパーラインを作成します。この効果を生み出すために必要なのは div, 画像なし、CSSのみ.

 .グラデーション幅：自動;高さ：500ピクセル。マージン：0 50px。背景：-webkit-periodic-linear-gradient（-90deg、＃f9f9f9、＃f9f9f9 20ピクセル、＃cccccc 21ピクセル）背景：-moz-periodic-linear-gradient（-90deg、＃f9f9f9、＃f9f9f9 20ピクセル、＃cccccc 21ピクセル）背景：-o-linear-linear-gradient（-90deg、＃f9f9f9、＃f9f9f9 20ピクセル、＃cccccc 21ピクセル）。背景：繰り返し線形グラデーション（-90deg、＃f9f9f9、＃f9f9f9 20ピクセル、＃cccccc 21ピクセル）。背景サイズ：100％21ピクセル。

CSS3も追加しました 背景サイズ 背景画像のサイズを指定するプロパティ 100％、20ピクセル. CSS3グラデーションは「色」を表示しますが、実際は画像として分類されています, 色ではない.

次に使用します：前 疑似要素 紙の左側に縞模様を付ける.

 .グラデーション：content： ""の前表示：インラインブロック。高さ：500ピクセル。幅：4ピクセル。左ボーダー：4倍ダブル＃FCA1A1。位置：相対;左：30ピクセル。

そして、これで終わりです。本当に簡単ですね。下のリンクから、それらがすべて動作中であることがわかります。.

デモを見る
ソースをダウンロード

その他の資料

Webkit CSS 3グラデーション
Microsoft Developer NetworkのCSS3グラデーション