ユーザーエイジェント出力一覧
使ってるブラウザの$_SERVER['HTTP_USER_AGENT']の出力結果
WebKit系はMozillaという文字列も含むので、
ベンダープレフィクスの判定とかするなら
Webkitの文字列優先になるように気をつけないといけない
MSIE?なにそれ新キャラ?
Safari
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10
Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.78 Safari/535.11
Firefox
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Opera
Opera/9.80 (Macintosh; Intel Mac OS X 10.7.3; U; ja) Presto/2.10.229 Version/11.61
WebKit系はMozillaという文字列も含むので、
ベンダープレフィクスの判定とかするなら
Webkitの文字列優先になるように気をつけないといけない
MSIE?なにそれ新キャラ?
グラデーションのjqueryプラグイン

jqueryでこんなカンジのグラデーションを簡単にやるためのプラグイン
jquery.styler.js
// JavaScript Document
$.fn.extend({
gradient:function(direction,colors){
var rsl=""
if($.browser.safari){
rsl+="-webkit-"
}else if($.browser.opera){
rsl+="-o-"
}else if($.browser.msie){
rsl+="-ms-"
}else if($.browser.mozilla){
rsl+="-moz-"
}
rsl+="linear-gradient("+direction
for(var i in colors){
rsl+=","+colors[i]+" "+i+"%"
}
rsl+=")"
$(this).css("background",rsl)
return this
},
fog:function(h,s,b,a){
$(this).gradient("top",{0:hsba(h,s,b,a),100:hsba(h-10,s,b,0)})
return this
},
glass:function(h,s,b){
$(this).gradient("top",{0:hsba(h,s*0.2,b*1.5,100),45:hsba(h,s*0.7,b*1.2,100),46:hsba(h,s,b*0.9,100),100:hsba(h,s,b,100)})
$(this).css("box-shadow","inset 0px 0px 3px 0px "+hsba(h,s,b*0.9,100)+",2px 2px 3px 0px "+hsba(h,s,b*0.7,100))
return this
},
neon:function(h,s,b){
$(this).gradient("left",{0:hsba(h,s*0.8,b,100),10:hsba(h,s*0.5,b,100),50:hsba(h+10,s/4,b*2,100),90:hsba(h,s*0.5,b,100),100:hsba(h,s*0.8,b,100)})
$(this).css("box-shadow","inset 0px 0px 20px 0px "+hsba(h,s,b,100)+",0px 0px 10px 0px "+hsba(h,s,b,50))
return this
},
stripe:function(h,s,b,w){
$(this).gradient("top left",{
0:hsba(h,s,b,100),12.5:hsba(h,s,b,100),
12.5:hsba(h,s,b,0),37.5:hsba(h,s,b,0),
37.5:hsba(h,s,b,100),62.5:hsba(h,s,b,100),
62.5:hsba(h,s,b,0),87.5:hsba(h,s,b,0),
87.5:hsba(h,s,b,100),100:hsba(h,s,b,100)})
$(this).css('background-size',w+"px "+w+"px")
return this
}
})
function hsba(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 "rgba("+r+","+g+","+b+","+a+")"
}
追加される関数は
gradient(direction,colors)
fog(h,s,b,a)
glass(h,s,b)
neon(h,s,b)
stripe(h,s,b,w)
hsba()は色相、彩度、明度、透明度で
CSS3用のrgba()値を作ります
使い方は以下参照
使用例のHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8" />
<title>グラデーション</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript" src="js/jquery.styler.js"></script>
<script type="text/javascript">
$(function(){
$("h2").css("text-align","center").css("color",hsba(240,30,50,100))
$(".gradient").gradient("top",{0:hsba(200,10,100,100),100:hsba(240,10,100,100)})
$(".fog").fog(240,20,100,50)
$(".glass").glass(240,30,100)
$(".neon").neon(240,50,100).css("border-radius","10px")
$(".stripe").stripe(240,10,95,5)
})
</script>
</head>
<body>
<h2 class="gradient">gradient</h2>
<h2 class="fog">fog</h2>
<h2 class="glass">glass</h2>
<h2 class="neon">neon</h2>
<h2 class="stripe">stripe</h2>
</body>
</html>
プラグインなので先にjquery読み込まないとダメです
一応jqueryオブジェクトをそのまま次に渡すのでチェーンできます
