Categoría: HTML5 y CSS3

Para aquellos momentos en que necesitas resumir toda tu informacion en un corto espacio. Los "tabs" te permiten mostrar mucho contenido sin salir de la página web actual

Tabs de varias opciones con color. Usa Input radio

Código en HTML5:

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);
}

Utilizamos cookies para aportar una mejor experiencia al usuario en nuestro sitio web. Si sigues navegando, entendemos que aceptas su uso Más información