画像の上に吹出しを重てみた

css

はてなハイクのハイクでせりふを見てて思いついたんです。

これって皆さん下絵に吹出しを書いてるんですが吹出し的なイメージ重ねればそれっぽくなるかなと。

Firefox2、IE7、OPERA9でとりあえず出来たっぽいのでメモメモ。
結果はこんな感じです。


手順

画像を用意

背景透明のgifを用意します。

下絵の準備。

で重ねる！

<html>
<head>
<style>
img {
	border: none;
}
img#balloon {
	position: relative;
	z-index: 2;
}
img#image {
	position: relative;
	top: -27px; /* balloon.gifのheight */
	left: 0;
	z-index: 1;
}
</style>
</head>
<body>
<p>これで吹き出しが出たのだ！</p>
<p><img src="balloon.gif" id="balloon" width="300" /></p>
<p><img src="image.jpg" id="image" width="300" /></p>
</body>
</html>

無事でました〜
思ったよりは簡単でした。27pxが何とも嫌んな感じではありますが。
javascriptにすりゃええのかしら・・・。

という訳でMy三国志のミニブログに適用してみました。
よろしければ遊んでね！

今日のところはこの辺で。