4

これは、Soda Theme（Sublime Text 2）から取得したGoogleChromeタブスタイルに似ています。

グーグルクロームタブ崇高なテキスト2

立ち上がりエッジ、2〜3ピクセルのフラットミドル、立ち下がりエッジの3つの部分があることがわかります。

Q：CSSで、中央部分を「繰り返し」、文字列のサイズに合うようにタブを伸ばすにはどうすればよいですか？

画像サイズ：42x28。

ここで役立つ場合は、.sublime-themeファイルのスニペットを次に示します。

    // Tab element
    {
        "class": "tab_control",
        "content_margin": [12, 3, 12, 3],
        "max_margin_trim": 0,
        "hit_test_level": 0.0,
        "layer0.texture": "Theme - Soda/Soda Dark/tab-inactive.png",
        "layer0.inner_margin": [5, 5],
        "layer0.opacity": 1.0
    },
4

2 に答える 2

4

この効果を達成するためのいくつかの異なる方法があります、そしてそれは本当にあなたの好みに依存します。あなたが適切に仮定したように、あなたはこれを3つの異なる部分として考える必要があります。そのため、最も簡単な方法は、3つの異なる画像に分割することです。

解決策は、HTMLマークアップがどのように見えるかにも依存します。たとえば、次の場合のみ：

<a class="tab" href="#">My Tab</a>

次に、これを機能させるためにスタイルを設定できる要素は1つだけです（これにより、作業がはるかに困難になります）。

ただし、タブの周りに折り返し要素がある場合：

<li class="tab"><a href="#">My Tab</a></li>

次に、LI要素を使用して、目的の結果を達成するのに役立てることができます。

単一要素

私の最初の例では、操作する「アンカー」要素は1つだけでした。タブに使用する画像を調べると、画像に面取りがあり、単純な単色でも、単純な境界線のある単色でもないことがわかります。つまり、ストレートCSSではその効果を達成できないため、画像を並べて表示するにはCSSが必要になります。

2つのオプションがあります。

オプション1

画像を真ん中で分割して、画像を左側と右側の2つの画像に分割します。次に、画像編集アプリケーションで、キャンバスを右に、たとえば200ピクセル（またはタブの最大幅になると思われるもの）だけ拡張します。最後に、最も右端（これはタブの中央にあるはずです）を選択し、右の境界線まで水平方向に伸ばします。

最終的には、傾斜した左側、次に約200ピクセルの「中央領域」になります。

tab-left-side.pngこれで、と呼ぶ2つの画像ができtab-right-side.pngました。これらの2つの画像を使用すると、次のCSSでタブ効果を実現できます。

.tab {
    background: url(tab-left-side.png) no-repeat 0 0;
    overflow: hidden;
    padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}

.tab:after {
    content: ' ';
    overflow: hidden;
    width: 10px; /* width of the right edge of the tab */
    background: url(tab-right-side.png) no-repeat 0 0;
}

オプション2

このオプションでは、画像を3つの画像に分割する必要があります。tab-left-side.png、、、がtab-middle.pngありtab-right-side.pngます。ご想像のとおり、画像をこれらに適切に分割する必要があります。

これで、CSSを使用できます。

.tab {
    background: url(../images/tab-middle.png) repeat-x 0 0;
    overflow: hidden;
    color: white;
    float: left;
    margin: 0 10px; /* must be same as side widths */
}

.tab:after {
    content: '.';
    overflow: hidden;
    text-indent: -999px;
    float: right;
    width: 17px; /* width of the right edge of the tab */
    background: url(../images/tab-right-side.png) no-repeat 0 0;
}

.tab:before {
    content: '.';
    text-indent: -999px;
    overflow: hidden;
    float: left;
    background: url(../images/tab-left-side.png) no-repeat 0 0;
    width: 17px; /* width of the left edge of the tab */
}

ダブルエレメント

double要素は、疑似クラスセレクターを使用する必要がないことを除いて、SingleElementの例のオプション1とまったく同じ方法で実行されます。疑似クラスセレクター（または少なくとも:beforeと:after）をサポートしない古いブラウザーをサポートする必要があるコードを記述している場合は、これが唯一のオプションです。

tab-left-side.pngここでも、2つの画像をとに分割しますtab-right-side.png。

次に、CSS：

LI.tab {
    background: url(tab-left-side.png) no-repeat 0 0;
    overflow: hidden;
    padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}

LI.tab A {
    content: ' ';
    overflow: hidden;
    width: 10px; /* width of the right edge of the tab */
    background: url(tab-right-side.png) no-repeat 0 0;
}

セレクターを変更したことを除けば、オプション1の例と実質的に同じCSSです。

于 2013-01-11T14:34:43.330 に答える
1

同様の結果を達成する別の方法は、複数の背景と背景のサイズ設定を使用することです。

li.tab a {
  /* using inline-block for simplicity you could easily switch to
     display block and floats. */
  display: inline-block;
  overflow: hidden;
  color: #fff;
  padding: 0px 20px;
  /* I'm using 75% sizing on my middle image which means my min and
     max calculations work out as follows. This can change depening
     on the images you use. */
  min-width: 80px;
  max-width: 160px;
  /* height is obviously dependent on many things, I'm using line-height
     to center my text but there are other ways. */
  height: 26px;
  line-height: 30px;
  text-align: center;
  /* depending on how your images are designed you may wish to have
     the left and right images layered on top of the middle. To do this
     just reverse the order of the background images. */
  background: 
    url(middle.png) center bottom / 75% 26px no-repeat,
    url(left.png) left bottom no-repeat,
    url(right.png) right bottom no-repeat
  ;
}

ただし、これにはいくつかの前提条件があります。

  1. これは比較的新しいcss機能に依存しているため、古いブラウザでは機能しません。
  2. タブの最小幅と最大幅を定義する必要があります。
  3. 2つまたは3つの画像を使用する必要がありますが、これはスプライトシートでは機能しません。
  4. 長方形でなければならない真ん中の画像が必要です。
于 2013-01-11T16:37:38.707 に答える