Firefox 29 ツールバーの背景変更

Firefox 29 ツールバーの背景変更



ツールバーの背景を変更


■ ツールバーの背景色を一度に変更
各バーを透明にして 奥のパネル(?)に描画

  
#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar, /* メニューバー */
#TabsToolbar, /* タブバー */
#nav-bar, /* ナビゲーションツールバー */
#PersonalToolbar /* ブックマークツールバー */
{
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#navigator-toolbox {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
box-shadow: none !important;
background-image: none !important;
  
background-color: #7F8A95 !important; /* 適当な色に変えてください */
}

■ ツールバーの背景色を個別に変更
  
#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#main-menubar, #toolbar-menubar, #TabsToolbar, #nav-bar, #PersonalToolbar {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-image: none !important;
}

/* メニューバー */
#toolbar-menubar {
background-color: #7F8A95 !important; /* 適当な色に変えてください */
}
/* タブバー */
#TabsToolbar {
background-color: #7F8A95 !important;
}
/* ナビゲーションツールバー */
#nav-bar {
background-color: #7F8A95 !important;
}
/* ブックマークツールバー */
#PersonalToolbar {
background-color: #7F8A95 !important;
}
/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: #000000 !important; */
}

#navigator-toolbox {
  
}



背景の透明化・グラデーションの使用


■ 透過( rgba()  opacity )例
  
#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar,
#TabsToolbar, #nav-bar, #PersonalToolbar {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#navigator-toolbox {
background-color: rgba(219,223,227,0.3) !important;
}

〚 関連リンク 〛

rgba() -CSS3リファレンス
opacity -CSS3リファレンス
  
CSS3 RGBA Generator - CSS Portal
CSS 3.0 RGBA | CSS RGBA | CSS3 RGBA | RGBA - css3maker
Simplest CSS3 Generator
CSS RGBA Color Generator



グラデーションlinear-gradient()  radial-gradient() )・例

kftdddfs.png


#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar,
#TabsToolbar, #nav-bar, #PersonalToolbar {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#navigator-toolbox {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
box-shadow: none !important;
/* background-image: linear-gradient(to top, #2F2C33 0%, #DBDBDB 100%) !important; */
/* background: -moz-linear-gradient(25% 75% 45deg, #efc7cb 0%, #d24b5a 100%) !important; */
background: -moz-linear-gradient(top, #afbdc0 0%, #333333 56.99999999999999%, #b0b0b0 100%, #b0b0b0 100%, #b0b0b0 100%, #b0b0b0 100%) !important;
}

■ グラデーション+透過
  
background: linear-gradient(to bottom right, red, rgba(255,0,0,0)) !important;



box-shadow 効果


box-shadow 効果

#navigator-toolbox {
background-color: #FFFFFF !important;
box-shadow:0 0 20px 20px rgba(200,100,200,0.5) inset !important;
}

■ box-shadowdでフィルター効果(意味あんの?)

#navigator-toolbox {
background-color: #FFFFFF !important;
box-shadow:0 0 0px 200px rgba(200,200,200,0.2) inset !important;
}



背景に画像を使用する


■ 画像を設定・例  css 絶対パス指定 - Google 検索 )

gfhiuys.png


#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar,
#TabsToolbar, #nav-bar, #PersonalToolbar {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#navigator-toolbox {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
}

■ 画像に box-shadow 効果をプラス

#navigator-toolbox {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
/* box-shadow:0 0 20px 20px rgba(200,100,200,0.5) inset !important; */
box-shadow:inset rgba(214,165,119, .3) 0 0 40px 30px, inset rgba(0,0,0,.3) 0 0 30px !important;
}

■ 画像にフィルター効果(意味あんの?)

#navigator-toolbox {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
box-shadow:0 0 0px 800px rgba(200,200,200,0.2) inset !important;
}

■ 背景画像の透過(opacity

#navigator-toolbox {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
opacity: 0.8 !important;
}

■ 複数の背景を適用(意味あんの? 未検証)
複数の背景を適用 - developer.mozilla
multiple background images - Google 検索


〚 関連リンク 〛

背景 - スタイルシートリファレンス
背景 - CSS3リファレンス
  
background - CSS | MDN
background-attachment - CSS | MDN
background-clip - CSS | MDN
background-color - CSS | MDN
background-image - CSS | MDN
background-origin - CSS | MDN
background-position - CSS | MDN
background-repeat - CSS | MDN
background-size - CSS | MDN



全体に画像を...


#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar,
#TabsToolbar, #nav-bar, #PersonalToolbar,
#browser-bottombox, /* 検索バー */
#navigator-toolbox {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#main-window {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
}




関連記事
プロフィール

Author:zubolla
  
あ~
めんどくちゃい めんどくちゃい

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム