ふくろく　-FUKUROKU writing service-

CSSで作る背景のストライプとチェック柄のサンプル集

CSS NO IMAGE

背景のグラデーションについて調べていたら、ストライプとチェック柄も作れるようになりました。もっといろいろ作りたいです。

ストライプはrepeating-linear-gradientで、チェック柄はlinear-gradientで作成しています。チェック柄をどうやって作っているのかと思ったら、background-sizeを指定しているんですね。勉強になりました。

背景のCSS指定　サンプル18

背景指定　グラデーションの繰り返し　ストライプ

cssコード

#bgc-sample18 {
            background: repeating-linear-gradient(to right, blue, blue 10px, white 10px, white 20px);}

背景のCSS指定　サンプル19

背景指定　グラデーションの繰り返し　ストライプ②

cssコード

#bgc-sample19 {
            background: repeating-linear-gradient(to right, blue, blue 10px, white 10px, white 20px,blue 20px, blue 30px,white 30px,white 40px,orange 40px, orange 50px,white 50px,white 60px);}

背景のCSS指定　サンプル20

背景指定　グラデーションの繰り返し　ストライプ③

cssコード

#bgc-sample20 {
            background: repeating-linear-gradient(to right, yellow, yellow 10px, white 10px, white 20px, yellowgreen 20px, yellowgreen 30px,white 30px,white 40px,orange 40px, orange 50px,white 50px,white 60px);}

背景のCSS指定　サンプル21

背景指定　グラデーションの繰り返し　ストライプ④

cssコード

#bgc-sample21 {
            background: repeating-linear-gradient(to bottom, yellow, yellow 20px, white 20px, white 30px, yellowgreen 30px, yellowgreen 50px,white 50px,white 60px,orange 60px, orange 80px,white 80px,white 90px);}

CSSで背景をチェック柄にする①から③

背景をチェック柄にするやり方です。３ステップで楽々チェック柄。

チェック柄にする①

cssコード

 #bgc-sample22 {
            background-image: linear-gradient(transparent 80%,rgba(0,0,255,0.3) 80%,rgba(0,0,255,0.3) 100%),linear-gradient(90deg,transparent 80%,rgba(0,0,255,0.3) 80%,rgba(0,0,255,0.3) 100%);}

チェック柄にする②

background-colorをaquaに指定

cssコード

#bgc-sample23 {
            background-image: linear-gradient(transparent 80%,rgba(0,0,255,0.3) 80%,rgba(0,0,255,0.3) 100%),linear-gradient(90deg,transparent 80%,rgba(0,0,255,0.3) 80%,rgba(0,0,255,0.3) 100%);
        background-color:aqua;
    }

チェック柄にする③

background-sizeを40pxに指定

cssコード

#bgc-sample24 {
        background-image: linear-gradient(transparent 80%,rgba(0,0,255,0.3) 80%,rgba(0,0,255,0.3) 100%),linear-gradient(90deg,transparent 80%,rgba(0,0,255,0.3) 80%,rgba(0,0,255,0.3) 100%);
    background-color:aqua;
    background-size: 40px 40px;
}