Creating custom html text fields

Question

Just wondering how you are going to create the effect, as shown in the following image:

Picture

The part I would like to try to recreate is the gradient inside the text box itself, as well as the line border surrounding the text box.

Thank.

Answer 1

This can also be done using CSS3, which reduces the need to load images. The problem, of course, is that it can become a bit complicated cross-browser.

Here is a demo: Demo

Here's a demo playback tutorial : Tutorial

Answer 2

CSS . background-image border .