CSS3の背景組み合わせで模様を生成する
背景を複数指定して模様をつくる
CSSの各プロパティをカンマで区切って組み合わせる(重ね合わせる)。
背景画像は先に記述した情報が前面に表示される。
background-imageには画像以外に、gradientによる配色指定ができる。
background-sizeで要素より小さくすることでタイルのように繰り返す模様を作ることができる。
background-positionで背景位置をズラして組み合わせることで、複雑な模様も表現可能になる。
background-image:
値A,
値B
;
background-position:
値A,
値B
;
background-size:
値A,
値B
;
}
パッチワーク模様
水平方向の線形グラデーションだと「四角形」がつくれないので、斜め方向の線形グラデーションでつくった「三角形」を2枚重ねて表現する。
チェック模様
Chrome(Webkit系)ではgradientの色の区切りは%指定のみで、px指定を使うことができない。backround-sizeではpx指定ができるので、上手く数値を組み合わせる必要がある。
配色指定を#FFFFFFのような16進数指定でなく rgba(255,255,255,1)のアルファ付きRGBの10進法形式にすると透過を含めた重ねあわせを表現することができる。
ナナメの直線を一本に繋げるのも一苦労。タイルされることを計算して、50%ズラしたグラデーション(color-stopで直線化)を重ねる必要があります。
円形
※本来のgradientの機能とは違う使い方であり、ベンダープレフィックスを使ったクロスブラウザ対応も面倒なのでほどほどにすること。
対応ブラウザ
Chrome 10以上
Firefox 5以上
さらに複雑なパターンのサンプル
http://leaverou.me/css3patterns/
view source
JavaScript
CSS
#demo ul:after{
content:"";
display:block;
clear:both;
}
#demo ul li{
float:left;
width:120px;
height:120px;
margin:10px;
}
/*----------------------------------------
#patterns
----------------------------------------*/
ul#patterns li:nth-child(1){
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
from(#000000),
to(transparent)
);
background-size:
20px 20px
;
}
ul#patterns li:nth-child(2){
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
from(#000000),
color-stop(50%, #000000),
color-stop(50%, transparent),
to(transparent)
);
background-size:
20px 20px
;
}
ul#patterns li:nth-child(3){
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
from(#000000),
color-stop(50%, #000000),
color-stop(50%, transparent),
to(transparent)
),
-webkit-gradient(
linear,
left top,
right top,
from(#999999),
color-stop(50%, #999999),
color-stop(50%, transparent),
to(transparent)
);
background-size:
20px 20px
;
}
/* 市松模様 ナナメ */
ul#patterns li:nth-child(4){
background-image:
-webkit-gradient(
linear,
left top,
right bottom,
from(#000000),
color-stop(50%, #000000),
color-stop(50%, transparent),
to(transparent)
);
background-size:
10% 10%
;
}
/* 市松模様 ナナメ */
ul#patterns li:nth-child(5){
background-image:
-webkit-gradient(
linear,
left top,
right bottom,
from(#000000),
color-stop(50%, #000000),
color-stop(50%, transparent),
to(transparent)
),
-webkit-gradient(
linear,
right top,
left bottom,
from(transparent),
color-stop(50%, transparent),
color-stop(50%, #999999),
to(#999999)
);
background-size:
10px 10px,
10px 10px
;
background-position:
0 0,
10px 10px
;
}
/* 市松模様 パッチワーク */
ul#patterns li:nth-child(6){
background-image:
-webkit-gradient(
linear,
left top,
right bottom,
from(#000000),
color-stop(25%, #000000),
color-stop(25%, transparent),
color-stop(75%, transparent),
color-stop(75%, #000000),
to(#000000)
);
background-size:
20px 20px
;
background-position:
0 0
;
}
/* 直線 */
ul#patterns li:nth-child(7){
background-image:
-webkit-gradient(
linear,
left top,
right bottom,
from(#000000),
color-stop(25%, #000000),
color-stop(25%, transparent),
color-stop(75%, transparent),
color-stop(75%, #000000),
to(#000000)
),
-webkit-gradient(
linear,
right top,
left bottom,
from(#000000),
color-stop(25%, #000000),
color-stop(25%, transparent),
color-stop(75%, transparent),
color-stop(75%, #000000),
to(#000000)
);
background-size:
20px 20px
;
background-position:
0 0,
20px 20px;
}
/* 十字の重ねあわせ */
ul#patterns li:nth-child(8){
background-image:
-webkit-gradient(
linear,
left top,
right bottom,
from(#000000),
color-stop(25%, #000000),
color-stop(25%, transparent),
color-stop(75%, transparent),
color-stop(75%, #000000),
to(#000000)
),
-webkit-gradient(
linear,
right bottom,
left top,
from(#000000),
color-stop(25%, #000000),
color-stop(25%, transparent),
color-stop(75%, transparent),
color-stop(75%, #000000),
to(#000000)
);
background-size:
20px 20px
;
background-position:
0 0,
10px 10px
;
}
ul#checked li:nth-child(1){
background-image:
-webkit-gradient(
linear,
left top,
right top,
from(#000000),
color-stop(10%, #000000),
color-stop(10%, transparent),
to(transparent)
);
background-size:
20px 20px
;
}
/* チェック柄 */
ul#checked li:nth-child(2){
background-image:
-webkit-gradient(
linear,
left top,
right top,
from(#000000),
color-stop(10%, #000000),
color-stop(10%, transparent),
to(transparent)
),
-webkit-gradient(
linear,
left top,
right top,
from(#999999),
color-stop(30%, #999999),
color-stop(30%, transparent),
to(transparent)
);
background-size:
20px 20px
;
background-position:
0 0,
8px 0px
;
}
/* ナナメ直線 */
ul#checked li:nth-child(3){
background-image:
-webkit-gradient(
linear,
left top,
right top,
from(rgba(0,0,0,0.5)),
color-stop(10%, rgba(0,0,0,0.6)),
color-stop(10%, transparent),
to(transparent)
),
-webkit-gradient(
linear,
left top,
left bottom,
from(rgba(99,99,99,0.8)),
color-stop(30%, rgba(99,99,99,0.8)),
color-stop(30%, transparent),
to(transparent)
),
-webkit-gradient(
linear,
left top,
right top,
from(rgba(200,200,200,1)),
color-stop(30%, rgba(200,200,200,1)),
color-stop(30%, transparent),
to(transparent)
);
background-size:
20px 20px
;
background-position:
0 0,
0px 4px,
8px 0px
;
background-opacity:
20px 20px
;
}
ul#checked li:nth-child(4){
background-image:
-webkit-gradient(
linear,
left top,
right bottom,
from(transparent),
color-stop(5%, transparent),
color-stop(5%, #000000),
color-stop(10%, #000000),
color-stop(10%, transparent),
to(transparent)
),
-webkit-gradient(
linear,
left top,
right bottom,
from(transparent),
color-stop(55%, transparent),
color-stop(55%, #000000),
color-stop(60%, #000000),
color-stop(60%, transparent),
to(transparent)
);
background-size:
40px 40px
;
background-position:
0 0,
0px 0px
;
}
ul#circle li:nth-child(1){
background-image:
-webkit-gradient(
radial,
50% 50%,
8,
50% 50%,
20,
from(#000000),
color-stop(20%, #000000),
color-stop(20%, transparent),
color-stop(50%, transparent),
color-stop(50%, #999999),
color-stop(75%, #999999),
color-stop(75%, #555555),
to(#555555)
);
background-size:
40px 40px
;
}
/* 波形 青海波 */
ul#circle li:nth-child(2){
background-image:
-webkit-gradient(
radial,
50% 100%,
2,
50% 100%,
22,
from(#ffffff),
color-stop(79%, #ffffff),
color-stop(80%, #999999),
color-stop(99%, #999999),
color-stop(100%, transparent),
to(transparent)
),
-webkit-gradient(
radial,
0% 50%,
2,
0% 50%,
22,
from(#ffffff),
color-stop(79%, #ffffff),
color-stop(80%, #999999),
color-stop(99%, #999999),
color-stop(100%, transparent),
to(transparent)
),
-webkit-gradient(
radial,
100% 50%,
2,
100% 50%,
22,
from(#ffffff),
color-stop(79%, #ffffff),
color-stop(80%, #999999),
color-stop(99%, #999999),
color-stop(100%, transparent),
to(transparent)
);
background-size:
40px 44px
;
}
ul#circle li:nth-child(3){
background-image:
-webkit-gradient(
radial,
0% 0%,
2,
0% 0%,
22,
from(#ffffff),
color-stop(79%, #ffffff),
color-stop(80%, #999999),
color-stop(99%, #999999),
color-stop(100%, transparent),
to(transparent)
),
-webkit-gradient(
radial,
100% 100%,
2,
100% 100%,
22,
from(#ffffff),
color-stop(79%, #ffffff),
color-stop(80%, #999999),
color-stop(99%, #999999),
color-stop(100%, transparent),
to(transparent)
);
background-size:
40px 40px
;
}
ul#circle li:nth-child(4){
background-image:
-webkit-gradient(
radial,
0% 0%,
2,
0% 0%,
20,
from(rgba(99,99,99,0.5)),
color-stop(90%, rgba(99,99,99,0.5)),
color-stop(100%, transparent),
to(transparent)
),
-webkit-gradient(
radial,
0% 100%,
2,
0% 100%,
20,
from(rgba(99,99,99,0.5)),
color-stop(90%, rgba(99,99,99,0.5)),
color-stop(100%, transparent),
to(transparent)
),
-webkit-gradient(
radial,
100% 0%,
2,
100% 0%,
20,
from(rgba(99,99,99,0.5)),
color-stop(90%, rgba(99,99,99,0.5)),
color-stop(100%, transparent),
to(transparent)
),
-webkit-gradient(
radial,
100% 100%,
2,
100% 100%,
20,
from(rgba(99,99,99,0.5)),
color-stop(90%, rgba(99,99,99,0.5)),
color-stop(100%, transparent),
to(transparent)
),
-webkit-gradient(
radial,
50% 50%,
10,
50% 50%,
20,
from(rgba(99,99,99,0.5)),
color-stop(50%, rgba(99,99,99,0.5)),
color-stop(50%, rgba(99,99,99,0.8)),
color-stop(99%, rgba(99,99,99,0.8)),
color-stop(100%, transparent),
to(transparent)
);
background-size:
40px 40px
;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-css/css3-patterns/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。