CSS texte coup en dehors des lettres

Question

D'accord, été aux prises avec cela pour un peu de temps et j'ai à peu près l'apparence que je veux, mais je suis maintenant aux prises avec le positionnement des éléments. Fondamentalement, je veux un texte caressé avec le coup à l'extérieur, ce qui signifie que le coup de texte Webkit est inutile.

J'ai donc pensé que je placerais deux éléments de texte l'un sur l'autre et que je ferais comme ça. Et cela fonctionne très bien, sauf que j'utilise la position: absolue l'élément n'a essentiellement pas de hauteur.

Le code HTML ressemble à ceci:

<div class="hcontainer" 
    <h2>A Framework For Web Artisans</h2> 
    <span class="h2white">A Framework For Web Artisans</span> 
</div> 

Le CSS comme ceci:

h2{font-size:2em; 
margin: 10px 0; 
color:#234F70; 
-webkit-text-stroke: 10px #531A16; 
-webkit-text-fill-color:#FFF; 
letter-spacing:-2px; 
position:absolute; 
top:10px; 
left:0px;} 

.h2white{font-family:dom_bold,arial black; 
font-size:2em; 
margin: 10px 0; 
color:#FFF; 
position:relative; 
top:10px; left:0px; 
letter-spacing:-2px; 
position:absolute;} 

.hcontainer{position:relative;clear:both;height:2em;} 

Alors, voici la question. Le conteneur hcontainer doit avoir une hauteur définie car l'élément qu'il contient est positionné de manière absolue donc n'a pas de hauteur et perturbe le flux. Le problème est de rendre cette hauteur dynamique afin que je puisse espacer les éléments correctement.

Je pourrais faire un conteneur séparé pour chaque rubrique, mais cela semble un peu beaucoup. Quelqu'un peut-il penser à une meilleure façon de faire ce que je suis en train de faire ici? Ou un moyen de contourner le problème de hauteur?

http://jsfiddle.net/calder12/9M7YZ/

Answer 1

Je ne comprends pas vraiment ce que cela veut dire que « Le problème fait cette dynamique la hauteur afin que je puisse espacer les éléments correctement. » Mais si vous ne voulez pas déclarer une hauteur sur .hcontainer, vous pouvez utiliser une marge supérieure négative sur .h2white pour la placer au-dessus de la h2 rouge au lieu d'utiliser le positionnement absolu. Comme si:

http://jsfiddle.net/9M7YZ/10/

.h2white{ 
    font-family:lemon; 
    font-weight:bold; 
    font-size:4em; 
    color:#FFF; 
    letter-spacing:-2px; 
    margin-top:-86px; 
    position:absolute; 
}