2012年4月11日水曜日

css3のrepeating-radial-gradientを使って木目を表現する

repeating-radial-gradientを使って木目調のパターンを作ってみた.
シンプルな記述で結構自然に見える.

background-image: -moz-repeating-radial-gradient(-1000px 100px,ellipse,burlywood 10px,wheat 40px,burlywood 50px,wheat 120px,burlywood 130px); 
background-image: -webkit-repeating-radial-gradient(-1000px 100px,ellipse,burlywood 10px,wheat 40px,burlywood 50px,wheat 120px,burlywood 130px); 
background-image: -o-repeating-radial-gradient(-1000px 100px,ellipse,burlywood 10px,wheat 40px,burlywood 50px,wheat 120px,burlywood 130px); 
background-image: -ms-repeating-radial-gradient(-1000px 100px,ellipse,burlywood 10px,wheat 40px,burlywood 50px,wheat 120px,burlywood 130px); 
background-image: repeating-radial-gradient(-1000px 100px,ellipse,burlywood 10px,wheat 40px,burlywood 50px,wheat 120px,burlywood 130px); 
box-shadow: 1px 1px tan,2px 2px tan,3px 3px tan,4px 4px tan,5px 5px tan; 
height: 150px; width: 100%;

0 件のコメント:

コメントを投稿