CSSとJavaScriptで飾りつけする吹き出し風デザイン
あくまでも静的デザインの噴出し。
浮き上がってくるアレではありません。
タイトルやコメント等、ちょっとした飾りに使ってみはいかがでしょうか？
導入方法
動作環境は以下のとおり
・Internet Explorer 6 & 7
・Firefox 2.0
・Safari 2.0
・Opera 9.0
導入は比較的簡単です。
ダウンロードしたファイルのうち、index.htmlを開いてみるとわかると思います。
<link rel="stylesheet" href="bubbles.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
<script type="text/JavaScript">
window.onload = function() {
settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true
}
var myBoxObject = new curvyCorners(settings, "rounded");
myBoxObject.applyCornersToAll();
}
</script>
呼び出しはこれ。
これを<head>～</head>の中にいれる。
後は表示したい部分で呼び出せばOK。
灰色背景の場合
<div class="bubble">
<blockquote>
<p>Works great for blog comments!</p>
</blockquote>
<cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite>
</div>
バック灰色、淵が白の場合
<div class="bubble">
<div class="rounded">
<blockquote>
<p>Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Rounded Bubble</strong> using <a href="http://www.curvycorners.net/">curvy corners</a></cite>
</div>
バック黒、淵白の場合
<div id="pimped" class="bubble">
<div class="rounded">
<blockquote>
<p>Expands to fit any layout and scales nicely with big and small font sizes.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Dark Bubble</strong></cite>
</div>
お試しあれ。
