CSSで背景をいくつか作った
はじめに
なんとかグリッドの背景をCSSで作れないものか..と思い、作りだしたら他の装飾の背景とかも作るの楽しくなってきてコツコツ作っていくつかできた。
グリッドのを作るのは結局最後になって、しかもこの記事がとても参考になった。というか、答えだ。
作ったもの
1個め
body {
background-image: -webkit-linear-gradient(left bottom, #999 0, #999 50%, #fff 50%, #fff 100%);
background-size: 4px 4px;
background-repeat: repeat;
}
2個め
body {
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.29, rgb(255,255,255)),
color-stop(0.33, rgb(255,255,255)),
color-stop(0.33, rgb(0,0,0)),
color-stop(0.66, rgb(27,27,27)),
color-stop(0.66, rgb(255,255,255)),
color-stop(1, rgb(255,255,255))
);
background-size: 4px 4px;
background-repeat: repeat;
}
3個め
body {
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 40%,rgba(0,0,0,1) 41%,rgba(0,0,0,1) 59%,rgba(0,0,0,0) 60%); /* Chrome10+,Safari5.1+ */
background-repeat: repeat;
background-size: 6px 5px;
}
4個め
body {
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 40%,rgba(0,0,0,1) 41%,rgba(0,0,0,1) 59%,rgba(0,0,0,0) 60%); /* Chrome10+,Safari5.1+ */
background-repeat: repeat;
background-size: 3px 100px;
}
5個め
body {
background: -webkit-repeating-linear-gradient(-45deg, #000, #000 5px, #fff 5px, #fff 10px);
background-size: 99px 99px;
}
6個め
body {
background-image: -webkit-linear-gradient(transparent 50%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .5)), -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .5));
background-size: 10px 10px;
background-repeat: repeat;
}
参考
Checkerboard, striped & other background patterns with CSS3 gradients
