Ben Ben - 6 months ago 28
CSS Question

Arrow Tabs the Pixel Perfect Way

Trying to do some arrow tabs the pixel perfect way according to this tutorial along with some jQuery animation. You can see what I have so far in this JSFiddle. Somehow I can't wangle it, it doesn't look pixel perfect. And I don't know how to animate the

::before
pseudo elements.

Answer

You can do all the animation even the div it self using css transition ex. transition: all 0.6s ease like this demo: https://jsfiddle.net/cr6rLohs/1/

.tab-wrapper .tab-nav .tab {
  background-color: white;
  border: green 1px solid;
  box-sizing: border-box;
  color: green;
  cursor: pointer;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  margin-right: -1px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 60px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease;
}

.tab-wrapper .tab-nav .tab.active {
  background-color: green;
  color: white;
}

.tab-wrapper .tab-nav .tab::before {
  background-color: white;
  border: green solid;
  border-width: 0 0 1px 1px;
  content: '';
  display: inline-block;
  height: 20px;
  left: -12px;
  position: absolute;
  transform: scale(0.707) rotate(45deg);
  top: -1px;
  width: 20px;
  -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease;
}

.tab-wrapper .tab-nav .tab.active::before {
  background-color: green;
}

.tab-wrapper .tab-nav .tab.active{
  background:green;
  color:white;
}

.tab-wrapper .tab-content .tab {
  display: none;
}

.tab-wrapper .tab-content .tab.active {
  display: inline-block;
}

js :

jQuery(function() {
  jQuery('.tab-nav .tab').click(
    function() {
      var id = this.className.match(/tab-(\d+)/)[1];
      jQuery(this).addClass('active')
        .siblings().removeClass('active');
      jQuery('.tab-content .tab-' + id)
        .addClass('active').show()
        .siblings().removeClass('active').hide();
    }
  );
});
Comments