lab

CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset. The trick is to use “em“s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion. text-shadow: -0.06em 0 red, 0.06em 0 cyan; See the demo. Note: Actually you are not limited to text only. You can use the same technique with box-shadows. It even works when you add 3D transforms like rotateY. Update: Wow! I submitted this to Smashing Magazine’s CSS3 Design Contest and it made it on 3rd place, which makes me incredible happy. Thanks!

CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset. The trick is to use “em“s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

text-shadow: -0.06em 0 red, 0.06em 0 cyan;

See the demo.

Note: Actually you are not limited to text only. You can use the same technique with box-shadows. It even works when you add 3D transforms like rotateY.

Update: Wow! I submitted this to Smashing Magazine’s CSS3 Design Contest and it made it on 3rd place, which makes me incredible happy. Thanks!

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.

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;

  1. First we set the text color to transparent.
  2. Then we add a dark background-color.
  3. 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.
  4. 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. 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.

See the demo.

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. See the demo.

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.

See the demo.

simurai simurai

I’m a UIX Designer and like to experiment with CSS3. This site is my personal playground.

About
Contact