Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
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]
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
