mippe | Shared With: Everyone - Jun 28 2008 | javascript, css, design
動作環境は以下のとおり
・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>お試しあれ。
http://www.willmayo.com/2007/02/10/css-speech-bubbles/
mippe | Shared With: Everyone - May 20 2008 | css, Design, web design
mippe | Shared With: Everyone - May 20 2008 | Design, css, web design
mippe | Shared With: Everyone - Jan 18 2008 | Design, css, Flash
mippe | Shared With: Everyone - Dec 14 2007 | Design, css, web design
mippe | Shared With: Everyone - Dec 06 2007 | Design, Flash, css, typography
mippe | Shared With: Everyone - Jul 02 2007 | css, tips, Design, web design
Related Content from Around Faves
css
-
1 FaverViewed: 15 TimesQuoted: * html body { float:left; display:inline; voice-family: "\"}\""; voice-family:inherit; }
- tiancoo - Jul 05 20075 FaversViewed: 17 Times
- abstract - 3 days ago1 FaverViewed: 7 Times






