ゲームミュージックと生存確認をかねた画期的な: css3のgradient関数を使った敷き詰めカタログ

下記にクールなパターンが沢山掲載されているのでこちらも参照．
http://lea.verou.me/css3patterns/
このページで紹介するものは自作のものと上での焼き直しがちゃんぽんになっています．

パターンを考える際の流れ

繰り返しの単位となる正方形にパターンを起こす．
以降の作業が煩雑となるため，余り複雑なものは避ける．
パターンをストライプと直角三角形の細片に分解する．
正方形，長方形は対角線で分割する．
ストライプは上に重ねることも考える．
細片毎にgradient関数をこしらえ，重ねあわせる．
角度とグラデーション幅を調整して直角三角形を生成する．（透明色を活用する）

例を示す．市松模様を分解すると，1+2=3となっていることが判る．2の図形は1の図形を半分だけずらしていることが判る．もし判りにくいのであれば，画像毎に色を変えてpositionをどう取るかを眺めると良い．なおパターンの解は複数存在しうる．

このひらめきがパターンの成否を決める面があり，パズル（≒タングラム・知恵の板）としては非常に良質であるものの，これらを自力で思い浮かべる事は結構面倒である．従って技術的には興味深いものではあるが，メンテナンス性等の実用面で疑問が残るため，複雑なパターンを構成するには素直に画像ファイルを用意したほうがよい．なお環境の都合上，極力画像を用いたくない場合にはこの限りではない．

注意：firefoxでは場合によりフリーズを引き起こすことがある模様．background-sizeはある程度大きめに取ること．

コードを掲載しておくのでご自由にお使い下さい．

共通

#catalog div{
display:inline-block;
border: solid 1px black; 
height: 150px; 
width: 150px;
margin:1px;
background-size:50px 50px;
}
#catalog{
counter-reset:divs 0;
}
#catalog div:before{
counter-increment:divs 1;
content:counter(divs);
}

ちょっと込み入ってくると途端に長くなる．

横縞

background-image: -moz-linear-gradient(white 50%,green 50%); 
background-image: -ms-linear-gradient(white 50%,green 50%); 
background-image: -o-linear-gradient(white 50%,green 50%); 
background-image: -webkit-linear-gradient(white 50%,green 50%); 
background-image: linear-gradient(white 50%,green 50%);

縦縞

background-image: -moz-linear-gradient(0deg,white 50%,green 50%); 
background-image: -ms-linear-gradient(0deg,white 50%,green 50%); 
background-image: -o-linear-gradient(0deg,white 50%,green 50%); 
background-image: -webkit-linear-gradient(0deg,white 50%,green 50%); 
background-image: linear-gradient(0deg,white 50%,green 50%);

縞の重ねがけ

background-image: -moz-linear-gradient(transparent 50%,rgba(0,128,0,0.5) 50%),
    -moz-linear-gradient(0deg,white 50%,rgba(0,128,0,0.5) 50%); 
background-image: -ms-linear-gradient(transparent 50%,rgba(0,128,0,0.5) 50%),
    -ms-linear-gradient(0deg,white 50%,rgba(0,128,0,0.5) 50%); 
background-image: -o-linear-gradient(transparent 50%,rgba(0,128,0,0.5) 50%),
    -o-linear-gradient(0deg,white 50%,rgba(0,128,0,0.5) 50%); 
background-image: -webkit-linear-gradient(transparent 50%,rgba(0,128,0,0.5) 50%),
    -webkit-linear-gradient(0deg,white 50%,rgba(0,128,0,0.5) 50%); 
background-image: linear-gradient(transparent 50%,rgba(0,128,0,0.5) 50%),
    linear-gradient(0deg,white 50%,rgba(0,128,0,0.5) 50%);

直角二等辺三角形（基本図形…大体の図形はこの形の組み合わせに分解できる）

background-image: -moz-linear-gradient(-45deg,white 50%,green 50%); 
background-image: -ms-linear-gradient(-45deg,white 50%,green 50%); 
background-image: -o-linear-gradient(-45deg,white 50%,green 50%); 
background-image: -webkit-linear-gradient(-45deg,white 50%,green 50%); 
background-image: linear-gradient(-45deg,white 50%,green 50%);

ピラミッド

background-image: -moz-linear-gradient(45deg,transparent 50%,rgba(0,128,0,0.4) 50%), 
    -moz-linear-gradient(-45deg,white 50%,rgba(0,128,0,0.6) 50%); 
background-image: -ms-linear-gradient(45deg,transparent 50%,rgba(0,128,0,0.4) 50%), 
    -ms-linear-gradient(-45deg,white 50%,rgba(0,128,0,0.6) 50%); 
background-image: -o-linear-gradient(45deg,transparent 50%,rgba(0,128,0,0.4) 50%), 
    -o-linear-gradient(-45deg,white 50%,rgba(0,128,0,0.6) 50%); 
background-image: -webkit-linear-gradient(45deg,transparent 50%,rgba(0,128,0,0.4) 50%), 
    -webkit-linear-gradient(-45deg,white 50%,rgba(0,128,0,0.6) 50%); 
background-image: linear-gradient(45deg,transparent 50%,rgba(0,128,0,0.4) 50%), 
    linear-gradient(-45deg,white 50%,rgba(0,128,0,0.6) 50%);

二等辺三角形

background-image: -moz-linear-gradient(-26deg,transparent 67%,white 68%),
    -moz-linear-gradient(26deg,white 32%,green 33%); 
background-image: -ms-linear-gradient(-26deg,transparent 67%,white 68%),
    -ms-linear-gradient(26deg,white 32%,green 33%); 
background-image: -o-linear-gradient(-26deg,transparent 67%,white 68%),
    -o-linear-gradient(26deg,white 32%,green 33%); 
background-image: -webkit-linear-gradient(-26deg,transparent 67%,white 68%),
    -webkit-linear-gradient(26deg,white 32%,green 33%); 
background-image: linear-gradient(-26deg,transparent 67%,white 68%),
    linear-gradient(26deg,white 32%,green 33%);

斜め市松

background-image: -moz-linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    -moz-linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%); 
background-image: -ms-linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    -ms-linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%); 
background-image: -o-linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    -o-linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%); 
background-image: -webkit-linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    -webkit-linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%); 
background-image: linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%);

斜め縞模様

background-image: -moz-linear-gradient(45deg, white 25%, green 25%,green 50%, white 50%,white 75%, green 75%); 
background-image: -ms-linear-gradient(45deg, white 25%, green 25%,green 50%, white 50%,white 75%, green 75%); 
background-image: -o-linear-gradient(45deg, white 25%, green 25%,green 50%, white 50%,white 75%, green 75%); 
background-image: -webkit-linear-gradient(45deg, white 25%, green 25%,green 50%, white 50%,white 75%, green 75%); 
background-image: linear-gradient(45deg, white 25%, green 25%,green 50%, white 50%,white 75%, green 75%);

斜め縞重ねがけ

background-image: -moz-linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    -moz-linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%); 
background-image: -ms-linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    -ms-linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%); 
background-image: -o-linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    -o-linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%); 
background-image: -webkit-linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    -webkit-linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%); 
background-image: linear-gradient(-45deg, transparent 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, transparent 50%,transparent 75%, rgba(0,128,0,0.5) 75%),
    linear-gradient(45deg, white 25%, rgba(0,128,0,0.5) 25%,rgba(0,128,0,0.5) 50%, white 50%,white 75%, rgba(0,128,0,0.5) 75%);

円

background-image: -moz-radial-gradient(contain,green 98%,white 100%); 
background-image: -ms-radial-gradient(contain,green 98%,white 100%); 
background-image: -o-radial-gradient(contain,green 98%,white 100%); 
background-image: -webkit-radial-gradient(contain,green 98%,white 100%); 
background-image: radial-gradient(contain,green 98%,white 100%);

朝顔

background-image: -moz-radial-gradient(contain,transparent 98%,green 100%), 
    -moz-radial-gradient(contain,white 98%,green 100%); 
background-image: -ms-radial-gradient(contain,transparent 98%,green 100%), 
    -ms-radial-gradient(contain,white 98%,green 100%); 
background-image: -o-radial-gradient(contain,transparent 98%,green 100%), 
    -o-radial-gradient(contain,white 98%,green 100%); 
background-image: -webkit-radial-gradient(contain,transparent 98%,green 100%), 
    -webkit-radial-gradient(contain,white 98%,green 100%); 
background-image: radial-gradient(contain,transparent 98%,green 100%), 
    radial-gradient(contain,white 98%,green 100%); 
background-position: 25px 25px,0 0;

七宝

background-image: -moz-radial-gradient(contain,transparent 85%,green 87%,green 115%,transparent 117%),
    -moz-radial-gradient(contain,white 85%,green 87%,green 115%,white 117%); 
background-image: -ms-radial-gradient(contain,transparent 85%,green 87%,green 115%,transparent 117%),
    -ms-radial-gradient(contain,white 85%,green 87%,green 115%,white 117%); 
background-image: -o-radial-gradient(contain,transparent 85%,green 87%,green 115%,transparent 117%),
    -o-radial-gradient(contain,white 85%,green 87%,green 115%,white 117%); 
background-image: -webkit-radial-gradient(contain,transparent 85%,green 87%,green 115%,transparent 117%),
    -webkit-radial-gradient(contain,white 85%,green 87%,green 115%,white 117%); 
background-image: radial-gradient(contain,transparent 85%,green 87%,green 115%,transparent 117%),
    radial-gradient(contain,white 85%,green 87%,green 115%,white 117%); 
background-position: 25px 25px,0 0;

市松（2つの直角三角形をずらして対角線を密着させている）

background-image: -moz-linear-gradient(45deg,green 25%,transparent 25%, transparent 75%,green 75%),
    -moz-linear-gradient(45deg,green 25%,white 25%, white 75%,green 75%); 
background-image: -moz-linear-gradient(45deg,green 25%,transparent 25%, transparent 75%,green 75%),
    -ms-linear-gradient(45deg,green 25%,white 25%, white 75%,green 75%); 
background-image: -o-linear-gradient(45deg,green 25%,transparent 25%, transparent 75%,green 75%),
    -o-linear-gradient(45deg,green 25%,white 25%, white 75%,green 75%); 
background-image: -webkit-linear-gradient(45deg,green 25%,transparent 25%, transparent 75%,green 75%),
    -webkit-linear-gradient(45deg,green 25%,white 25%, white 75%,green 75%); 
background-image: linear-gradient(45deg,green 25%,transparent 25%, transparent 75%,green 75%),
    linear-gradient(45deg,green 25%,white 25%, white 75%,green 75%); 
background-position: 25px 25px,0 0;

矢印

background-image: -moz-linear-gradient(45deg,green 25%,transparent 25%),
    -moz-linear-gradient(45deg,green 25%,transparent 25%),
    -moz-linear-gradient(45deg,transparent 50%,white 50%,white 75%,transparent 75%),
    -moz-linear-gradient(-45deg,green 12.5%,white 12.5%,white 37.5%,green 37.5%, green 62.5%, white 62.5%,white 87.5%,green 87.5%); 
background-image: -ms-linear-gradient(45deg,green 25%,transparent 25%),
    -ms-linear-gradient(45deg,green 25%,transparent 25%),
    -ms-linear-gradient(45deg,transparent 50%,white 50%,white 75%,transparent 75%),
    -ms-linear-gradient(-45deg,green 12.5%,white 12.5%,white 37.5%,green 37.5%, green 62.5%, white 62.5%,white 87.5%,green 87.5%); 
