Inset Typography Tutorial

5 Responses

  1. Roland Martial 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 3 years ago

  2. Philip Renich 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 3 years ago

  3. Roland Martial 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 3 years ago

  4. Philip Renich 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 3 years ago

  5. Roland Martial Roland Martial

    You are welcome Philip

    over 3 years ago

keyboard shortcuts: previous shot next shot L or F like