Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

CSSで背景をいくつか作った

Dev

f:id:thleap:20130515195432p:plain

はじめに

なんとかグリッドの背景をCSSで作れないものか..と思い、作りだしたら他の装飾の背景とかも作るの楽しくなってきてコツコツ作っていくつかできた。
グリッドのを作るのは結局最後になって、しかもこの記事がとても参考になった。というか、答えだ。

作ったもの

1個め

http://jsdo.it/thleap/css-bg

css

body {    
  background-image: -webkit-linear-gradient(left bottom, #999 0, #999 50%, #fff 50%, #fff 100%);
  background-size: 4px 4px;
  background-repeat: repeat;
}

2個め

http://jsdo.it/thleap/jRQM

css

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個め

http://jsdo.it/thleap/gG08

css

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個め

http://jsdo.it/thleap/4edI

css

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個め

http://jsdo.it/thleap/rdIz

css

body {
  background: -webkit-repeating-linear-gradient(-45deg, #000, #000 5px, #fff 5px, #fff 10px);
  background-size: 99px 99px;
}

6個め

http://jsdo.it/thleap/3XrX

css

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