Diseño de páginas web para pymes en Barcelona.

Tabs de varias opciones con color. Usa Input radio

Código en HTML5:


<section class="tabs">
  <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  <label for="tab-1" class="tab-label-1">Tab 1</label>
  <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  <label for="tab-2" class="tab-label-2">Tab 2</label>
  <div class="clear"></div>
  <div class="content">
    <div class="content-1">
      <h2>Tab 1</h2>
      <p>bla bla bla bla bla bla bla bla bla bla bla bla b
	  la bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	  bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
    </div>
    <div class="content-2">
      <h2>Tab 2</h2>
      <p>bla bla bla bla bla bla bla bla bla bla bla bla
	  bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	  bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
    </div>
  </div>
</section>

Código del Css3:


body {
  background-color: #d0d0d0;
  font: 18px;
  text-align: center;
  color: #444;
}
.tabs {
  position: relative;
  margin: 25px auto;
  width: 50%;
}
.tabs input {
  position: absolute;
	z-index: 1000;
	left: 0px;
	top: 0px;
	opacity: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
	cursor: pointer;
}
.tabs label {
  font-size: 15px;
	position: relative;
  padding: 10px 25px;
  margin-bottom: 0;
  float: left;
  display: block;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  width: 25%;
}
@media screen and (max-width: 568px) {
  .tabs label {width: 100%;}
}
.tab-label-1 {background: #f96566;}
.tab-label-2 {background: #03A9F4;}
.tab-label-3 {background: #FF9800;}
.tab-label-4 {background: #4CAF50;}
.tabs label:after {
  content: '';
	background: #FFF;
	position: absolute;
	left: 0;
	width: 100%;
	display: block;
}
.tabs input:hover + label {opacity: .6;}
.clear {clear: both;}
.content {
	background: #FFF;
  position: relative;
  z-index: 5;
  border-radius: 0 3px 3px 3px;
}
.content div {
  background: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity linear 0.1s;
  -moz-transition: opacity linear 0.1s;
  -o-transition: opacity linear 0.1s;
  -ms-transition: opacity linear 0.1s;
  transition: opacity linear 0.1s;
}
.content div h2 {margin-top: 0;}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2 {
  z-index: 100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: opacity ease-out 0.2s 0.1s;
  -moz-transition: opacity ease-out 0.2s 0.1s;
  -o-transition: opacity ease-out 0.2s 0.1s;
  -ms-transition: opacity ease-out 0.2s 0.1s;
  transition: opacity ease-out 0.2s 0.1s;
}
.content div p {
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  margin: 0;
  color: #444;
  padding-left: 15px;
  border-left: 8px solid rgba(208, 208, 208, .3);
}

Categoría: HTML5 y CSS3

Tabs de varias opciones con color. Usa Input radio

Código en HTML5:

Código del Css3: