Dribbble_profile

Inset Typography Tutorial

by Roland Martial Sep 7, 2010
Shot_1283864826
Shot_1282818641_teaser Striped Shadow Sorry for giving away all our secrets, but someone asked for a tutorial… The patterns are available here: http://naomiatkinsonproducts.com/ And you can do... August 26, 2010

This shot is a Rebound of...

Striped Shadow

by Sacha Greif Pro

9 buckets
Tweet
1,411 views
http://drbl.in/tBm
Icon-colordrop

Tags

  1. 1
  2. 1
  3. 1
  4. 1
  5. 1

5 Responses

  1. Dribbble_profile Roland Martial

    Figured I'll use some of my free time to expand the tutorial onto another very popular effect. This effect can also be achieved using CSS 3 but I'm letting other dribbblers have the opportunity to join in and rebound another tutorial about on how to do it.

    over 1 year ago

  2. Pro 1f8f6ded95a14175acba6c272c967787_7 Philip Renich

    I'm pretty sure this isn't possible in CSS3 actually. Safari is capable of a gradient overlay on text, but not the other browsers. Inner shadow isn't possible on text-shadow, just box-shadow, so that negates that too, sadly.

    Hey, but the drop shadow would be doable! One for three!

    over 1 year ago

  3. Dribbble_profile Roland Martial

    Hey Philip. Just did a bit of research and found this link where it explains how its done in CSS 3. You should check it out. http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/
    End result is not as good but pretty similar.

    over 1 year ago

  4. Pro 1f8f6ded95a14175acba6c272c967787_7 Philip Renich

    Okay, sneaky little way to do it. That works, but like you said, not great results. I'm confused why they did the background gradient on the wrapping div. Maybe just for the visual.

    Thanks for the link Roland!

    over 1 year ago

  5. Dribbble_profile Roland Martial

    You are welcome Philip

    over 1 year ago

keyboard shortcuts: ← previous shot → next shot L or F like