HTMLで和柄を作ってみる その1


日本独特の和の柄って素敵ですよね。綺麗にパターン化されてて整理されてます。

そんな和柄をHTMLで作ってみた。

 

青海波を作ってみた。

青海波ってのはこんなかんじです。

スクリーンショット 2015-06-28 22.16.19

それをHTMLで作るとこうなります。

スクリーンショット 2015-06-28 21.58.24

 

簡単な作り方の説明

まずはソースから。

<!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.rowdata = new Array(10);
			data.datas = new Array(10);
			for (var i = 0; i < data.datas.length; i++) {
				data.rowdata[i] = i;
				data.datas[i] = i;
		});
	</script>
</head>
<body ng-controller="mainCtrl as data">
	<div class="grad">
	</div>
	<div class="box" ng-repeat="i in data.rowdata">
		<div class="wrap" id="{{$index}}" ng-repeat="data in data.datas" style="top:{{-150 + 75 * i}}px">
			<canvas ng-repeat="cdata in [1,2,3,4]" class="circle base"></canvas>
		</div>
	</div>
</html>

繰り返し表示するのが面倒だったのでAngularJSでリピート用にデータ作って繰り返してます。コピペでもいいんですけどね。簡単に繰り返しができるAngularJS万歳。

body{
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	overflow: hidden;
	white-space:nowrap;
}
.circle{
	position:absolute;
	float:left;
	padding:0;
	margin:0;
	border-radius:50%;
	background:#fff;
	border:20px solid;
	border-color:#00a381;
}
.circle:nth-child(4n+1){
	width:200px;
	height:200px;
}
.circle:nth-child(4n+2){
	width:150px;
	height:150px;
	left:25px;
	top:25px;
}
.circle:nth-child(4n+3){
	width:100px;
	height:100px;
	left:50px;
	top:50px;
	border-color:#38b48b;
}
.circle:nth-child(4n+0){
	width:50px;
	height:50px;
	left:75px;
	top:75px;
	border-color:#a2d7dd;
}
.wrap{
	position:relative;
	width:240px;
	height:240px;
}
div{
	display:inline-block;
}
.box{
	position:absolute;
}
.box:nth-child(2n){
	left:-120px;
}
.grad{
	width:100%;
	height:100%;
	position:absolute;
	z-index:100;
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 13%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(13%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 13%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 13%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 13%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 13%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

CSS部分ではサークルを作成してそれぞれを微妙にずらして重ねあわせてます。

最後に全体にグラデーションのラッピングしてそれっぽく見せてます。

HTMLで組んでるので他の和柄と合わせて動的に変形することもできます。

 

 


投稿日: 2015年6月28日
カテゴリー: 未分類 | 投稿者: