Share

.css-shadow {
font: 40px Arial, sans-serif;
text-shadow: 0px 2px 2px #5e5e5e;
color: #222222;
width:300px;
}

.firstlayer {
position:absolute;
top: 0px;
font: 40px Arial, sans-serif;
color: #000000;

}

.secondlayer {
position:absolute;
top: 1px;
left: 1px;
font: 40px Arial, sans-serif;
color: #666666;
opacity: 0.45;
}

 have to create, but mostly because I’ve been seeing

So I’ve been playing with CSS a lot recently partly due to having to learn all this stuff for the online portfolio we have to create, but mostly because I’ve been watching Allen create some really fun stuff with it. He’s been trying to get that indented text effect that you see on all those hip/wordpress portfolios that have lots of ribbons and things. Anyway, While he was working hard doing that I found a tut that gives the basic effect (pictured below)

.css-shadow {
font: 40px Arial, sans-serif;
text-shadow: 0px 2px 2px #5e5e5e;
color: #222222;
width:300px;
}

Allen eventually worked out how to do it by overlaying two divs over each other, with one slightly offset and transparent. It’s a little less user friendly, and doubles everything up, but the results are a lot crisper.

.firstlayer {
position:absolute;
top: 0px;
font: 40px Arial, sans-serif;
color: #000000;

}

.secondlayer {
position:absolute;
top: 1px;
left: 1px;
font: 40px Arial, sans-serif;
color: #666666;
opacity: 0.45;
}

Does anyone else have any other techniques to add to these ones that they personally prefer?