新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！
新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！
新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！
新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！
「クリスピー・クリーム・ドーナツ」は、新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！
テキスト
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ShadedBorder| 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="/content/lib/shadedborder/shadedborder.js" type="text/javascript"></script>
<script type="text/javascript">
var shadowedBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
var splitBorderTop = RUZEE.ShadedBorder.create({ corner:10, edges:"tlr" });
var splitBorderBottom = RUZEE.ShadedBorder.create({ corner:10, edges:"blr" });
var transBorder = RUZEE.ShadedBorder.create({ corner:15, border:8, borderOpacity:0.4 });
var tabBorder = RUZEE.ShadedBorder.create({ corner:8, edges:"tlr", border:1 });
var linksBorder = RUZEE.ShadedBorder.create({ corner:10, border:2 });
var linkBorder = RUZEE.ShadedBorder.create({ shadow:4 });
var changeBorders = [
RUZEE.ShadedBorder.create({ corner:20 }),
RUZEE.ShadedBorder.create({ corner:10, shadow:20 })
];
var partialIDs = ["tl", "tr", "bl", "br", "tlr", "blr", "tbl", "tbr"];
var partialBorders = {};
for (var i=0; i<partialIDs.length; ++i) {
partialBorders[partialIDs[i]] = RUZEE.ShadedBorder.create({
corner:10, border:2, edges:partialIDs[i] });
}
</script>
<!-- CSS -->
<style type="text/css">
h3 { font-size:1.1em; font-weight:bold; margin:0; padding:0 0 10px 0; }
/* One simple border definition */
#shadowed-border { padding:20px; width:33%; margin:20px auto; color:#fff; text-align:center; }
#shadowed-border, #shadowed-border .sb-inner { background:#444 url(grad.png) repeat-x; }
#shadowed-border p { text-align:left; }
/* The split heading/content element */
#split { margin:20px auto; width:33%; }
#split h3 { padding:4px; text-align:center; margin:0; color:#fff; }
#split h3, #split h3 .sb-inner { background:#222 url(/content/lib/shadedborder/grad2.png) repeat-x; }
#split .content { padding:4px 10px; color:#444; }
#split .content, #split .content .sb-inner { background:#ddd url(/content/lib/shadedborder/grad3.png) repeat-x; }
#trans-border { width:280px; margin:20px auto; padding:14px 20px; background:#444; color:#222; }
#trans-border .sb-border { background:#000; }
/* Partial stuff */
ul#partial { overflow:hidden; width:490px; margin:20px auto; padding:0; list-style:none; }
* html ul#partial { height:1%; }
ul#partial li { float:left; width:50px; padding:12px 0; text-align:center; margin:0 5px; color:#4c2; }
ul#partial li, ul#partial li .sb-inner { background:#444; }
ul#partial li .sb-border { background:#fff; }
/* The tabs */
#tabs { overflow:hidden; padding:0; margin:20px auto 0 auto; width:400px; color:#444; }
* html #tabs { height:1%; }
#tabs li { float:left; color:#000; list-style:none; padding:0; margin:0 0 0 5px; }
* html #tabs li { display:inline-block; }
#tabs li a { display:block; float:left; text-decoration:none; padding:5px; color:#000; }
#tabs li, #tabs li .sb-inner { background:#ccc; }
#tabs li:hover, #tabs li:hover .sb-inner { background:#eee; }
#tabs li.hover, #tabs li.hover .sb-inner { background:#eee; } /* for ie6 */
#tabs li .sb-border { background:#fff; }
#tabs-content { background:#ccc; width:380px; margin:-1px auto 20px auto; padding:10px; border:1px solid #fff; color:#000; }
/* The links */
#links { color:#fff; padding:20px; margin:20px; width:400px; margin:0 auto; }
#links, #links .sb-inner { background:#444 url(/content/lib/shadedborder/grad.png) repeat-x; }
#links .sb-border { background:#fff; }
#links a { color:yellow; }
#links a .sb-shadow { background:transparent; }
#links a:hover .sb-shadow { background:#777; }
#links a.hover .sb-shadow { background:#777; } /* for ie6 */
#change-border { color:#fff; padding:20px; margin:20px auto; width:300px; }
.change-border0, .change-border0 .sb-inner { background:#444; }
.change-border1, .change-border1 .sb-inner { background:#888; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="warp">
<h1><a href='http://www.ruzee.com/blog/shadedborder'>ShadedBorder - JavaScript Round Corners with Drop Shadow</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>ドロップシャドウ付の角丸</h2>
<div id="shadowed-border">
<h3>『クリスピー・クリーム・ドーナツ』<br>Krispy Kreme Doughnuts</h3>
<p>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！</p>
</div>
<h2>ヘッダ付きの角丸</h2>
<div id="split">
<h3><span>『クリスピー・クリーム・ドーナツ』<br>Krispy Kreme Doughnuts</span></h3>
<div class="content">
<p>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！</p>
</div>
</div>
<h2>枠線つきの角丸</h2>
<div id="trans-border">
<p>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！</p>
</div>
<h2>角丸にする位置を指定</h2>
<ul id="partial">
<li id="tl"><span>左上</span></li>
<li id="tr"><span>右上</span></li>
<li id="bl"><span>左下</span></li>
<li id="br"><span>右下</span></li>
<li id="tlr"><span>左右上</span></li>
<li id="blr"><span>左右下</span></li>
<li id="tbl"><span>左上下</span></li>
<li id="tbr"><span>右上下</span></li>
</ul>
<h2>角丸タブ</h2>
<ul id="tabs">
<li><a href="#" onclick="return false;">Tab1</a></li>
<li><a href="#" onclick="return false;">Tab2</a></li>
<li><a href="#" onclick="return false;">Tab3</a></li>
</ul>
<div id="tabs-content">
コンテンツ
</div>
<h2>リンクにマウスオーバーした時に背景を透過</h2>
<div id="links">
<p><a href="http://krispykreme.jp/index.html" class="sbi"><span>「クリスピー・クリーム・ドーナツ」</span></a>は、新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！</p>
</div>
<h2>ボタンクリックで、角丸の枠のスタイルを変更する</h2>
<div id="change-border">
<button onclick="changeBorder()">枠のスタイルを変更</button>
<p>テキスト</p>
</div>
<!-- JS -->
<script language="javascript" type="text/javascript">
if (!window.$) {
window.$ = function(id) { return document.getElementById(id); }
}
var currentChangeBorder=0;
function changeBorder() {
currentChangeBorder = (currentChangeBorder + 1) % changeBorders.length;
$('change-border').className = 'sb change-border' + currentChangeBorder;
changeBorders[currentChangeBorder].render('change-border');
}
shadowedBorder.render('shadowed-border');
// we have to render the bottom first because we need to exist JUST ONE DIV
// for getElementsByTagName and rendering top will insert loads of them ...
splitBorderBottom.render($('split').getElementsByTagName('div')[0]);
splitBorderTop.render($('split').getElementsByTagName('h3')[0]);
transBorder.render('trans-border');
linksBorder.render('links');
linkBorder.render($('links').getElementsByTagName('a'));
for (id in partialBorders) {
partialBorders[id].render(id);
}
var tabs = $('tabs').getElementsByTagName("li");
for (var i=0; i < tabs.length; ++i) {
tabBorder.render(tabs[i]);
}
changeBorder();
</script>
<!-- JS / -->
<!-- CODE / -->
</div>
</body>
</html>
