Okay, been struggling with this for a bit now and I have pretty much the appearance I want but am now struggling with positioning the items. Basically I want a stroked text with the stroke on the outside, meaning the webkit text stroke is useless.
So I figured I'll position two text elements on top of each other and do it that way. And that works great, except since I am using position:absolute the element essentially has no height.
The HTML looks like this:
<div class="hcontainer"
<h2>A Framework For Web Artisans</h2>
<span class="h2white">A Framework For Web Artisans</span>
</div>
The CSS like this:
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;}
So here's the issue. The hcontainer needs to have a set height because the element it contains is positioned absolutely therefore has no height and messes up the flow. The problem is making that height dynamic so I can space the elements properly.
I could make a separate container for each heading but that just seems a bit much. Can anyone think of a better way to do what I'm trying to do here? Or a way around the height issue?
I don't really understand what it means that "The problem is making that height dynamic so I can space the elements properly." But if you want to not have to declare a height on .hcontainer, you can use a negative top margin on .h2white to place it on top of the red h2 instead of using absolute positioning. Like so:
.h2white{
font-family:lemon;
font-weight:bold;
font-size:4em;
color:#FFF;
letter-spacing:-2px;
margin-top:-86px;
position:absolute;
}