cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Modern tabs with old school tecnics 1</h1>
<p><a href='https://codepen.io/Kseso/full/ONLJvg/'>Ver versión :checked</a> Texto para verificar que no hay saltos. Exercitation viejuno eres un pirámidee mamellas to sueltecico te viste de torero fresquete one more time tontaco páharo labore interneeeer horcate.</p>
<section class='tabs'>
  <!-- Tantos span id='' como tabs-->
  <span class='hide' id='una'/></span>
  <span class='hide' id='dole'/></span>
  <span class='hide' id='tele'/></span>
  <span class='hide' id='catole'/></span>
  <header>
  <!-- Tantos a's como tabs-->
    <a href='#una' tabindex='1' >una</a>
    <a href='#dole' tabindex='2'>dole</a>
    <a href='#tele' tabindex='3'>tele</a>
    <a href='#catole' tabindex='4'>catole</a>
  </header>

  <!-- Tantos figures como tabs-->
  <figure class='una'>
    <h2>Menú desplegable con zona activa de seguridad</h2>
  <img src='https://2.bp.blogspot.com/-v3a3glbYRA8/UnqwXdlbwvI/AAAAAAAAHug/gNE9IhI2WSI/s800/primavera-2.jpg' alt='una imagen en una pestaña' />
  <figcaption>Una de las características más molestas de los desplegables (dropdown menu) es que si tu cursor se sale un solo px de la opción se cierran,…</figcaption>
  </figure>

  <figure class='dole'>
    <h2>Textos que llenan el viewport</h2>
  <img src='https://2.bp.blogspot.com/-p_KvCGVLGvU/U5GrphveFtI/AAAAAAAAJa0/-rrVCwriqLc/s800/Dirty-car-window.jpg' />
  <figcaption>Ayer mi timeline de twitter se llenó con una consulta de Ana Tudor más conocida en esa red social como @thebabydino.  En ella planteaba la cuestión…</figcaption>
  </figure>

  <figure class='tele'>
    <h2>Elementos Details y Summary: función toggle nativa de Html5</h2>
  <img src='https://2.bp.blogspot.com/-YSOsuseRHwU/Vo1JTsEaUZI/AAAAAAAAMqs/ehbgTD9lAjw/s800/summary-details.jpg' />
  <figcaption>HTML5 vino, bueno, está en camino, con multitud de elementos que facilitan la interacción del usuario con los contenidos de la página. Y además lo…</figcaption>
  </figure>

  <figure class='catole'>
    <h2>La función css attr( ) Explicación y guía de uso</h2>
  <img src='http://farm9.staticflickr.com/8061/8188068610_70eda46a1f_z.jpg' />
  <figcaption>Artículo publicado el 16 de Agosto de 2013. Actualizado el 20 de Junio de 2014 Las propiedades Css, dicho de forma general, pueden admitir tres tipos…</figcaption>
  </figure>
</section>
<p>Texto para verificar que no hay saltos. Exercitation viejuno eres un pirámidee mamellas to sueltecico te viste de torero fresquete one more time tontaco páharo labore interneeeer horcate.</p>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Itim|Laila:300);
*,*::before, *::after {
  box-sizing: inherit;;
}
* {margin: 0; padding: 0; position: relative;}
html {
  background: #191919;
  min-height: 100vh;
  box-sizing: border-box;
  font-family: laila, sans-serif;
  font-weight: 300;
  line-height: 1.4;
  color: #889;
}
body {
  background: #2F2F35;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}
h1, h2 {
  font-family: Itim;
  font-weight: 400;
  text-align: center;
}
h1 {
  background: #2F2F31;
  font-size: calc(2.5vmin + 2.5vmax);
}
h2 {
  font-size: calc(2.2vmin + 1.5vmax);
  line-height: 1.3;
  padding: .5rem 0;
}
p a {color: #F1EF7E;}
.hide {display: none}
img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
section {
  max-width: 650px;
  margin: 1rem auto;
}
header {
  display: flex;
  justify-content: space-between;
}
/* para mostrar de entrada otra que no sea la primera cambia :not(#una) y :nth-child(1) por la deseada */
header a,
:target:not(#una) ~ header :nth-child(1) {
  background: #919194;
  width: 22%;
  text-decoration: none;
  font-size: calc(2.2vmin + 1.5vmax);
  color: #444;
  text-align: center;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 0;
  transition: .4s;
}
figure {
  background: #F1EF7E;
  color: #444;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.4);
  clip-path: polygon(0% 0%, 100% 0%, 0% 0%, 100% 100%);
  max-height:0;
  transition: clip-path .5s;
  overflow: hidden;
  z-index: 1;
}
figcaption {
  padding: 0 .5rem .5rem;
  font-size: calc(1.8vmin + 1vmax);
  min-font-size: 1.2rem;
}
/* para mostrar por defecto otra que no sea la primera cambia .una por la deseada */
.una {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  max-height: 200vh;  
}
/* Para ocultar la mostrada por defecto por otra cambia #una y .una por la deseada */
:target:not(#una) ~ .una {
  clip-path: polygon(0% 0%, 100% 0%, 0% 0%, 100% 100%);
  max-height:0;
}
/* mostramos la info seleccionada */
#una:target ~ .una,
#dole:target ~ .dole,
#tele:target ~ .tele,
#catole:target ~ .catole {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  max-height: 200vh;
}
/* pestaña seleccionada y :hover 1ª*/
header :nth-child(1),
:target:not(#una) ~ header :nth-child(1):hover,
#una:target ~ header :nth-child(1),
#dole:target ~ header :nth-child(2),
#tele:target ~ header :nth-child(3),
#catole:target ~ header :nth-child(4),
header a:hover,
header a:focus {
  background: #F1EF7E;
  color: #444;
  box-shadow: 0 -2px 0 1px rgba(0,0,0,.4);
  z-index: 2;
  outline: none;
}
            
          
!
999px
Loading ..................

Console