Is it possible to get cut out text effect like this using CSS/CSS3 only?

Question

Is it possible to get cut out text effect like this using CSS/CSS3 only? or image is the only option to get this effect.

Answer 1

This should work:
Here's a little trick I discovered using the :before and :after pseudo-elements:

http://dabblet.com/gist/1609945

Answer 2

A slightly softer way of using the pseudo-elements Web_Designer mentioned:

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
}

.depth:after {
    text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px;
    content: attr(title);
    padding: 50px;
    color: transparent;
    position: absolute;
    top: 1px; 
    left: 1px;
}

It's a bit simpler - to get the soft rim of the depression you use the text-shadow of the :after pseudo and make it transparent, rather than using two pseudos. To my mind, it looks a lot cleaner too - it can work at much greater sizes. I've no idea how fast it is, though you'll probably be using text-shadow sparingly anyway.

Answer 3

What you really need for that particular effect is inset:

    text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */

Unfortunately: "<shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed."

Answer 4

text-shadow is your friend. See this page for lots of examples what you can achieve with it. Example #8 looks promising.

Answer 5

Yes you can achieve this effect with CSS and text, but it's a little insane. Basically you create a bunch of grey-zero css3 radial and linear gradients with a zero opacity and carefully position them over your text. But you'd be better off doing this in photoshop.

Answer 6

You can use the text-shadow style to set a shadow for the top left corner. It will look close to what you are looking for, but as far as I know there is no way to do exactly what you are looking for in CSS/CSS3