Z index du :after

Que signifie précisément "passer en responsive" ? ça veut dire réduire la taille de la fenetre ?

Oui, pour tester la responsivité d'un site, il faut jouer avec la taille de la fenêtre, pour cela les consoles de navigateurs t'offre la possibilité de simuler sur smartphone (avec les bonnes largeurs/hauteurs)
Modifié par JENCAL (27 Sep 2016 - 17:17)

Yes merci, je connais a mais avant de le faire en général j'essaye de faire fonctionner en normal. Là j'y arrive même pas. 0 la limite je me fiche du responsive, je ferais autrement mais pour une grande page j'aimerais faire ça... C'est un chevauchement de :after et :before et malgré les z index ça se met pas correctement...

Meme en essayant de jouer sur position absolute ça donne rien !
Modifié par to175 (27 Sep 2016 - 17:39)

Une autre façon serait de dessiner les formes en fond des elements avec des gradient et background-clip pour faire apparaitre les bordures: http://codepen.io/gc-nomade/pen/bwRVgx

<h1 class="headbox">
      <span>TF</span> <span> BIENVENUE </span>
</h1>

.headbox {
  font-size: 80px;
  position: relative;
  background: linear-gradient(-230deg, black 130px, transparent 110px)
}

.headbox span {
  display: inline-block;
  padding: 1px;
  margin-left: 90px;
  text-indent: 60px;
  position: relative;
}

.headbox span:first-of-type {
  margin: 0;
  text-indent: 0;
  color: white;
  padding: 1px 10px;
  position: absolute;
  left: 0;
}

.headbox span + span {
  position: relative;
  background: linear-gradient(-230deg, transparent 62px, white 60px), linear-gradient(-230deg, transparent 60px, black 60px);
  background-clip: content-box, border-box;
  animation: 2.5s slide infinite alternate linear;
  left: 0;
  white-space: pre
}

@keyframes slide {
  from,
  20% {
    left: 0;
  }
  to {
    left: 500px;
  }
}

Modifié par gcyrillus (27 Sep 2016 - 21:54)