Hatena::ブログ(Diary)

satake7’s memo このページをアンテナに追加 RSSフィード

2009-01-19 validator.jsで出てくる吹き出しを透過にする

validator.jsで出てくる吹き出しを透過にする

フォームのエラーチェックに、こちら(フォームの入力エラーを吹き出しで教えてくれる JavaScript)を便利に使わせていただいているのですが、エラーのとき表示される吹き出しの背景色が白じゃないときだけはちょっとイケてないかなぁと思ってました。で、吹き出しの角丸を透過にすればいいんじゃねと思ってやってみました。

元々の吹き出し

f:id:satake7:20090120143822p:image:leftちょっと見づらいですが、右端の角丸の背景部分が白くなっているのがわかると思います。ここが気になって仕方がないわけです。

cssを変更した後の吹き出し

f:id:satake7:20090120143821p:image:leftこれだときれいに角丸になっててうれしいです。

css

div.baloon {
   font-size: 11px; color: #900; position: absolute; padding-left: 5px;
   background: url("../images/baloon_left.gif") no-repeat top left;
   z-index: 1;
}
div.baloon a {
   color: blue; text-decoration: none; padding: 2px; margin-right: 2px;
}
div.baloon a:hover {
   background-color: #eef;
}
div.baloon div {
   background: url("../images/baloon_right.gif") no-repeat top right;
   padding: 7px 7px 14px 0px;
   white-space: nowrap;
}
div.baloon span {
   padding: 8px 7px 14px 0px;
   background: url("../images/baloon_span.gif") no-repeat top left;
}
div.baloon span { background: url("../images/baloon_span.gif") no-repeat top left; }
 *:first-child+html div.baloon span { padding: 7px 7px 14px 0px; }
 html>/**/body div.baloon span { padding: 8px 7px 14px 0px; }

オリジナルでは、親の背景(baloon.gif)の中に子供の背景(baloon_right.gif)を右寄せで被せてありました。単純に親子両方の背景画像を透過にするだけでは、右端は親の背景(角丸になっていない)が透けて見えてしまい、結局角丸の後ろは白ということになってしまうのでダメです。

そこで、親の背景は左端の角丸と吹き出し部分だけにして、メッセージブロック(span)に背景をつけることにしました。そうすると、メッセージと右端の角丸が被らないため、きれいに透過になります。

画像

f:id:satake7:20090120150020p:image

baloon_left.gif、baloon_span.gif、baloon_right.gifです。

baloon_span.gifの横幅はメッセージの最大文字列長に合わせる(大きめにとっておく)必要があるため、実際はもっと長いです。黒い部分が透過色です。

参考

追記

IE8と Firefox3で吹き出しの真ん中部分が 1pxずれるので、cssを修正しました。「*:first-child+html」で IE6、7、8b適応、「html>/**/body」で IE6、7、8b以外適応です。(CSSハックは気持ち悪いけど仕方がないです)

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/satake7/20090119/p1