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.

alt text

Not voting to close as a duplicate, because I don't know how closely it resembles what you want (and there's no definite answer there either) but this is a rather similar question: http://stackoverflow.com/questions/2889501/inner-text-shadow-with-css — David Hedlund, Oct 19 '10 at 12:19
@David - Yes both questions are similar, should i close my question. or can i merge my question with the question u linked — Jitendra Vyas, Oct 19 '10 at 12:20
well, if you say they're similar, I'll vote for a close, and if people agree, this will all be taken care of. no need for you to take action. — David Hedlund, Oct 19 '10 at 12:27
@David - Yes both questions are asking about almost same effect. I search "cut out text effect" before asking my question. — Jitendra Vyas, Oct 19 '10 at 12:28

score 10 · Accepted Answer · answered Jan 14 '12 at 03:16

10

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

http://dabblet.com/gist/1609945

answered Jan 14 '12 at 03:16

Web_Designer

72,308
93
206
262

score 3 · Answer 2 · answered Oct 19 '10 at 12:21

3

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

answered Oct 19 '10 at 12:21

Aaron Digulla

321,842
108
597
820

This will come in handy for me too someday! Thanks! +1 – tomsseisums Oct 19 '10 at 12:36
2

Answers should suggest code, not simply links. Links quickly die, and links-of-links die even faster, leaving good answers hollowed out like a big old dead tree. – jerseyboy Feb 27 '12 at 22:00
@jerseyboy: I'm not going to replicate a 13 page web blog here. – Aaron Digulla Feb 28 '12 at 14:44
2

@AaronDigulla: Replicating a 13 page web blog would be unwise, but so is pointing to a page that isn't an original source. – jerseyboy Apr 26 '12 at 15:06
@drinchev: Try Google. The new URL is http://jotarun.posterous.com/text-embossing-technique-with-css – Aaron Digulla Jan 28 '13 at 18:02
@AaronDigulla *that* link is now dead too. Can't easily find an alternative on Google. – Zach Lysobey Jun 20 '13 at 18:23
@ZachL: The original link (post #8 in my answer) works again. Or try Wayback Machine: http://web.archive.org/web/20130326155518/http://jotarun.posterous.com/text-embossing-technique-with-css – Aaron Digulla Jun 21 '13 at 07:56

Timo Huovinen · Answer 3 · 2013-09-11T17:53:43.947

I found this http://jsfiddle.net/NeqCC/

It supports white background and dark text

All credit goes to the creator

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; }

robertc · Answer 4 · 2011-05-04T13:55:30.790

1

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."

edited May 04 '11 at 13:55

answered Oct 20 '10 at 12:38

robertc

74,533
18
193
177

A very low level solution for this insanity sir is to get JavaScript (or semantic HTML) to make a transparent text on the center of the text (that willl be tricky) and then applying the shadow on that text ;) which will create pseudo realistic inset shadows ^_^ – ShrekOverflow Oct 26 '11 at 08:01

score 0 · Answer 5 · answered Nov 08 '12 at 18:23

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.

score 0 · Answer 6 · answered Oct 19 '10 at 12:14

0

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

answered Oct 19 '10 at 12:14

Samuel

16,923
6
62
75

score 0 · Answer 7 · answered Oct 21 '10 at 23:37

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.

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

7 Answers7

Linked