Global
Argentina
Chile
Colombia
España
México
Perú
Uruguay
Venezuela
Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky
Ver más- 17,193 Miembros
- 12,945 Temas
- 4,967 Seguidores
[SOLUCIONADO][Ayuda] CSS3 Tabs
Hola que tal estaba implementando esto http://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/La consulta es la siguiente si yo le quiero agregar un 5 tab ya lo intente de hacer y no me salio queria saber si alguno que la tiene clara me podria tirar una mano desde ya gracias !
- 0Calificación
- 1Seguidores
- 148Visitas
- 0Favoritos
8 comentarios
Top Secret
En el html agregá lo que está en negrita:
<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">About us</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">How we work</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">References</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">Contact us</label>
[b]<input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
<label for="tab-5" class="tab-label-5">Algo</label>[/b]
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1">
<p>Some content</p>
</div>
<div class="content-2">
<p>Some content</p>
</div>
<div class="content-3">
<p>Some content</p>
</div>
<div class="content-4">
<p>Some content</p>
</div>
[b]<div class="content-5">
<p>Algo</p>
</div>[/b]
</div>
</section>
y en el css agregá:
tabs {
position: relative;
margin: 40px auto;
width: 750px;
}
.tabs input {
position: absolute;
z-index: 1000;
width: 120px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
cursor: pointer;
}
.tabs input#tab-2{
left: 120px;
}
.tabs input#tab-3{
left: 240px;
}
.tabs input#tab-4{
left: 360px;
}
[b].tabs input#tab-5{
left: 480px;
}[/b]
Y en el resto del css para el z-index y la opacity también tenés que agregar el tab 5.
Avisá cualquier cosa.
<div class="content">
<div class="content-1">
<p>Contenido 1</p>
</div>
<div class="content-2">
<p>Contenido 2</p>
</div>
<div class="content-3">
<p>Contenido 3</p>
</div>
<div class="content-4">
<p>Contenido 4</p>
</div>
<div class="content-5">
<p>Contenido 5</p>
</div>
</div>
CSS
tabs {
position: relative;
margin: 40px auto;
width: 750px;
}
.tabs input {
position: absolute;
z-index: 1000;
width: 120px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
cursor: pointer;
}
.tabs input#tab-2{
left: 120px;
}
.tabs input#tab-3{
left: 240px;
}
.tabs input#tab-4{
left: 360px;
}
.tabs input#tab-4{
left: 480px;
}
.tabs label {
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 80px;
color: #385c5b;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
.tabs input:hover + label {
background: #5ba4a4;
}
.tabs label:first-of-type {
z-index: 5;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
.tab-label-2 {
z-index: 4;
}
.tab-label-3 {
z-index: 3;
}
.tab-label-4 {
z-index: 2;
}
.tab-label-5 {
z-index: 1;
}
.tabs input#tab-4{
left: 480px;
}
en ves de tabs input#tab-4 es tabs input#tab-5
Perdón no vi que habías puesto antes
La verdad que personas como vos si se le dice de corazon las gracias ! . Como me ayudaste es terrible te lo re agradesco !