Vimple Star Sprites

Firefox4 のパノラマに背景画像を仕込む (for Vimperator)

20:06 |

画像はcompleter や MOW を オーバーレイ - caisuiの日記との組み合わせ。透け透けで良い感じｗ

• userChrome.css でパノラマの背景を設定する - hogehoge @teramako

で、パノラマに背景画像を仕込む方法を書いたけど、Vimperator的には:style?コマンドで出来るのでuserChrome.cssに書く必要はなかったりする。

style -name panorama chrome://browser/content/tabview.html <<EOM
#bg {
 background-image: url(file:///path/to/file.jpg) !important;
 background-size: auto 900px !important;
 background-position: top right !important;
}
.groupItem {
 background-color: rgba(224,234,245,.5) !important;
}
.title-container>.name {
 color: black !important;
 font-weight: bold;
 text-shadow: 1px 1px 2px pink;
}
#exit-button,#searchbutton { background-color: rgba(240,240,240,.5) !important; }
EOM

• 背景
  • background-image で画像指定
    • :tabopen?などでいったん開いてyでURLをコピーするとやりやすいかも
  • background-size で大きさ指定。
    • プロパティ値は横方向の大きさ 縦方向の大きさって感じ
    • %指定ならWindowサイズに応じて伸縮する
    • autoを指定するともう一方に合わせるように伸縮
  • background-positionでどこの点に合わせるかを指定
• グループ
  • .groupItemセレクタ
  • RGBAでアルファ値を指定すれば透過できる
• その他

ペルソナのときみたいに、いろいろ遊べそうな感じで面白い。