HTMLで和柄を作ってみる その3「100行以下で作る七宝柄」


和柄をWEBコンテンツで無理やり作っちゃうシリーズ第三弾。

今回は七宝柄です。

スクリーンショット 2016-01-15 20.18.52

 

サンプルはこちら

 

<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
	<meta charset="UTF-8">
	<title>七宝柄</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script>
		var app = angular.module('myApp', []);
		app.controller('mainCtrl', function ($scope) {
			var data = this;
			data.datas = new Array(100);
			for (var i = 0; i < data.datas.length; i++) {
				data.datas[i] = i;
			};
		});
	</script>
	<style>
		body{
			padding:0;
			margin:0;
			width:150%;
			height:100%;
			overflow: hidden;
		}
		.circle{
			position:relative;
			float:left;
			width:200px;
			height:200px;
			padding:0;
			margin:0;
			background: -moz-radial-gradient(center, ellipse cover,  rgba(25,68,142,0) 0%, rgba(25,68,142,0) 40%, rgba(25,68,142,1) 75%);
			background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%,rgba(25,68,142,0)), color-stop(40%,rgba(25,68,142,0)), color-stop(75%,rgba(25,68,142,1)));
			background: -webkit-radial-gradient(center, ellipse cover,  rgba(25,68,142,0) 0%,rgba(25,68,142,0) 40%,rgba(25,68,142,1) 75%);
			background: -o-radial-gradient(center, ellipse cover,  rgba(25,68,142,0) 0%,rgba(25,68,142,0) 40%,rgba(25,68,142,1) 75%);
			background: -ms-radial-gradient(center, ellipse cover,  rgba(25,68,142,0) 0%,rgba(25,68,142,0) 40%,rgba(25,68,142,1) 75%);
			background: radial-gradient(ellipse at center,  rgba(25,68,142,0) 0%,rgba(25,68,142,0) 40%,rgba(25,68,142,1) 75%);
		}
		.circle.base{
			border-radius:50%;
			border: 2px solid rgba(25,68,142,1);
		}
		.circle.up{
			border-radius:50%;
			border: 2px solid rgba(25,68,142,1);
		}
		.wrap2{
			position:absolute;
			width:150%;
			left:-100px;
			top:-100px;
		}
	</style>
</head>
<body ng-controller="mainCtrl as data">
	<div>
		<canvas id="{{$index}}" ng-repeat="data in data.datas" class="circle base"></canvas></div>
		<div class="wrap2">
			<canvas id="{{$index}}" ng-repeat="data in data.datas" class="circle up"></canvas>
		</div>
	</body>
	</html>

ただ単にグラデーションをかけた円を複数作って位置をずらしただけの簡単設計です。

参考になれば是非。


投稿日: 2016年1月15日
カテゴリー: html | 投稿者: