Question

Is it possible to have the same text effect (inner shadow, shade) as this image:

using CSS3, and how?

Answer 1

WebKit-only (Safari/Chrome):

<style>
    h1 {
        background-color: rgba(0,0,0,0.8);
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0 2px 2px;
    }
</style>
<h1>Hello StackOverflow</h1>

Here you can see above snippet in JsFiddle: http://jsfiddle.net/HkTqe/6/

Firefox & WebKit:

<style>
    .trick1 {
        color: black;
        height: 2em;
    }
    .trick2 {
        color: transparent;
        text-shadow: rgba(255,255,255,0.8) 0 5px 5px;
        margin-top: -2em;
    }
</style>
<div class="trick1">Text in Light Shade</div>
<div class="trick2">Text in Light Shade</div>

Note that you must have two div’s in that order, with the same textual content; else it won’t work.

Comparison of both techniques: http://jsfiddle.net/bABuM/