最新 RSS Twilog 掲示板

くでんな日々や公開どう?

2006/12/25

[Firefox] ツールチップを透過させてみる

承前。ツールチップは透過させても表示速度的に問題ないみたいなのでサンプルを書いてみる。せっかく新しい表現が実装されたのに後ろ向きなのはやだしね。

とりあえずFirefox 2.0.0.1用の記述ということで。なぜか今日前後のtrunkだとpopupやmenupopupの背景色へのtransparentの指定がうまく働かないのです。あと、たいていのテーマでだいじょうぶだと思うけど標準のWinstripeで試すのが無難でしょうね。それと、このサンプルは好きに転載可ということで。

以下をuserChrome.cssに追加してください。

/* 半透過のツールチップ(黄色地黒文字) */
tooltip {
  -moz-appearance: none !important;
  font: message-box !important;
  color: #000000 !important;
  background-color: transparent !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAGUlEQVR42mP8///5fgYiABMDkWBUIXUUAgDd4wO42PJ4MQAAAABJRU5ErkJggg==") !important;
  border: 1px solid #000000 !important;
}

実用性を考えると黒の半透過の地に白文字でしょうねぇ、ってそれはあ○これポップアップだ……

/* 半透過のツールチップ(黒地白文字) */
tooltip {
  -moz-appearance: none !important;
  font: message-box !important;
  color: #ffffff !important;
  background-color: transparent !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVR42mNkYGBYxkAEYGIgEowqpI5CABjxALr+NPKCAAAAAElFTkSuQmCC") !important;
  border: 1px solid #000000 !important;
}

追記(2007年11月11日11時30分):

実際に使われているかたもいらっしゃるみたいなので、実用性向上のために背景の色を少し濃くしてみました。

コメント

Max 『ツールチップが半透明って実際やってみるとかっこいいですねありがとうございました。』 (04/19 19:08)

くでん 『それはよかったです。ただ、私的にはこの「先」が見たかったりします。』 (04/19 21:56)

お名前 コメント