Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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]

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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