Fun with -webkit-background-clip and @font-face

I just saw an awesome post by Trent Walton, who recreated a Photoshop design with pure CSS3, making fab use of the background-clip property to add a criss-cross-textured shadow effect to the text. Figuring it’s definitely time to get on board the

6 thoughts on “Fun with -webkit-background-clip and @font-faceadd yours
  1. Pingback: October’s Best Resources for CSS3

  2. Pingback: Experiments with background-clip: text | Templates, Scripts, CMS, Graphics, Fonts, Flash, E-Books, 3D, Tutorials, Wallpapers.

  3. Marc Keene said: #

    Hi Joss

    Thx for the tutorial. I have struggled for a very long time with this. I followed your tutorial and put it into my documents, but it won’t work. The shadow is placed under the text as you can see on my website. Do you have any idea of what causes this mistake?


  4. This is not getting enough love. Great write-up on a awesome technique.

  5. get Twitter followers fast (t: @Faustino) said: #

    I usually do not leave a lot of remarks, however i did a few
    searching and wound up here Fun with -webkit-background-clip and @font-face.

    And I actually do have a couple of questions for you if it’s allright. Could it be only me or does it seem like a few of these responses appear like they are left by brain dead people? :-P And, if you are posting at other online social sites, I’d like to follow everything fresh you have to post.
    Could you list of all of your shared sites
    like your Facebook page, twitter feed, or linkedin profile?

Leave a reply
this will never be published