by ryou

CSSのみでシャドウのあるタブメニューの見た目を作成

ライフネット生命のこちらのタブっぽいものを作る必要があったのですが、どうもここではCSSのみでアクティブなタブがコンテンツと同じ高さにあるように見える(アクティブなタブにコンテンツの影が重ならない)ようにしてるみたいで、どうやって実現してるのか調べてみました。

サンプル

GitHub Pages

仕組み

desc

上の画像のように、アクティブなタブにinner要素を重ねて、それにタブと同色の背景色を付けた上でz-indexをcontentより大きくすることでcontentの影を見えなくしているようです。

ソース

html(slim)

.tab
  .tab__tabs
    - (1..4).each do |index|
      .tab__single
        .tab__single-inner class=("tab__single-inner--active" if index == 1)
          |タブ#{index}
  .tab__content

CSS(sass)

.tab
  $theRad: 5px
  =theShadow
    +box-shadow(rgba(0, 0, 0, 0.4) 0px 0px 6px 1px)
  =theTabBorderRadius
    +ie8-border-radius($theRad $theRad 0 0)
  +e(tabs)
    width: 700
    padding: 0 2px
    &:after
      +clearfix
  +e(single)
    float: left
    width: 160px
    margin: 0 7px
    background-color: white
    +theTabBorderRadius
    +theShadow
  +e(single-inner)
    text-align: center
    padding: 10px 0
    +m(active)
      position: relative
      z-index: 11
      background-color: white
      +theTabBorderRadius
  +e(content)
    position: relative
    z-index: 10
    background-color: white
    +ie8-border-radius($theRad)
    +theShadow
    height: 300px

※詳細なソースはGitHubを見てもらえれば。見るほどの物でもないですが。