サンプル以外にもStyleが登録されているところがある
Growl
WebKit style creation
http://growl.info/documentation/webkit.php
Custom Growl Style
http://resexcellence.com/growl/
でここのChat BubbleをみていてTigerたん("伺"とかもね)を思い出した.
ちょこっといじればできそうな気がしたのでトライ.
どうせやるなら題材としてはOSたんがいいかな?と思いOSたんをのぞいてみる.
OSたん保管庫
http://nijiura-os.hp.infoseek.co.jp/
MACたん保管庫 (2007/05/30付けで跡地になってた…)
http://evo7gt-a.hp.infoseek.co.jp/osmac/
いろいろなやんでnotifyとしてのお仕事が目的なのでデザインとしてこちらを選択.
(跡地になったのでもうない…)
http://evo7gt-a.hp.infoseek.co.jp/osmac/img/os/color/os_c016.jpg
#突っ込みたいでしょうが流してください.
でいろいろとやっているうちにフト以前どこかのblog記事でCSSだけで角の丸いDIV領域が描けるというのを読んだのを思い出す.
#Chat Bubbleは画像で吹き出しを用意している.
Googleしてみるとすぐに発見できた.でもみた記事とは違う気がする…まぁいいか.
Nifty Corners - PLAYNOTE
画像なしで角を丸くするCSSテク
http://www.playnote.net/archives/000392.html
でその参照先:
Nifty Corners
rounded corners without images
http://www.html.it/articoli/nifty/index.html
http://www.html.it/articoli/nifty/nifty1.html
これだと画像を用意する場合と異なりmessageの量が長くなったとしても描画領域が許す範囲で調整される.
でいろいろとやってみてCSSっていろいろできるんだねぇと感心しながらようやく完成した.
途中インストール済みのgrowlViewをダプルクリックしてまたインストールしてしまい(Dialogで確認してくれたのにねぇ…)見事自身を削除して作業が一端パァーになったのは内緒.
#書きながら「CSSで吹き出しをつくる」って記事があったことも思い出した.
##まちがってた「CSS+Javascript」でした.growlViewではjsは動かないっぽいね.(Info.plistで設定とかないかしら
phpspot開発日誌
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
http://phpspot.org/blog/archives/2006/06/javascript_14.html
wg
Bubble Tooltips
http://web-graphics.com/mtarchive/001717.php
サンプル
http://web-graphics.com/mtarchive/BubbleTooltips.html
#掲載に問題があるだろうから画像はなしにしとく.
ーー
blurをかけたので掲載してみる.
0 件のコメント:
コメントを投稿