Can anyone point me in a direction of how the following elements are styled/created? on http://www.tumblr.com/.

What i'm looking for specifically is the gradient, and the nice inset border, where it looks like it's The input[type=text] elements as well as the input[type=submit]

1 Answer 1


I'm not sure which gradient you mean, but the background for the body is an image: http://www.tumblr.com/images/status_bg.png?2

The footer ("30 reasons you'll love Tumblr") has a gradient on top of the background colour: http://www.tumblr.com/images/register_login/emboss_lip.png

The gradient and rounded corners on the input elements themselves are in this file http://www.tumblr.com/images/register_login/input.png. The file looks like three boxes one above the other and they use a technique called CSS sprites, where the offset of the image is changed by Javascript so a different box switches into the space where the text box goes when you click in it. Specifically the CSS "background-position: left -136px;" is applied. It's hard to explain in words without pictures!

Another interesting technique that they've done is to put the label for the input elements in the same place as the element (e.g. "Email address") saving space.

The submit button uses this image: http://www.tumblr.com/images/register_login/button_submit.gif

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.