スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Firefox 29 タブの形・デザイン・背景・文字を変更

Firefox 29 タブの形・デザイン・背景・文字を変更


dydyus.png



  

タブの形を変える


■ タブの形を変更
  
/* 角タブ化 */
#tabbrowser-tabs,
.tab-background-start[selected=true]:after,
.tab-background-start[selected=true]:before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]:after,
.tab-background-end[selected=true]:before {
background: transparent !important;
}
.tab-background-start,
.tab-background-end {
visibility: hidden !important;
}
.tabs-newtab-button,
.tab-background-middle {
background: none !important;
}
.tab-background {
background: transparent !important;
}

/* -------------------------------------------------- */
/* タブの高さ・左端スペース調整 */
#TabsToolbar {
margin-left: -15px !important;
min-height: 31px !important;
height: 31px !important;
}

/* タブ右スペース */
.tabbrowser-tab {
margin-right: 1px !important;
}

/* 最大・最小 タブ幅制限 */
/* .tabbrowser-tab:not([pinned]) {
max-width: 150px !important;
min-width: 50px !important;
}
.tabbrowser-tab:not([pinned])[selected="true"] {
max-width: 150px !important;
min-width: 50px !important;
} */

/* 新しいタブ 幅調整 */
.tabs-newtab-button {
width: 32px !important;
margin: 0px 0px 2px 0px !important;
}


  

タブデザイン・背景を変更


■ {  } 内に○○○ タブのデザイン・背景・文字 を変更
  
/* 通常のタブデザイン・背景 */
.tabbrowser-tab {

}
/* アクティブタブ */
.tabbrowser-tab[selected] {

}
/* 非アクティブタブ */
.tabbrowser-tab:not([selected]) {

}

/* アクティブなタブにカーソルがのった時 */
.tabbrowser-tab[selected]:hover {

}
/* 非アクティブタブにカーソルがのった時 */
.tabbrowser-tab:not([selected]):hover {

}

/* 新しいタブを作るボタン(タブ) */
.tabs-newtab-button {

}
.tabs-newtab-button :hover {

}


デザイン

  
ボーダー
border ・・・・・・・・・・・・・・・・・ ボーダーのスタイル・太さ・色を指定する
border-color ・・・・・・・・・・・・ ボーダーの色を指定する
border-style ・・・・・・・・・・・・ ボーダーのスタイルを指定する
border-width ・・・・・・・・・・・ ボーダーの太さを指定する
  
・border-bottom-style: none; ・・・・・・・・・・ 下ボーダーは表示されず、太さも0
・border-bottom-color: transparent; ・・・ 下ボーダー色を透明にする


■ 角丸
border-radius ・・・・・・・・・・・ 角丸をまとめて指定する
border-top-left-radius ・・・ 左上の角丸を指定する
border-top-right-radius ・・ 右上の角丸を指定する


box-shadow ・・・・・・・・・・・・ ボックスに影をつける

アウトラインアウトラインとボーダーの違い
outline ・・・・・・・・・・・・・・・・・ アウトラインのスタイル・太さ・色を指定する
outline-color ・・・・・・・・・・・ アウトラインの色を指定する
outline-color: invert;  (地の色を反転させた色)
outline-style ・・・・・・・・・・・ アウトラインのスタイルを指定する
outline-width ・・・・・・・・・・ アウトラインの太さを指定する
outline-offset ・・・・・・・・・・ アウトラインのオフセット値を指定する


border-image ・・・・・・・・・・・ 画像ボーダーを指定する


背景

  
■ 範囲・位置・サイズ
background-clip ・・・・・・・・・ 背景の適用範囲を指定する
background-origin ・・・・・・・ 背景の基準位置を指定する
background-size ・・・・・・・・・ 背景画像のサイズを指定する


■ 背景色を指定
background ・・・・・・・・・・・・・ 背景に関する指定をまとめて行う
background-color ・・・・・・・・ 背景色を指定する


■ 背景画像を指定
background-image ・・・・・・・ 背景画像を指定する
background-position ・・・・・・ 背景画像の表示開始位置を指定する
background-repeat ・・・・・・・ 背景画像のリピートの仕方を指定する


■ 透過
rgba() ・・・・・・・・・・・・・・・・・・・ RGBAカラーモデルで色を指定する
opacity ・・・・・・・・・・・・・・・・・・ 要素の透明度を指定する


グラデーション
linear-gradient() ・・・・・・・・・ 線形グラデーションを指定する
radial-gradient() ・・・・・・・・・ 円形グラデーションを指定する
  
・グラデーション+透過


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

■ 画像の変形 transform(拡大・縮小・回転)


関連リンク

  

透過 関連リンク 〛

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




background-image 関連リンク 〛

背景 - スタイルシートリファレンス
背景 - 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





■ 変更例
  
dydyus.png


#tabbrowser-tabs,
.tab-background-start[selected=true]:after,
.tab-background-start[selected=true]:before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]:after,
.tab-background-end[selected=true]:before {
background: transparent !important;
}
.tab-background-start,
.tab-background-end {
visibility: hidden !important;
}
.tabs-newtab-button,
.tab-background-middle {
background: none !important;
}
.tab-background {
background: transparent !important;
}
/* -------------------------------------------------- */
#TabsToolbar {
margin-left: -15px !important;
min-height: 31px !important;
height: 31px !important;
}
.tabs-newtab-button {
width: 32px !important;
margin: 0px 0px 2px 0px !important;
}
/* -------------------------------------------------- */
.tabs-newtab-button,
.tabbrowser-tab {
background-clip: padding-box, padding-box, content-box !important;
background-color: -moz-dialog !important;
background-image: url("chrome://browser/skin/tabbrowser/tab-active-middle.png"), linear-gradient(transparent, transparent 2px, rgba(254, 254, 254, 0.72) 2px, rgba(254, 254, 254, 0.72) 2px, rgba(250, 250, 250, 0.88) 3px, rgba(250, 250, 250, 0.88) 3px, rgba(254, 254, 254, 0.72) 4px, rgba(254, 254, 254, 0.72) 4px, rgba(253, 253, 253, 0.45)), none !important;
background-repeat: repeat-x !important;
background-size: auto 100% !important;
padding: 2px 2px 2px 2px !important;
opacity: 0.4 !important;
}
.tabs-newtab-button:hover,
.tabbrowser-tab:not([selected]):hover {
opacity: 0.7 !important;
}
.tabbrowser-tab[selected] {
opacity: 1 !important;
}


  

文字・アイコンの調整


color(文字色を変更)
  
vertical-align(縦方向の揃え位置を指定する)
  
text-shadow(テキストに影をつける)


■ テキスト位置
  
.tabbrowser-tab .tab-text {
margin-top: 0px !important;
margin-left: 0px !important;
}

.tabbrowser-tab[selected] .tab-text {
margin-top: 0px !important;
margin-left: 0px !important;
}

■ アイコン位置
  
/* ローディングアイコン・アイコン */
.tabbrowser-tab :-moz-any(.tab-throbber, .tab-icon-image) {
margin-top: 0px !important;
margin-left: 0px !important;
}
.tabbrowser-tab[selected] :-moz-any(.tab-throbber, .tab-icon-image) {
margin-top: 0px !important;
margin-left: 0px !important;
}

/* 閉じるボタン */
.tabbrowser-tab .tab-close-button {
margin-top: 0px !important;
margin-left: 0px !important;
}
.tabbrowser-tab[selected] .tab-close-button {
margin-top: px !important;
margin-left: 0px !important;
}


  

ほか


■ タブの最大・最小幅・アニメーションスピード
  
.tabbrowser-tab:not([pinned]) {
max-width: 210px !important;
min-width: 100px !important;
transition-delay: 0s, 0s;
transition-duration: 200ms, 230ms !important;
transition-property: min-width, max-width;
transition-timing-function: ease-out, ease-out;
}




関連記事
プロフィール

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

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。