画像なしで吹き出しみたいなもの

category-icon

 この頃は、リッチなツールチップ(バルーンヘルプ)が増えてきたように思います。中には、派手すぎて逆に分かりづらかったりするものもありますが、まぁそういうので遊んでみるのもたまには良いかなと思います。

 自分なりに実装するとしたら、どのようなものが良いか考えてみました。

  1. シンプルであること
  2. 軽快であること
  3. 吹き出しっぽく見せたいな
  4. 角丸コーナーが良いな
  5. 出来ればドロップシャドウぐらいは付けたい

という感じで、矛盾をはらんだリストですが、これを実装するにはどんなが良いか考えてみました。

  1. シンプルであること → 画像ファイルを使わずにやれるか?
  2. 軽快であること → フェードなどのエフェクトはなしで
  3. 吹き出しっぽく見せたいな → あのニョロっとした尻尾みたいなのをどうやって作るか?
  4. 角丸コーナーが良いな → CSS3に対応していないIEはどうするか?
  5. 出来ればドロップシャドウぐらいは付けたい → 同上

 いつものようにCSS3のサポートが貧弱なIEが足かせとなります。でも、IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう。画像を使わずに、角丸コーナーやドロップシャドウ効果を付けるには、IEのVMLやfilter機能を使うのが良いでしょう。

 角丸コーナーは、VMLのroundrectGを使って実現できます [参考記事: VMLやSVGを用いた角丸コーナーLink ]。ドロップシャドウは、IEのフィルター機能のひとつであるBlurを使うことでOKです[参考記事: IEでCSS3のドロップシャドウを使いたいLink ]。問題は、吹出しには必須とも言える、あのしっぽみたいなやつですが、これはCSSのボーダー属性を使うことで可能です。トリッキーな(でも正統派)手法ですが、これに関して、レファレンスともいうべきサイトがありますLink 。このサイトは、以前から知っていていつか利用しようと思っていたんですが、ようやくお世話になる時が来ました:)

 とりあえず、試験的なモデル(プロトタイプ)を作ってみて、それが意図したように実現可能であれば、それを自動化すべくスクリプト化という流れが良いでしょう。プロトタイプが、よさげな感じに仕上がったのでスクリーンショットをば。
cutePop
なかなか良い感じでは。FirefoxですがIEでもほぼ同じ。
 

実際のデモのページはこちら。Link

 で、かなり手抜きですが、これを元にスクリプト実装したのが以下。

実際のデモのページはこちら。Link

 ppBlogで、これらをどれくらい採り入れるかは未定ですが、引き出しは多ければ多いほど良いでしょう

   


— posted by martin at 01:57 am   commentComment [2]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0033 sec.
prev
2010.8
next
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31