背景のグラデーションについて調べていたら、ストライプとチェック柄も作れるようになりました。もっといろいろ作りたいです。
ストライプは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で背景をチェック柄にする①から③
背景をチェック柄にするやり方です。3ステップで楽々チェック柄。
チェック柄にする①
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; }