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 →

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