Css hightech styled textboxes 

Check out this new css/html textbox I designed for you, I made a it in 8 different gradients and best of it all, it free to download, also I made a small tutorial below on how I made one of them.

First we will need to open photoshop, this textbox consist of two images, and of cause some css and html coding.

So first we will make the metallic rounded box behind the textbox.

With the rounded rectangle tool draw a rectangle like below.

Now in the layers panel double click the new shape layer to get to the layers styles panel and give it settings as below.

Thats it, now we will make the colorful textbox.

First we need to figure out the height of the textbox we will make, mine is 35 px, then make a rectangle on the stage at 35 px height, the width does not matter, we will only use part of it and repeat it.

Now in the layers panel double click the new shape layer to get to the layers styles panel and give it settings as below.

Now the last setting image, where you have to pick a pattern, just do a search on google for photoshop patterns and import one, or make a simple on like I did.

Save the two images, I called the metallic box "bg.jpg" and the colored box "lime.jpg".

Now we are ready to do some simple coding.

Here is the code for the html fil.

And here is the code for the CSS file.

input { 
border: 1px solid #fff;
color: #525252;
font-weight: bold;
font-family: "Lucida Grande",Verdana,sans-serif;
font-size:24px;
height: 30px;
width: 300px;
padding-left: 5px; padding-top:4px;
margin-top: 20px; margin-left: 20px;
text-decoration: none; }

input.lime {
background: url(imgs/lime.jpg) #ffffff repeat-x left center; }

.box_wrapper {
width: 350px; height: 75px;
background: url(imgs/bg.jpg); }

And now we are done, I hope you like my new css based textboxes.

Download my new stylish css designed textboxes here.