CarveMe tries to simulate an inset text-shadow with CSS3. Since Safari5 is out, we now can finally use box-shadow: inset for all our shiny buttons. But what about an inset shadow on text? Unfortunately text-shadow: inset doesn’t work. But there is a technique that kinda simulates the same effect.

background-color: rgba(82,96,117,0.5);
-webkit-background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0 5px 6px;

So instead of having a dark inset shadow on top of the bright text, we use a bright text-shadow on the dark background.

See the Demo →

FLASHLIGHT is another CSS3 experiment. Again the text color is set to transparent and text-shadow is added. For the hover effect a rotateY transition is used with a low perspective.

I’m assuming to make this cross-browser would be a nightmare, so I’m not even gonna try. I just got it to work in Safari. ;-(

See the Demo →

ps. For those that don’t have Safari installed, you can see a screenshot on dribbble.

I ♥ BLUR - Once again, I got distracted experimenting with CSS3. ;-) So far I just knew how to make text look blurry by adding a lot of text-shadows like in this example by David. But it’s more a glow, because the text still stays in front. But what if you wanna turn text into smoke? Luckily you can set the text-fill-color to transparent and that gives your text a really nice smoky blur.

color: transparent;
text-shadow: #fff 0 0 100px;

That’s it! And if you animate it, it get’s even sexier.

See the Demo →

Update: Ohh.. snap. Some friendly people on twitter pointed out that there is actually an even simpler way to create Text Blur. So before this get’s too embarrassing, I quickly should change the code above. ;-) By using just color instead of -webkit-text-fill-color it also works in Firefox (although the blur looks a bit stronger). Thanks for telling.