background-image: -o-linear-gradient(45deg,green 25%,transparent 25%),
    -o-linear-gradient(45deg,green 25%,transparent 25%),
    -o-linear-gradient(45deg,transparent 50%,white 50%,white 75%,transparent 75%),
    -o-linear-gradient(-45deg,green 12.5%,white 12.5%,white 37.5%,green 37.5%, green 62.5%, white 62.5%,white 87.5%,green 87.5%); 
background-image: -webkit-linear-gradient(45deg,green 25%,transparent 25%),
    -webkit-linear-gradient(45deg,green 25%,transparent 25%),
    -webkit-linear-gradient(45deg,transparent 50%,white 50%,white 75%,transparent 75%),
    -webkit-linear-gradient(-45deg,green 12.5%,white 12.5%,white 37.5%,green 37.5%, green 62.5%, white 62.5%,white 87.5%,green 87.5%); 
background-image: linear-gradient(45deg,green 25%,transparent 25%),
    linear-gradient(45deg,green 25%,transparent 25%),
    linear-gradient(45deg,transparent 50%,white 50%,white 75%,transparent 75%),
    linear-gradient(-45deg,green 12.5%,white 12.5%,white 37.5%,green 37.5%, green 62.5%, white 62.5%,white 87.5%,green 87.5%); 
background-position: 25px 25px,0 0,0 0,0 0;

鱗・三角形敷き詰め（小さな直角三角形8片をずらして配置する．→改良の余地有り）

background-image: -moz-linear-gradient(154deg,green 16%,transparent 17%),
    -moz-linear-gradient(26deg,green 16%,transparent 17%),
    -moz-linear-gradient(154deg,green 16%,transparent 17%),
    -moz-linear-gradient(26deg,green 16%,transparent 17%),
    -moz-linear-gradient(154deg,green 16%,transparent 17%),
    -moz-linear-gradient(26deg,green 16%,transparent 17%),
    -moz-linear-gradient(154deg,green 16%,transparent 17%),
    -moz-linear-gradient(26deg,green 16%,white 17%); 
background-image: -webkit-linear-gradient(154deg,green 16%,transparent 17%),
    -webkit-linear-gradient(26deg,green 16%,transparent 17%),
    -webkit-linear-gradient(154deg,green 16%,transparent 17%),
    -webkit-linear-gradient(26deg,green 16%,transparent 17%),
    -webkit-linear-gradient(154deg,green 16%,transparent 17%),
    -webkit-linear-gradient(26deg,green 16%,transparent 17%),
    -webkit-linear-gradient(154deg,green 16%,transparent 17%),
    -webkit-linear-gradient(26deg,green 16%,white 17%); 
background-image: -o-linear-gradient(154deg,green 16%,transparent 17%),
    -o-linear-gradient(26deg,green 16%,transparent 17%),
    -o-linear-gradient(154deg,green 16%,transparent 17%),
    -o-linear-gradient(26deg,green 16%,transparent 17%),
    -o-linear-gradient(154deg,green 16%,transparent 17%),
    -o-linear-gradient(26deg,green 16%,transparent 17%),
    -o-linear-gradient(154deg,green 16%,transparent 17%),
    -o-linear-gradient(26deg,green 16%,white 17%); 
background-image: -ms-linear-gradient(154deg,green 16%,transparent 17%),
    -ms-linear-gradient(26deg,green 16%,transparent 17%),
    -ms-linear-gradient(154deg,green 16%,transparent 17%),
    -ms-linear-gradient(26deg,green 16%,transparent 17%),
    -ms-linear-gradient(154deg,green 16%,transparent 17%),
    -ms-linear-gradient(26deg,green 16%,transparent 17%),
    -ms-linear-gradient(154deg,green 16%,transparent 17%),
    -ms-linear-gradient(26deg,green 16%,white 17%); 
background-image: linear-gradient(154deg,green 16%,transparent 17%),
    linear-gradient(26deg,green 16%,transparent 17%),
    linear-gradient(154deg,green 16%,transparent 17%),
    linear-gradient(26deg,green 16%,transparent 17%),
    linear-gradient(154deg,green 16%,transparent 17%),
    linear-gradient(26deg,green 16%,transparent 17%),
    linear-gradient(154deg,green 16%,transparent 17%),
    linear-gradient(26deg,green 16%,white 17%); 
