新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!
新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!
新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!
新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!
「クリスピー・クリーム・ドーナツ」は、新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!
テキスト
<!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>