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.

  1. jeen-hao reblogged this from free-rider and added:
    (via simurai)
  2. idmserial reblogged this from free-rider and added:
    (via simurai)
  3. free-rider reblogged this from simurai and added:
    Sdsu Black Board
  4. rollsappletree reblogged this from simurai
  5. designerglue reblogged this from simurai
  6. durgle reblogged this from simurai
  7. anygivenwebdork reblogged this from simurai
  8. nyappaweb reblogged this from simurai
  9. ugra reblogged this from simurai
  10. majho reblogged this from simurai
  11. cocaineholiday reblogged this from simurai and added:
    I’m loving simurai’s CSS3 experiments. Amazing stuff
simurai simurai

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

About
Contact