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. anygivenwebdork reblogged this from simurai
  2. nyappaweb reblogged this from simurai
  3. xavierhofman reblogged this from simurai
  4. ugra reblogged this from simurai
  5. majho reblogged this from simurai
  6. cocaineholiday reblogged this from simurai and added:
    I’m loving simurai’s CSS3 experiments. Amazing stuff like this!
  7. aaronbassett reblogged this from simurai
  8. ninedaysoff reblogged this from decodering and added:
    CarveMe tries to simulate an inset text-shadow with CSS3. Since Safari5 is out, we now can finally use box-shadow: inset...
  9. vb reblogged this from dhotson and added:
    Geek porn, that.
  10. dhotson reblogged this from decodering
  11. decodering reblogged this from simurai
  12. twilightlog reblogged this from simurai
  13. simurai posted this
About me
simurai