background-position: 37.5px 25px,37.5px 25px,12.5px 25px,12.5px 25px,25px 0px,25px 0px,0 0,0 0;

矢絣

background-image: -moz-linear-gradient(0deg,transparent 24%,seagreen 24%,seagreen 26%, transparent 26%,transparent 74%,seagreen 74%,seagreen 76%, transparent 76%),
    -moz-linear-gradient(45deg,white 25%, transparent 25%), 
    -moz-linear-gradient(45deg,white 25%, transparent 25%), 
    -moz-linear-gradient(45deg,green 25%, transparent 25%), 
    -moz-linear-gradient(45deg,green 25%, transparent 25%), 
    -moz-linear-gradient(-45deg,white 25%,green 25%, green 50%, white 50%, white 75%,green 75%); 
background-image: -ms-linear-gradient(0deg,transparent 24%,seagreen 24%,seagreen 26%, transparent 26%,transparent 74%,seagreen 74%,seagreen 76%, transparent 76%),
    -ms-linear-gradient(45deg,white 25%, transparent 25%), 
    -ms-linear-gradient(45deg,white 25%, transparent 25%), 
    -ms-linear-gradient(45deg,green 25%, transparent 25%), 
    -ms-linear-gradient(45deg,green 25%, transparent 25%), 
    -ms-linear-gradient(-45deg,white 25%,green 25%, green 50%, white 50%, white 75%,green 75%); 
background-image: -o-linear-gradient(0deg,transparent 24%,seagreen 24%,seagreen 26%, transparent 26%,transparent 74%,seagreen 74%,seagreen 76%, transparent 76%), 
    -o-linear-gradient(45deg,white 25%, transparent 25%), 
    -o-linear-gradient(45deg,white 25%, transparent 25%), 
    -o-linear-gradient(45deg,green 25%, transparent 25%), 
    -o-linear-gradient(45deg,green 25%, transparent 25%), 
    -o-linear-gradient(-45deg,white 25%,green 25%, green 50%, white 50%, white 75%,green 75%); 
background-image: -webkit-linear-gradient(0deg,transparent 24%,seagreen 24%,seagreen 26%, transparent 26%,transparent 74%,seagreen 74%,seagreen 76%, transparent 76%),
    -webkit-linear-gradient(45deg,white 25%, transparent 25%), 
    -webkit-linear-gradient(45deg,white 25%, transparent 25%), 
    -webkit-linear-gradient(45deg,green 25%, transparent 25%), 
    -webkit-linear-gradient(45deg,green 25%, transparent 25%), 
    -webkit-linear-gradient(-45deg,white 25%,green 25%, green 50%, white 50%, white 75%,green 75%); 
background-image: linear-gradient(0deg,transparent 24%,seagreen 24%,seagreen 26%, transparent 26%,transparent 74%,seagreen 74%,seagreen 76%, transparent 76%),
    linear-gradient(45deg,white 25%, transparent 25%), 
    linear-gradient(45deg,white 25%, transparent 25%), 
    linear-gradient(45deg,green 25%, transparent 25%), 
    linear-gradient(45deg,green 25%, transparent 25%), 
    linear-gradient(-45deg,white 25%,green 25%, green 50%, white 50%, white 75%,green 75%); 
background-position: 0 0,25px -25px ,0 0 ,75px 50px,0 25px,0 0;

円の六方充填

background-image: -moz-radial-gradient(25px 25px,contain circle,green 98%,transparent 100%),
    -moz-radial-gradient(25px 25px,contain circle,green 98%,white 100%);
background-image: -webkit-radial-gradient(25px 25px,contain circle,green 98%,transparent 100%),
    -webkit-radial-gradient(25px 25px,contain circle,green 98%,white 100%);
background-image: -o-radial-gradient(25px 25px,contain circle,green 98%,transparent 100%),
    -o-radial-gradient(25px 25px,contain circle,green 98%,white 100%);
background-image: -ms-radial-gradient(25px 25px,contain circle,green 98%,transparent 100%),
    -ms-radial-gradient(25px 25px,contain circle,green 98%,white 100%);
background-image: radial-gradient(25px 25px,contain circle,green 98%,transparent 100%),
    radial-gradient(25px 25px,contain circle,green 98%,white 100%); 
background-position: 25px 43px,0 0; 
background-size: 50px 86px;

background-image: -moz-linear-gradient(315deg,green 25%, transparent 25%),
    -moz-linear-gradient(225deg,green 25%, transparent 25%),
    -moz-linear-gradient(135deg,green 25%, transparent 25%),
    -moz-linear-gradient(45deg,green 25%, transparent 25%);
background-image: -webkit-linear-gradient(315deg,green 25%, transparent 25%),
    -webkit-linear-gradient(225deg,green 25%, transparent 25%),
    -webkit-linear-gradient(135deg,green 25%, transparent 25%),
    -webkit-linear-gradient(45deg,green 25%, transparent 25%);
background-image: -o-linear-gradient(315deg,green 25%, transparent 25%),
    -o-linear-gradient(225deg,green 25%, transparent 25%),
    -o-linear-gradient(135deg,green 25%, transparent 25%),
    -o-linear-gradient(45deg,green 25%, transparent 25%);
background-image: -ms-linear-gradient(315deg,green 25%, transparent 25%),
    -ms-linear-gradient(225deg,green 25%, transparent 25%),
    -ms-linear-gradient(135deg,green 25%, transparent 25%),
    -ms-linear-gradient(45deg,green 25%, transparent 25%);
background-image: linear-gradient(315deg,green 25%, transparent 25%),
    linear-gradient(225deg,green 25%, transparent 25%),
    linear-gradient(135deg,green 25%, transparent 25%),
    linear-gradient(45deg,green 25%, transparent 25%);
background-position: 0 -25px,25px 0;

矢印（横）

background-image: -moz-linear-gradient(135deg,green 25%, transparent 25%),
    -moz-linear-gradient(-45deg,green 25%, transparent 25%),
    -moz-linear-gradient(45deg,green 25%, transparent 25%),
    -moz-linear-gradient(-45deg,green 25%, transparent 25%);
background-image: -webkit-linear-gradient(135deg,green 25%, transparent 25%),
    -webkit-linear-gradient(-45deg,green 25%, transparent 25%),
    -webkit-linear-gradient(45deg,green 25%, transparent 25%),
    -webkit-linear-gradient(-45deg,green 25%, transparent 25%); 
background-image: -o-linear-gradient(135deg,green 25%, transparent 25%),
    -o-linear-gradient(-45deg,green 25%, transparent 25%),
    -o-linear-gradient(45deg,green 25%, transparent 25%),
    -o-linear-gradient(-45deg,green 25%, transparent 25%); 
background-image: -ms-linear-gradient(135deg,green 25%, transparent 25%),
    -ms-linear-gradient(-45deg,green 25%, transparent 25%),
    -ms-linear-gradient(45deg,green 25%, transparent 25%),
    -ms-linear-gradient(-45deg,green 25%, transparent 25%); 
background-image:linear-gradient(135deg,green 25%, transparent 25%),
    linear-gradient(-45deg,green 25%, transparent 25%),
    linear-gradient(45deg,green 25%, transparent 25%),
    linear-gradient(-45deg,green 25%, transparent 25%); 
background-position: 0 12.5px,25px -12.5px,0 0,0 0;

ゲームミュージックと生存確認をかねた画期的な

2012年4月11日水曜日

css3のgradient関数を使った敷き詰めカタログ

0 件のコメント:

コメントを投稿

おしらせ

頒布物

DEFGHI1977とは?

いろいろ

ラベル

ブログアーカイブ

カウンター