CSS3でジェルスタイル

アメブロでCSS3使えんのかとか実験とグラデーションの使用実験かねてCSS3でジェルスタイル作ってみる

とりあえずアメブロの投稿ではstyleタグは使えんかった、scriptタグはダメなのわかるけどstyleタグもダメなのね、しかも改行入ってると動かないし

練習ってことで面倒いしMozilla無視、ってかブログの投稿でクロスブラウザチェックとかないし

ジェルスタイルなんて今時はやんねぇよwww

<div style="padding:3px;border-radius:10px;background:-webkit-radial-gradient(50% 100%,rgb(30,60,120),rgb(80,100,180))">
<p style="font-size:20px;color:white;text-align:center;margin:0px;padding:5px;border-radius:10px;background:-webkit-linear-gradient(top,rgb(255,255,255) 0%,rgba(80,100,180,0) 50%,rgb(100,150,220) 100%)">
ジェルスタイルなんて今時はやんねぇよwww
</p>
</div>

javascriptでHSBで色を作るクラス

Canvas用のライブラリ、
とりあえずコアクラスのひとつ
CLcolorだけ書いた

■コンストラクタ
CLcolor(R値,G値,B値,α値)

■クラスメソッド
・CLcolor.fromHSBA（色相、彩度、明度、透明度）
HSBと透明度でCLcolorオブジェクトを生成
・CLcolor.fromPixel（ImageData、x、y）
ImageDataオブジェクトの１ピクセル分のデータからCLcolorオブジェクトを生成

■オブジェクトプロパティ
r＝R
g＝G
b＝B
a＝透明度
H＝色相
S＝彩度
B＝明度

■オブジェクトメソッド
・toPixel(ImageData、x、y)
ImageDataオブジェクトの１ピクセル分のデータに値を反映する

function CLcolor(r,g,b,a){
	this.r=r
	this.g=g
	this.b=b
	this.a=a
}
CLcolor.prototype={
	get H(){
		var _n=this.g-this.r
		var _m=this.b-this.g
		var _o=this.r-this.b
		if(_n>>31==0){
			if(_m>>31==0){
				return 240+_n/_o*60
			}else if(_o>>31==0){
				return 120+_o/_m*60
			}else{
				return 120-_o/_n*60
			}
		}else{
			if(_m>>31!=0){
				return -_m/_o*60
			}else if(_o>>31!=0){
				return 240-_n/_m*60
			}else{
				return 360+_m/_n*60
			}
		}
	},
	get S(){
		return (Math.max(this.r,this.g,this.b)-Math.min(this.r,this.g,this.b))/255*100
	},
	get B(){
		return Math.max(this.r,this.g,this.b)/255*100
	},
	set H(n){
		n/=60
		while(n>>31==1)n+=6
		while(n>=6)n-=6
		var _max=Math.max(this.r,this.g,this.b)
		var _min=Math.min(this.r,this.g,this.b)
		var _c=_max-_min
		this.r=this.g=this.b=_min
		switch(n>>0){
			case 0:
				this.r+=_c;
				this.g+=_c*n;
				break;
			case 1:
				this.r+=_c*(1-(n-1));
				this.g+=_c;
				break;
			case 2:
				this.g+=_c;
				this.b+=_c*(n-2);
				break;
			case 3:
				this.g+=_c*(1-(n-3));
				this.b+=_c;
				break;
			case 4:
				this.b+=_c;
				this.r+=_c*(n-4);
				break;
			case 5:
				this.b+=_c*(1-(n-5));
				this.r+=_c;
				break;
		}
	},
	set S(n){
		var _max=Math.max(this.r,this.g,this.b)
		var _min=Math.min(this.r,this.g,this.b)
		var m=(_max*n/100)/(_max-_min)
		this.r=_max-(_max-this.r)*m
		this.g=_max-(_max-this.g)*m
		this.b=_max-(_max-this.b)*m
	},
	set B(n){
		var _m=n/B
		this.r*=m
		this.g*=m
		this.b*=m
	},
	toPixel:function(img,x,y){
		var i=(x+y*img.width)<<2
		img.data[i]=this.r
		img.data[i+1]=this.g
		img.data[i+2]=this.b
		img.data[i+3]=this.a
	}
}
CLcolor.fromHSBA=function(h,s,b,a){
	var h=Math.abs(h%360)/60;
	while(h<0)h+=6
	var s=Math.min(Math.abs(s),100)/100
	var b=Math.min(Math.abs(b),100)/100
	var c=255*s*b;
	var r,g,b
	r=g=b=Math.floor(b*(1-s)*255);
	var a=a/100*255;
	switch(h>>0){
		case 0:
			r+=Math.floor(c);
			g+=Math.floor(c*h);
			break;
		case 1:
			r+=Math.floor(c*(1-h%1));
			g+=Math.floor(c);
			break;
		case 2:
			g+=Math.floor(c);
			b+=Math.floor(c*(h%1));
			break;
		case 3:
			g+=Math.floor(c*(1-h%1));
			b+=Math.floor(c);
			break;
		case 4:
			b+=Math.floor(c);
			r+=Math.floor(c*(h%1));
			break;
		case 5:
			b+=Math.floor(c*(1-h%1));
			r+=Math.floor(c);
			break;
	}
	return new CLcolor(r,g,b,a)
}
CLcolor.fromPixel=function(img,x,y){
	var i=(x+y*img.width)<<2
	return new CLcolor(img.data[i],img.data[i+1],img.data[i+2],img.data[i+3])
}

600×400で彩度を調整とかしてみたけど0.3秒位かかる
毎フレーム全ピクセル操作は無理そう

canvasチートシート

っていうかただのメソッドとプロパティの一覧