Inset in css

by Santosh Thakur

HTML

<h1 class="inset-text">This is real World</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(255,0,0,0.2);
    text-shadow: 0px 2px 0px yellow, 0px 4px 10px #000, 0px 6px 0px red;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }