-1

Google が Web サービスをナビゲートするために非常にきちんとした洗練されたタブ システムを実装した方法を見て、私は感銘を受けました。以下、Googleカレンダーの画像です。

メニュー

これは純粋な CSS を使用して実現できると思います。たとえば、次のようなメニューがあるとします。

<div class="menu">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>

CSS を使用して同様の外観を実現するにはどうすればよいですか (画像あり/なし)。

4

1 に答える 1

3

開発者ツール（FirefoxではChrome / IE / Firebug）を使用して、ページを検査し、それらがどのように実行しているかを正確に確認できます。

私は、これらの特定のボタンからコードをコピーし、CSSルールを取得するだけで、jsFiddleから始めました。まったく同じようには見えないため、明らかにいくつか欠落していますが、ルールを追加すると、その結果を達成するためにそれらが何をしているのかを正確に確認できます。

Chromeの右側にある[スタイル]タブから、CSSルール全体を直接コピーできます。

http://jsfiddle.net/XLd3R/

.goog-inline-block {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
}
.trans-strip {
    background: -webkit-linear-gradient(right, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, .5));
    background: -moz-linear-gradient(right, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, .5));
}
.button-strip {
    white-space: nowrap;
}
.goog-imageless-button-collapse-right {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    margin-right: -1px;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-topright: 0;
}
.goog-imageless-button, .navbuttonouter {
    background: #f5f5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
    background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
    background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
    background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
    background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
    border: 1px solid #dcdcdc;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    color: #444;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    height: 27px;
    line-height: 27px;
    min-width: 54px;
    outline: none;
    padding: 0 8px;
    text-align: center;
    transition: all .218s;
    -moz-border-radius: 2px;
    -moz-transition: all .218s;
    -moz-user-select: none;
    -o-transition: all .218s;
    -webkit-border-radius: 2px;
    -webkit-transition: all .218s;
    -webkit-user-select: none;
}
.goog-imageless-button, .navbuttonouter {
    color: #444;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    line-height: 27px;
    text-align: center;
}
于 2013-03-15T00:13:44.593 に答える