CSS3 inset text-shadow trick

CSS3 inset text-shadow trick Written down by Jyri Tuulos http://about.me/jyrituulos Effect originally found at http://timharford.com/ All credits for originality go to Finalised Design (http://finalisedesign.com/) Note that this trick only works for darker text on solid light background.

by de Montalembert Jonathan

HTML

<!--
CSS3 inset text-shadow trick
Written down by Jyri Tuulos
http://about.me/jyrituulos

Effect originally found at http://timharford.com/
All credits for originality go to Finalised Design (http://finalisedesign.com/)

Note that this trick only works for darker text on solid light background.
-->
<h1 class="inset-text">Inset text-shadow trick</h1>

CSS

body {
    /* This has to be same as the text-shadows below */
    background: #def;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(10,60,150, 0.8);
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }