投稿日: 投稿者: 1x2x3

repeating-linear-gradient

CSSについて説明します。

repeating-linear-gradientについて説明します。

sample 1

test_010.css

div.test-010-001
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 60deg, #0000CCFF, #CC0000FF );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-001"></div>

</body>

表示は下記となります。

青から赤に徐々に変化しています。

sample 2

test_010.css

div.test-010-002
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 60deg, #0000CCFF 0px 30px, #CC0000FF 70px 100px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-002"></div>

</body>

表示は下記となります。

繰り返しの単位は100pxです。
30pxと70pxのあいだがlinear-gradientになっています。
角度の指定は水平から時計回りの角度です。

sample 3

test_010.css

div.test-010-003
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 60deg, #0000CCFF 0px 50px, #CC0000FF 70px 100px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-003"></div>

</body>

表示は下記となります。

linear-gradientの幅を狭めています。

sample 4

test_010.css

div.test-010-004
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 60deg, #0000CCFF 0px 70px, #CC0000FF 70px 100px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-004"></div>

</body>

表示は下記となります。

linear-gradientの幅を無くしています。

sample 5

test_010.css

div.test-010-005
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 60deg, #00CCCCFF 0px 33px, #0000CCFF 33px 66px, #CC0000FF 66px 100px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-005"></div>

</body>

表示は下記となります。

3種類の色を使うようにしています。

sample 6

test_010.css

div.test-010-006
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 60deg, #0000CCFF 0px 30px, 40px, #CC0000FF 70px 100px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-006"></div>

</body>

表示は下記となります。

本稿にsyntaxの章を設けています。MDNから持ってきています。
ここでは、color-hintに対する指定をしています。

sample 7

test_010.css

div.test-010-007
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 60deg, #0000CCFF 0px 30px, 30px, #CC0000FF 70px 100px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-007"></div>

</body>

表示は下記となります。

color-hintに対する指定をsample 6とは異なる値としています。

sample 8

test_010.css

div.test-010-008
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 60deg, #F3CBCEFF 0px 38px, #CC0000FF 38px 40px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-008"></div>

</body>

表示は下記となります。

重ね合わせのための準備をしています。

sample 9

test_010.css

div.test-010-009
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 120deg, #F3CBCEFF 0px 38px, #CC0000FF 38px 40px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-009"></div>

</body>

表示は下記となります。

重ね合わせのための準備をしています。

sample 10

test_010.css

div.test-010-010
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 60deg, transparent 0px 38px, #CC0000FF 38px 40px ), repeating-linear-gradient( 120deg, #F3CBCEFF 0px 38px, #CC0000FF 38px 40px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-010"></div>

</body>

表示は下記となります。

重ね合わせています。一番上、上から二番目、と指定していく仕様です。
画像を重ね合わせることも出来ます。

上になる方の線以外の部分を透明にしています。

sample 11

test_010.css

div.test-010-011
{
    /* width: 500px; */
    height: 500px;

    background: repeating-linear-gradient( 0deg, transparent 0px 8px, #CC0000FF 8px 10px, transparent 10px 40px ), repeating-linear-gradient( 60deg, transparent 0px 38px, #CC0000FF 38px 40px ), repeating-linear-gradient( 120deg, #F3CBCEFF 0px 38px, #CC0000FF 38px 40px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-011"></div>

</body>

表示は下記となります。

横線を重ね合わせています。

sample 12

test_010.css

div.test-010-012
{
    /* width: 500px; */
    height: 650px;

    background: repeating-linear-gradient( 90deg, transparent , #CC000066 ), repeating-linear-gradient( 0deg, transparent 0px 8px, #CC0000FF 8px 10px, transparent 10px 40px ), repeating-linear-gradient( 60deg, transparent 0px 38px, #CC0000FF 38px 40px ), repeating-linear-gradient( 120deg, #F3CBCEFF 0px 38px, #CC0000FF 38px 40px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-012"></div>

</body>

表示は下記となります。

linear-gradientを重ね合わせています。
DESIGN TALKS PLUSの開始の映像を思い出すかもしれない感じになりました。
ディスプレイや輝度で印象が変わります。

sample 13

test_010.css

div.test-010-013
{
    /* width: 500px; */
    height: 650px;

    background: repeating-linear-gradient( 80deg, transparent 0% 30%, #FFFFFF10 30% 70%, transparent 70% 100% ), repeating-linear-gradient( 70deg, transparent 0% 30%, #FFFFFF10 30% 70%, transparent 70% 100% ), repeating-linear-gradient( 60deg, transparent 0% 30%, #FFFFFF10 30% 70%, transparent 70% 100% ), repeating-linear-gradient( 100deg, transparent 0% 30%, #FFFFFF10 30% 70%, transparent 70% 100% ), repeating-linear-gradient( 110deg, transparent 0% 30%, #FFFFFF10 30% 70%, transparent 70% 100% ), repeating-linear-gradient( 120deg, transparent 0% 30%, #FFFFFF10 30% 70%, transparent 70% 100% ),  repeating-linear-gradient( 90deg, transparent , #CC000066 ), repeating-linear-gradient( 0deg, transparent 0px 8px, #CC0000FF 8px 10px, transparent 10px 40px ), repeating-linear-gradient( 60deg, transparent 0px 38px, #CC0000FF 38px 40px ), repeating-linear-gradient( 120deg, #F3CBCEFF 0px 38px, #CC0000FF 38px 40px );
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-013"></div>

</body>

表示は下記となります。

光の感じを出そうとしましたが、数行追加しただけでは難しいようです。

sample 14

test_010.css

div.test-010-014
{
    /* width: 500px; */
    height: 650px;

    background: repeating-linear-gradient( 80deg, transparent 0% 20%, #FFFFFF10 20% 80%, transparent 80% 100% ), repeating-linear-gradient( 70deg, transparent 0% 20%, #FFFFFF10 20% 80%, transparent 80% 100% ), repeating-linear-gradient( 60deg, transparent 0% 20%, #FFFFFF10 20% 80%, transparent 80% 100% ), repeating-linear-gradient( 100deg, transparent 0% 20%, #FFFFFF10 20% 80%, transparent 80% 100% ), repeating-linear-gradient( 110deg, transparent 0% 20%, #FFFFFF10 20% 80%, transparent 80% 100% ), repeating-linear-gradient( 120deg, transparent 0% 20%, #FFFFFF10 20% 80%, transparent 80% 100% ),  repeating-linear-gradient( 90deg, transparent , #CC000066 ), repeating-linear-gradient( 0deg, transparent 0px 8px, #CC0000FF 8px 10px, transparent 10px 40px ), repeating-linear-gradient( 60deg, transparent 0px 38px, #CC0000FF 38px 40px ), repeating-linear-gradient( 120deg, #F3CBCEFF 0px 38px, #CC0000FF 38px 40px );                                                                                                      
}

test_010.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_010.css"/></head>
<body>

<div class="test-010-014"></div>

</body>

表示は下記となります。

光の感じを出そうと、横幅を広げました。

syntax

repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> )

where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
and <linear-color-stop> = <color> [ <color-stop-length> ]?
and <color-stop-length> = [ <percentage> | <length> ]{1,2}
and <color-hint> = [ <percentage> | <length> ]

文字列を”で囲んで表しています。

angle ’60deg’ や ‘120deg’ など。
side-or-corner ‘to left’ / ‘to right’ / ‘to top’ / ‘to bottom’ のどれか1つ。
[angle|side-or-corner] angleかside-or-cornerかどちらかのみ。
[angle|side-or-corner]? 「angleかside-or-cornerかどちらかのみ」があってもなくてもよい。初期値は0deg(=to top)で、変更不要の場合は、指定を省略してもよい。

color-hintは上記のsampleで確認してください。ここでは、わかりやすさのために無視します。(color-hintの隣りの?は不要のはずですが。カンマがあるけど、何も指定が無いという文法を許す意味はないはず。)

where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop-list> = [ <linear-color-stop> ]#, <linear-color-stop>
and <linear-color-stop> = <color> [ <color-stop-length> ]?
and <color-stop-length> = [ <percentage> | <length> ]{1,2}

#が1回以上の繰り返しで、CSV形式を意味します。
ですので、sample 2のように、合計2つはlinear-color-stopが必要ということになります。
<color-stop-list> = #0000CCFF 0px 30px, #CC0000FF 70px 100px
linear-gradientを構成するためには2つは必要なので、正しくて、カンマつなぎでいくらでも数を増やすことができる仕様です。

?はあってもなくてもよい、で、{1,2}が1つまたは2つ、を意味するので、色指定だけでも良いし、終了位置の指定だけでも良いし、開始位置と終了位置の指定でも良い、となります。
<linear-color-stop> = #0000CCFF 0px 30px
<linear-color-stop> = #CC0000FF 70px 100px

まとめ

やはり、動かしたいです。

参考

repeating-linear-gradient()
Value definition syntax
Using CSS gradients

参考 & 広告

Kindle版です。
紙の本と、PDF版があります。
Kindle版です。
電子書籍です。



«       »
カテゴリーCSS