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>
お試しあれ。
スポンサード リンク
〜実験中〜
この記事を見た人は以下も見てます
この記事にトラックバックする人はクリック
トラックバックURL
http://e0166.blog89.fc2.com/tb.php/232-ab2d20fd
この記事にトラックバックする(FC2ブログユーザー)
トラックバック受信一覧
[CSS][JavaScript]CSSとJavaScriptで吹き出しを再現するのと、角丸について
吹き出し風のデザインを簡単に再現。 で、吹き出し風のデザインってのは、多用するって訳じゃないので、JavaScriptを使っていてもOKだと思う。 でも、角丸は結構多用したいから、JavaScriptで実現するのに、ちょっと抵抗ある。 が、HTMLとCSSだけで実現しようと思ったら、�info from 1432：2007-07-22 15:45
ディスカッション
コメントの投稿はこちらをクリック
FC2ブログ 紹介予定派遣
