Photoshop Like Inset Text Shadow Effect
There are many ways to create an inset text effect that might look good but not realstic. You can use text-shadow to render some nice shadows but they'll not look like nice as you can't have inset text-shadows. So, here I came up with a nice technique of creating inset text effect that looks exactly like it's done using Photoshop. This technique was found by Gordon Hall and I improved it slightly.
In this technique, instead of text-shadows, he used background-clip property to create text masks and then creating a inset shadow using a transparent text color. From his tutorial:
We have taken transparent text and used it to clip it’s grey background. Here is where the magic happens. We will use the
text-shadowproperty withrgbacolors. Since the text is transparent, the entire shadow, even what is normally hidden by the text in front of it, will show. If we offset the shadow vertically, it will appear as if it is on the inside of the text. And if we blur the edges, it should actually appear like an inset shadow, since the darker clipped background fading into the white shadow right? And the shadow that falls outside of the clipping mask should appear to glow slightly, since that it’s closer in color to the contrasting background!
As this technique uses text as the background-clip, it will only work in webkit browsers for now. However, vendor prefixes of other browsers have also been added. Feel free to look at the code.