CarveMe tries to simulate an inset text-shadow effect with CSS3.
color: transparent;
background-color: rgba(82,96,117,0.5);
-webkit-background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0 5px 6px;
- First we set the text color to transparent.
- Then we add a dark background-color.
- Then by adding background-clip: text it only shows the background within the outline of the text. It’s like a mask. Note, this is not a standard feature and only implemented in Chrome/Safari.
- And finally, if we add a bright, half transparent text-shadow on top and push it down a bit so that the dark background can be seen, it makes it look like the text is carved into the surface.
Note that it doesn’t work well on all backgrounds and you might have to adjust the colors. Also, it’s not easy to add a fallback, so make sure you use Modernizr.
See the Demo →
FLASHLIGHT is CSS3 3D transform demo. The text color is set to transparent and text-shadow is added. When added a transform: rotateY together with a low perspective, it gets a nice stretched effect. Browser support still limited.
I ♥ BLUR - A text blur demo 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 color to transparent and then you only see the text-shadow alone.
color: transparent;
text-shadow: #fff 0 0 100px;
That’s it! And if you animate it, it looks pretty cool.
