repeating-linear-gradient()関数は、繰り返しの線形グラデーションを指定する際に使用します。
■構文
構文は基本的に linear-gradient()関数と同じですが、
repeating-linear-gradient()関数では色の位置を省略せずに指定することで、グラデーションの繰り返し一回分の距離を(その計算結果としてボックス内における繰り返し回数を)制御してやる必要があるでしょう。
■値
- グラデーションの角度、または、方向
-
数値にdegなどの単位を付けてグラデーションラインの角度を指定、
または、to に続けて left, rightや、top, bottom などの位置を表すキーワードでグラデーションラインの方向を指定。
初期値は、180deg(to bottom) - 開始色, 途中色, 終了色
- 開始色, 途中色, 終了色を指定。
必要に応じて各色の開始位置を半角スペース区切りで指定することもできます。
例えば、red, yellow, skyblue と指定すれば均一に変化するグラデーションとなりますが、red 50px, yellow 70px, skyblue 100px などと指定すれば各色がどの位置から始まるかを指定できます。
repeating-linear-gradient()関数では、グラデーションの終了色と次の開始色がそのままつなげられます。
そのため、配色によってはグラデーションの境目で色が急激に変化してしまうかもしれません。
グラデーションの境目をなめらかにつなげるには、終了色と開始色を同じ色にするとよいでしょう。
以下の使用例の sample3 と sample4 では、グラデーションの境目をなめらかにつなげるために終了色と開始色を同じ色にしています。
■使用例
CSSソースは外部ファイル(sample.css)に記述
p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:100px;
}
p.sample1 {
background: repeating-linear-gradient(white 50%, gray);
}
p.sample2 {
background: repeating-linear-gradient(90deg, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.sample3 {
background: repeating-linear-gradient(135deg, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.sample4 {
background: repeating-linear-gradient(135deg, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>繰り返しの線形グラデーション1</p>
<p class=”sample2″>繰り返しの線形グラデーション2</p>
<p class=”sample3″>繰り返しの線形グラデーション3</p>
<p class=”sample4″>繰り返しの線形グラデーション4</p>
</body>
</html>
ブラウザ上の表示
繰り返しの線形グラデーション1
繰り返しの線形グラデーション2
繰り返しの線形グラデーション3
繰り返しの線形グラデーション4
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル(sample.css)に記述
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4 {
width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-repeating-linear-gradient(white 50%, gray);
background: -webkit-repeating-linear-gradient(white 50%, gray);
background: -ms-repeating-linear-gradient(white 50%, gray);
}
p.prefix_sample2 {
background: -moz-repeating-linear-gradient(90deg, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -webkit-repeating-linear-gradient(90deg, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -ms-repeating-linear-gradient(90deg, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.prefix_sample3 {
background: -moz-repeating-linear-gradient(135deg, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -webkit-repeating-linear-gradient(135deg, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -ms-repeating-linear-gradient(135deg, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.prefix_sample4 {
background: -moz-repeating-linear-gradient(135deg, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -webkit-repeating-linear-gradient(135deg, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -ms-repeating-linear-gradient(135deg, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”prefix_sample1″>繰り返しの線形グラデーション1</p>
<p class=”prefix_sample2″>繰り返しの線形グラデーション2</p>
<p class=”prefix_sample3″>繰り返しの線形グラデーション3</p>
<p class=”prefix_sample4″>繰り返しの線形グラデーション4</p>
</body>
</html>
ブラウザ上の表示
繰り返しの線形グラデーション1
繰り返しの線形グラデーション2
繰り返しの線形グラデーション3
繰り返しの線形グラデーション4
■関連項目
radial-gradient()関数 …… 円形グラデーションを指定する
repeating-linear-gradient()関数 …… 繰り返しの線形グラデーションを指定する
repeating-radial-gradient()関数 …… 繰り返しの円形グラデーションを指定する