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 2 years ago
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!
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.
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!
You are welcome Philip
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter