: Styling input elements using CSS - Inset 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

@Goswami781

I'm not sure which gradient you mean, but the background for the body is an image: 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: www.tumblr.com/images/register_login/emboss_lip.png
The gradient and rounded corners on the input elements themselves are in this file 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: www.tumblr.com/images/register_login/button_submit.gif

Vote Up Vote Down