Sistema de pestañas (tabs) Css con :target sin salto y RWD

Doble contenido del post: cómo hacer unas RWD pestañas (tabs) en puro css sin el salto intrínseco al uso de :target forma sencilla y comprensible. Estilos explicados paso a paso para quien empieza.

Sistema de pestañas (tabs) Css con :target sin salto y RWD

Por Kseso ✎ 53

target cssEl uso de pestañas o tabs para mostrar contenido bajo demanda es un recurso de sobra conocido y utilizado en el diseño de páginas.

Igual de conocido es que para su construcción puedes elegir entre varias técnicas para lograrlo. Y si conoces un poco este blog y de qué va, no te extrañará que veamos un ejemplo basado en puro Css para realizar tabs con tres premisas:

  1. En primer lugar realizar unas pestañas basadas en puro Css con la ayuda de :target.
  2. En segundo y quizás como más novedoso, evitar el salto que lleva aparejado dicho pseudoelemento.
  3. Y como es casi de obligado cumplimiento en los tiempos que nos han tocado, añadirle un toque RWD.

ACTUALIZADO: 03/2014:
Si estás interesado en este tipo de realizaciones te invito a ver este artículo con una recopilación de casi una veintena de Slaiders, galerías y pestañas o tabs en puro Css. Todas ellas de realización propia, basadas en distintas técnicas con disposiciones y efectos de lo más variado.

La pseudoclase :target en xhtml y css

Pero primero, un poco de teoría para los nuevos.

"Target" se podría traducir como el destino, el blanco o el seleccionado.
En html, el destino de una dirección o enlace, por lo general, suele ser una página. Pero habrás visto que, en ciertas ocasiones, termina con algo parecido a ".html#texto". Significa que apunta a un elemento en concreto dentro del documento. Y ese #texto fuerza al navegador al cargar la página a ir a su posición y mostrarlo en la parte superior de la ventana.

Y sí, es lo que en ciertos momentos se llaman "anclas", "anchors" o similares. Por otra parte, ya habrás observado que el símbolo # (almohadilla) es el mismo que el utilizado en CSS para los id (identificadores únicos).

Así que ahí tenemos un pseudoelemento en el html. Aquel objeto que en un momento dado seleccionamos o convertimos en el destino de una acción.

Y para actuar sobre él (sobre el objeto de nuestra selección), CSS define la pseudoclase :target
Una de las diferencias principales con las demás pseudoclases como | :visited | :hover | :active | :focus | etc, es que estan últimas no son persistentes. Su efecto desaparece al retirar el curso, pinchar en una zona en blanco... etc. Cosa que no ocurre con :target que permanece... hasta seleccionar otro :target.

Esa persistencia mencionada es una característica que se utiliza para ciertas realizaciones como son la navegación por pestañas (tabs), desplegables, etc, donde se requiere que no se oculte la información al retirar el puntero, como ocurre con :hover.

:target y sus saltos

El principal inconveniente, por molesto, que tiene el uso de :target nace de sus propias características: el salto que conlleva. Al seleccionar un elemento el navegador desplaza los contenidos para colocar al target en la parte superior de la ventana.

A estas alturas ya hay otras soluciones. Algunas tan radicales como emplear ::checked en vez de :target y otras que lo mantienen pero a costa de enmarañar los códigos (Css y Html).

Anulando el salto con elegancia

El método es sencillo. Basta con fijar al elemento destino de :target y ocultarlo. Así:

.diana { position: fixed; display: none; }

Y antes que empiecen los peros y objeciones, no te preocupes, que con el etiquetado y correcto y el selector de adyacente + solventamos las dos declaraciones anteriores.

Etiquetado de las tabs

El marcado que vamos a utilizar para hacer nuestras tabs es el siguiente:

<div class="contenedor-tabs"> <!-- El primer bloque de pestaña+contenido asociado --> <span class="diana" id="una"></span> <div class="tab"> <a class="tab-e" href="#una">UNA</a> <div class="panel"> <!-- Contenido a mostrar/ocultar --> </div> </div> <!-- Fin del primer bloque --> <!-- Segundo bloque --> <span class="diana" id="dos"></span> <div class="tab"> <a class="tab-e" href="#dos">DOS</a> <div class="panel"> <!-- Contenido a mostrar/ocultar --> </div> </div> <!-- Fin segundo bloque --> <!-- Resto de bloques --> </div>

Desmenuzando el html y su Css asociado:

Todas nuestras pestañas y el contenido asociado está contenido en el div "contenedor-tabs". Lo primero es fijar unas medidas, según se necesiten, con un ancho máximo y opto por la variante del modelo de caja box-sizing

* { margin: 0; padding: 0; box-sizing: border-box; } .contenedor-tabs { width: 100%; max-width: 600px; margin: 50px auto 0; position: relative; }

La función del <span class="diana" id="una"></span>: es el elemento al que haremos :target. Cada uno tiene su #id diferenciador para que :target funcione. El id de cada uno de estos span coincide con el destino del enlace (href) de la pestaña asociada (a class="tab-e). Su Css el que te mostré antes.

<div class="tab"> es el módulo base de cada grupo. En él están los contenidos a mostrar u ocultar y la "pestaña" para acceder a ellos. No hay estilos asociados, ya que en la demo no son necesarios.

<a class="tab-e" href="#una">UNA</a> Este enlace es el que constituye la solapa o "pestaña" que se mantiene siempre visible y accesible.
Como ves el valor de su atributo href, el destino del enlace, es el span oculto que le precede en el html.
Sus estilos no tienen mayores secretos: flotados para que las cuatro pestañas se coloque adyacentes, con una anchura definida (apoyada por el min-width), y el resto de propiedades para lograr una apariencia.

Fíjate en su margen negativo superior. Ese valor junto al top del div que le sigue hace que no queden ocultas las pestañas por el contenido que muestran/ocultan.

.tab .tab-e { background: #d5d5d5; float: left; width: 20%; min-width: 85px; margin-top: -1rem; margin-right: 3px; padding: 5px; text-decoration: none; font-family: nunito, sans-serif; font-size: 1.3rem; color: #dfdfdf; text-align: center; position: relative; border-radius: 5px 5px 0 0; transition: all 1s ease; }

<div class="panel">
Advertencia: a este div le he asignado una clase sólo a efectos de identificarlo mejor al referirme a él. Realmente no se necesita esa clase, como veremos después y ya te adelanté antes al mencionar el selector de hermano adyacente.

Lo reseñable de su css es que está posicionado a 1em de la parte superior de su contenedor para hacer sitio a las pestañas y ocultos mediante la propiedad opacity: 0;

.tab div { background: #fff; width: 100%; position: absolute; top: 1rem; left: 0; padding: 1rem; font-size: 1.2rem; font-family: carme, sans-serif; color: #fff; line-height: 1.2; z-index: 5; opacity:0; border-radius: 0 5px 5px; transition: all 1s ease; }

Si integras el ejemplo en una página con más contenidos después de la demo, deberías optar por otro tipo de posicionamiento ≠ absoluto en esta caja o darle altura suficiente al contenedor general para evitar que se coloque un contenido sobre otro.

El resultado después de todo lo anterior es el que ves en la imagen:

navegación por tabs Css

Fíjate que ya llevamos dos metros de artículo y ni aparece el contenido de los paneles ni hemos usado :target
Pero como ya te adelantaba antes, es lo más sencillo y corto. Vamos con ello.

Aplicando :target

Vamos primero con la pestaña que estará activa o seleccionada. El enlace que hemos marcado con la clase "tab-e". Para ello construimos el selector necesario en la regla Css:
.diana:target + .tab .tab-e :
Este selector dice que se aplique los estilos a la clase "tab-e" (nuestro enlace y pestaña) contenida en "tab" cuando el hermano adyacente con clase "diana" (nuestro span oculto) sea seleccionado con :target (hermano adyacente: que le precede en el html sin nada por medio). Si tienes dificultades para interpretar los selectores puedes ampliar el cómo se leen.

Aquí quizás alguno aún no tenga claro cómo conseguimos marcar con :target a nuestro span oculto. Lo repasamos: al clicar en el enlace "tab-e" nos lleva a su destino (su href="#algo) y este destino es el id del span que le precede. Por eso damos un id diferente a cada span oculto que coincide con el href de cada pestaña,

Ahora sí, aclarado lo anterior los estilos de la pestaña seleccionada. Nada reseñable, sólo cambiamos unos valores por otros para resaltarla, Y el z-index para colocarla sobre (eje z) las otras pestañas y por debajo (eje z) de su panel:

.diana:target + .tab .tab-e { background: #8AA9B8; color: #f5f5f5; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); z-index: 2; }

Y a continuación sólo nos queda hacer visible el panel de contenidos asociado a cada pestaña.
.diana:target + .tab div :
La lectura del selector es como antes, sólo cambia que apuntamos al div dentro de "tab" que contiene los elementos ocultos. Como sólo hay un div (además del enlace que actúa como pestaña) no es necesario ni asignarle una clase ni utilizar selector de hijo directo (>) como mencionaba antes.

La aparición la realiza el cambio de opacidad inicial de cero a 1

.diana:target + .tab div { opacity: 1; background: #8AA9B8; color: #fff; } css tabs

Y esto es todo lo necesario para lograr un sistema de pestañas o tabs realizado en puro Css sin que el uso de :target ocasione saltos.
Ahora sólo nos queda una pizca de @media queries para poder decir que son "responsive".

Responsive design en tabs

A modo de ejemplo y como es una demo sólo vamos a declara una @media querie y de forma general: para las ventanas menores a 370px.
Para ello actuamos (cambiamos algunos valores) de los tres elementos principales: el contenedor general de clase ".contenedor-tabs", el div panel y el enlace que forma cada pestaña:

@media screen and (max-width:370px) { .contenedor-tabs { width: 100%; min-width: 370px; margin: 2.5rem 0; } .tab div { font-size: 1rem; line-height: 1.1; padding: 1rem 5px; width: 100%; } .tab .tab-e { font-size: 1rem; padding: .5rem 0; text-align: center; line-height: 1.5rem; width: 25%; margin-right: 0; } }

Resultado final de target en las pestañas

Y ahora ya podemos dar por terminado y ver nuestro sistema de pestañas "responsive" con target y sin (sobre)saltos.
Aquí el pen resultante

Si se te hizo corto, más

No recuerdo dónde vi la técnica del elemento oculto para evitar el salto. Mis disculpas. Si alguien sabe su autor que lo comente para otorgar crédito.
Puedes profundizar en :target y algunas realizaciones en base a él:

  1. Diferencias entre :hover :focus :target :checked
  2. :Target ¿Algún problema?
  3. Guerra de pseudoelementos en Css. :target vs :checked
  4. Cambio de hoja de estilos con puro Css

Este post fue escrito allá por 2012. Mucho tiempo ha. Desde entonces son muchas las demos de tabs o pestañas publicadas.
Para modificarlo se necesitan ciertos conocimientos mínimos de Css. Si aún no los tienes mi consejo es que busques alguna de esas otras demos para adaptarla a tus necesidades. Algunas las tienes ya enlazadas en el artículo y otras en los comentarios. En especial esta recopilación de tabs y galerías.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 53

  1. Sergio22/11/12

    Muchas gracias, llevaba tiempo buscando una solución al problema de los saltos automáticos.

    ResponderEliminar
  2. Anónimo24/12/12

    muy bueno me sirvio de mucho

    ResponderEliminar
  3. estimados
    como dejo que aparezca el primer tab activo(visible)

    Saludos Cordiales
    Alfredo Pacheco
    Gracias!

    ResponderEliminar
  4. Sin conocer la estructura de su html y los estilos es una pregunta para adivinos o videntes, Alfredo.
    Y yo tengo que reconocer que no soy ni lo uno ni lo otro.

    Un saludo

    ResponderEliminar
  5. Muy bueno el tutorial, pero tengo un duda, yo dentro de un box, tenia separa en 3 columnas, que las metia dentro de cada box ahora, lo cual funciona perfecto.
    Pero estas tres columnas, me marcaban el largo del box principal, al poner esto me cierra el box debajo los titulos tapandome el comienzo del box que comienza despues del principal, hay alguna forma de que tome el largo d ela info que va asi me redimensiona como lo hacia antes de poner esto?
    gracias

    ResponderEliminar
  6. Gracias Francisco
    Sobre tu consulta, realmente no acabo de ver la composición y el problema. O mejor dicho, son varias situaciones muy dispares las que podrían ser.

    Si puedes se más preciso y concreto en la exposición y consulta y acompañalo con un enlace al problema.

    ResponderEliminar
  7. Gracias por la respuesta vamos a ver si puedo ser mas claro explicando!!!.

    Mi pagina si compone de tres box, header, body y footer.

    Dentro del body, Tengro tres columnas, A B y C, el contenido de estas columnas que marcan el largo del body, terminas la ultima linea del mas largo, ya sea A B o C y ahi se cierra el cuadro del body, y comienza el footer.

    Al reemplazar las columnas por las pestañas, el body finaliza ni bien termina el titulo de las pestañas, lo que produce que cuando yo abra un pestaña, me tape la informacion del footer.

    Esa seria mi gran duda, ya que lo unico que hice para salir del apuro, le agregue la propiedad height al contenido.

    Y por otro lado, hay alguna posibilidad que al iniciar la pagina, o que cargue las solapas aparezca activa alguna y no haya que hacerle click?

    muchas gracias por la atencion.

    Saludos
    Francisco

    ResponderEliminar
  8. A falta de repasar más a fondo el ejemplo (es de hace cuatro meses) y sólo como meras indicaciones hasta que pueda mirarlo en profundidad (quizás para otro artículo) unas sugerencias:

    .- Para que uno de los contenidos (.tab div) aparezca "desplegado" bastaría con declararle "opacity:1". Por ejemplo añadiéndole una clase.
    .- Para que "empuje al footer habría que cambiar el la "position" que ahora está como absolute. Pero eso influirá, tal como está el flujo, en las pestañas. Así que se necesitará otro enfoque en el orden y estructura del html.

    Espero no tardar demasiado en poder ponerme.

    Un saludo

    ResponderEliminar
  9. Muchas gracias por la respuesta, consulta, una vez que se hace click se desplega el menu, hay alguna forma de volver a ocultarlo haciendo click nuevamente?
    Saludos y espectacular su ayuda!!

    ResponderEliminar
  10. Esa cuestión ya está respondida en el artículo:
    "Una de las diferencias principales con las demás pseudoclases como | :visited | :hover | :active | :focus | etc, es que estan últimas no son persistentes. Su efecto desaparece al retirar el curso, pinchar en una zona en blanco... etc. Cosa que no ocurre con :target que permanece... hasta seleccionar otro :target."

    ResponderEliminar
  11. Si vi que habian preguntado lo mismo, pero no vi la respuesta, disculpas por repreguntar.

    O sea que deberia cambiar target por otra pseudoclase?

    mi idea seria hacer click que aparezca y hacer click y que desaparezca.

    Gracias

    ResponderEliminar
  12. Disculpa, sigo sin hacer que aparezca y desaparezca, me podras ayudar?
    saludos

    ResponderEliminar
  13. Creo que lo mejor hasta que domine un poco más a fondo estas realizaciones es que use algo ya creado como como ésto.
    No es con :target sino :checked

    ResponderEliminar
  14. Hola, felicidades por el muy buen post.
    Bueno, pero quisiera hacer una consulta: Como hago para poner correctamente esto en blogger?
    Yo lo he puesto pero, al momento de hacer click en una de las pestañas, se desplaza el contenido y me tapa lo que hay mas abajo.
    Espero que puedas ayudarme :l
    Saludos

    ResponderEliminar
  15. Abel, como ya he dicho más arriba, para poder pronunciarse es imprescindible tener acceso al problema. Un enlace a la página o a una realización ex profeso es vital para dar una respuesta ad hoc.

    Posíblemente, como ya apuntaba también en otra respuesta, para evitar ese solapamiento con elementos posteirores, sea mejor plantear otro etiquetado html y quizás hasta utilizar la pseudoclase :checked en vez de :target.
    Fíjese, por ejemplo, en este post, que además incorpora un control para cerrar "la consulta".

    Un saludo.

    ResponderEliminar
  16. Hola Kseso
    Que buen tutorial, es lo que necesitaba.

    Pregunta
    Como dejo la pestaña "una" visible al cargar la página.

    Saludos

    ResponderEliminar
    Respuestas
    1. Gracias Cesar

      Era un tema que había quedado en el olvido.
      La forma más sencilla es añadir una clase a ese div y anular el opacity: 0 que tienen.
      Algo así:

      <a href="#una" class="tab-e">Una</a>
      <div class="cualq">

      .tab div.cualq {opacity: 1}


      Pero has de tener cuidado con las alturas de esos div´s.
      Un saludo

      Eliminar
    2. Hola Kseso
      No me funciona. Mira como tengo el .css:

      .CSS:

      .pestanas_textos div {
      width: 700px;
      height: 450px;
      position: absolute;
      font-size: 1em;
      font-family: Arial, Helvetica, sans-serif;
      margin-left: 240px;
      color: #FFF;
      line-height: 1.2;
      z-index: 5;
      /*opacity:0;*/
      transition: all 1s ease;
      background-color: #DFDDCE;
      top: 97px;
      }

      .tab div.cualq {
      opacity: 1
      }

      .pestanas_textos .tab-e {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #543F2A;
      text-align: center;
      min-width: 120px;
      padding: 5px;
      margin-right: 18px;
      text-decoration: none;
      position: relative;
      transition: all .5s ease;
      background-color: #DFDDCE;
      }

      a.tab-e:hover {
      color: #CE4646;
      }

      p img {
      float: left;
      margin: 10px;
      }

      .boton:target + .pestanas_textos div {
      opacity: 1;
      color: #543F2A;
      background-color: #DFDDCE;

      Gracias por tu ayuda

      Eliminar
    3. Hola Kseso
      Traté de subir el .html pero no me deja subir etiquetas.
      Te puedo pasar un correo con un ejemplo.

      Gracias por tu ayuda

      Eliminar
    4. La solucción propuesta en la demo es válida. Lo verifiqué antes de ofrecérsela:
      Imagen
      Puede verificarlo modificando el pen de la demo.

      Así que supongo que o bien hay colisión de estilos en su realización o algún otro error.
      Si quiere más ayuda cree una demo con su realización en jsFiddle, codepen o similares y ponga el enlace.

      Un saludo

      Eliminar
    5. Hola Kseso
      Descargue tu ejercicio y si como tu dices se pone visible, pero no me funciona las demás.

      Gracias por tu ayuda

      Eliminar
  17. Hola Kseso
    Ya funcionó.
    Sólo un último detalle, cuando pasa de uno a otro siempre al hacer la transición se ve al fondo "Una".
    ¿Cómo hago que no se vea?

    Gracias por tu ayuda

    ResponderEliminar
  18. Buen Tuto.

    tengo una pregunta como se haria pra aque la info de los tabs apareciera arriba de elloos y no debajo.

    de antemano gracias

    ResponderEliminar
    Respuestas
    1. Disculpa el retraso, David
      Saca cada una de las "pestañas" del contenedor donde están y escríbelas después de todo el código existente.

      Eso sí, como "la info" está en posición absoluta debes declarar el css oportuno para que no haya solapamientos.

      Eliminar
  19. Gracias por el tutorial!!

    Va perfecto, en el Chrome, pero no funciona en el Internet Explorer.. (quizas me deje algo del foro que no he visto, pero he estado mirando y no lo he encontrado)

    Te agradecería pudieras indicarme cómo hago para que sea compatible con el IE (en mi caso el IE8).

    Qué tengo que añadir, quitar, modificar.... para que funcione, porque este sistema de pestañas me parece genial, pero si no funciona en el IE no lo podré poner..

    Muchas gracias de antemano...

    ResponderEliminar
    Respuestas
    1. Gracias Lorenzo

      Si miras cualquier página informativa sobre el soporte a las propiedades Css de los distintos navegadores y versiones (como caniuse) verás que ie8 (y anteriores) no reconocen :target.

      Así que no es que tú te hayas perdido algo. Es el navegador.

      Pero si es condición irrenunciable el soporte a ese engendro, tienes librerías js para solventar sus carencias.
      Como por ejemplo selectivizr

      Prueba y nos cuentas.

      Un saludo

      Eliminar
  20. Gracias por la respuesta. Aunque lo he estado mirando, tengo que deciros que simplemente soy aficionado a todo este tema, y hago la web, en prueba y error, ya que no soy ni informático, ni diseñador web..

    No he conseguido ponerlo, porque no se exactamente como se pone, he subido los archivos js, he añadido el script en head, pero no funciona..

    Gracias de todas formas.. Si a caso, pondré unas pestañas "normales".. aunque tampoco tengo mucha idea.. Seguiré practicando.. Pero gracias a foros como este, aprendo cosas, lo que os agradezco a todos..

    Saludos

    PD. Ya les vale a IE, siempre dando por sa.., perdón, problemas con sus "peculiaridades.."

    ResponderEliminar
  21. hola hice tal cual los pasos pero no me funciono, me podrias facilitar el archivo de estilos muchas gracias

    ResponderEliminar
    Respuestas
    1. Todos los estilos html + css están en el pen del ejemplo.
      Sólo tienes que seleccionar la pestaña correspondiente.
      No olvides que quizás en tu realización necesites añadir prefijos privativos en algunas propiedades.

      Un saludo

      Eliminar
  22. Discula la ignorancia pero como puedo añadirlo a mi blogger? exactamente no se donde pegar los codigos pues me fascino y desearia ponerlo para poner varios videos en 1 post ( un video por tab ) Muchas Gracias, espero pronta respuesta.

    ResponderEliminar
    Respuestas
    1. Sólo tienes que copiar los códigos:
      El css dentro de tu <style></style> añadiendo si es necesario los correspondientes prefijos privativos
      El marcado html lo colocas en tu html allí donde quieras que se muestre (ya sea editando directamente el código fuente de blogger o en algún widget)

      Un saludo

      Eliminar
  23. ¿Como hacer lo mismo con componentes ADF y css, sin usar el tag panelTabbed?

    ResponderEliminar
    Respuestas
    1. Lo siento, Luis, pero has sido tan conciso y parco que no tengo ni idea de lo que preguntas.
      ¿Qué es un componente ADF y qué es un elemento o etiqueta panelTabbed?
      ¿A qué lenguaje pertenece esa terminología? Porque estoy seguro que no es a Css y tengo mis dudas que pertenezcan a HTML.

      Un saludo

      Eliminar
  24. Ola, POrfavor nececito ayuda con los tabs en mi Blog.. Mira en Cada tab Puse videos, y tengo miles de videos en mi blog y en cada entrada estan entre 15 y 20 videos, todos divididos con tabs, el problema es que todos cargan al mismo tiempo los 15 o 20 videos de la entrada que estan en el tab cargan al mismo tiempo. como puedo hacer para que cada tan cargue cuando le doy clic en la pestaña que kiero ver.. gracias .. porfa ayudaa

    ResponderEliminar
    Respuestas

    1. 01001000 01101111 01101100 01100001 00100000 01000100 00100111 01101100 01100101 01100101 00100000 01010111 01101111 01101110 01100111

      01000101 01110011 01101111 00100000 01100011 01101111 01101110 00100000 01100011 01110011 01110011 00100000 01101110 01101111 00100000 01110011 01100101 00100000 01110000 01110101 01100101 01100100 01100101

      01011001 00100000 01110011 01110101 00100000 01110000 01110010 01100101 01100111 01110101 01101110 01110100 01100001 00100000 01100101 01101110 00100000 01100101 01110011 01110100 01100101 00100000 01100010 01101100 01101111 01100111 00100000 01110100 01101001 01100101 01101110 01100101 00100000 01101100 01100001 00100000 01101101 01101001 01110011 01101101 01100001 00100000 01110010 01100001 01111010 01101111 01101110 00100000 01100100 01100101 00100000 01110011 01100101 01110010 00100000 01110001 01110101 01100101 00100000 01100101 01101100 00100000 01100100 01100001 01110010 01101100 01100101 00100000 01111001 01101111 00100000 01100101 01110011 01110100 01100001 00100000 01110010 01100101 01110011 01110000 01110101 01100101 01110011 01110100 01100001 00100000 01100101 01101110 00100000 01100011 01101111 01100100 01101001 01100111 01101111 00100000 01101101 01101111 01110010 01110011 01100101

      01000001 01101101 01100010 01100001 01110011 00100000 01110011 01101111 01101110 00100000 01110101 01101110 00100000 01100100 01100101 01110011 01110000 01110010 01101111 01110000 11000011 10110011 01110011 01101001 01110100 01101111

      Eliminar
  25. Buenas tardes, a mi me lo aparece ya la primera opcion pero no he podido hacer que la pestaña UNO se vuelva del mismo color que mi texto, algun comentario de como podria realizarlo? Lo realice con la opcion de .tab div.cualq {opacity: 1} pero me lo muestra en la parte de abajo este no lo oculta, copie tu codigo pero sigue sin ocultarlo

    ResponderEliminar
    Respuestas
    1. Hola Rosa
      Esta demo fue pensada y realizada para un supuesto muy concreto. Por ello, tanto su marcado html como la técnica (basada en :target) es la que es y deja poco margen para modificaciones.
      Para dejar una pestaña "teñida" de entrada y otras variaciones supondría no sólo aumentar el css necesario. También significaría tener que alterar el html (el dom).

      Te sugiero que mejor uses como base otras realizaciones más recientes y más adaptables.
      Como por ejemplo: ésta 0 ésta o ésta otra.
      O incluso realizaciones más complejas como ésta
      Sólo tienes que curiosear un poco por el blog para encontar unas cuantas pestañas o tabs más "jugables".

      Un saludo

      Eliminar
  26. Hola Kseso, he hecho lo que hay en esta página de las etiquetas y me salen pero no me sale el contenido del panel.

    ResponderEliminar
  27. Hola Kseso, he hecho lo que hay en esta página de las etiquetas y me salen pero no me sale el contenido del panel.

    ResponderEliminar
  28. Hola Kseso, he hecho lo que hay en esta página de las etiquetas y me salen pero no me sale el contenido del panel.

    ResponderEliminar
  29. Hola kseso he hecho lo que pones en tu página de las pestañas y me salen pero al pulsarlas no sale el contenido

    ResponderEliminar
    Respuestas
    1. Pues como no sepas tú el motivo, Xileba, que tienes acceso a tu html y tu css es imposible que nadie lo sepa.
      La razón: nadie más que tú conoce las modificaciones que has podido introducir en los códigos.

      Por favor, lee este artículo si realmente quieres obtener ayuda específica a tu problema.

      Un saludo

      Eliminar
  30. kseso no me funciona lo de abrir una pestaña por defecto al abrir la página

    ResponderEliminar
    Respuestas
    1. De nuevo, Xileba, y espero que no te parezca mal:
      Nadie es adivino. Nadie más que tú sabe qué has hecho con los códigos y cómo lo has hecho.
      Sin ver una demo (codepen, jsfidle...) de tu realización es imposible dar una respuesta.

      Eliminar
  31. Gracias a este post cree mi propia versión de navegación por pestañas y queria compartirla con ustedes
    http://codepen.io/klark/pen/gaiws

    ResponderEliminar
  32. hola amigo me gustaria colocar las pestañas en tab en mi blog de blogger podriad explicar como poder hacerlo gracias

    ResponderEliminar
    Respuestas
    1. Hola William
      No. Ni aunque quisiera podía explicarte cómo colocar pestañas en tu blog. La razón: la misma que en unos cuantos comentarios de este mismo artículo ya he dado: no aportas absolutamente nada de información que haga posible una respuesta mínimamente concreta y adecuada a tu caso.

      Lo siento si suena fuerte pero es lo que hay.

      Puedo suavizarla un poco con una respuesta "universal": introduce el código html de las pestañas allí donde quieras que aparezca (ya sea mediante algún widget o directamente a través de la edición del código) y coloca el Css oportuno en el elemento <style> correspondiente.

      De todas formas creo que esta no es la mejor demo para ello. Mejor alguna de las que recopilé en este post.

      Un saludo

      Eliminar
  33. ok otro pregunta seria ay algo parecido , para colocarlo en mi blog de peliculas , tengo la pelicula con varias formas de reproducirlo , pero no me gusta colocarlos todos de segido
    miralo y si no puedes almenos podria darme unos tip que podria agregar y mejora
    http://pelisgratispunto.blogspot.com/
    gracias

    ResponderEliminar
    Respuestas
    1. Una duda al margen : ¿este blog ya no acepta más código de enlace dentro de nuestros comentarios? ¿O no lo usan porque no vale como spam?

      :-\

      Eliminar
    2. William te remito a mi respuesta anterior con especial énfasis en:
      "no aportas absolutamente nada de información que haga posible una respuesta mínimamente concreta y adecuada a tu caso."

      Eliminar
  34. hola amigo podrías hacer un vídeo tutorial por favor de este tema para aplicarlo en blogger no puedo entender muy bien gracias

    ResponderEliminar
    Respuestas
    1. No dudes, william, que el día que por fin haga el primer vídeo tutorial será el que pides.

      Pero vistas tus dificultades con esta demo (no se si con ella o con el código de blogger) mejor sería que eligieses otra más sencilla de adaptar.
      En el post tienes algunos enlaces a otros sistemas de tabs o pestañas Css.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap