Question

A lot of newer sites have neat-o sign up forms. I do c++/java dev, and am getting in to web dev, css is a bit of a mystery to me yet.

If I wanted to create a page like twitter.com/signup, I know I can use firefox and try to copy the layout using firebug. This is going to take a bit of time to get through though.

Is there any how-to resource for us novices which walks us through creating those nice signup pages? They all look pretty similar nowadays (centered page, big text input fields etc).

I realize this is a bit general, just looking for a good starting place,

Thanks

Answer 1

it’s all done via CSS, really simple actually.

you’ll really want to look at some CSS resources as well as the source code of some pages that you like.

http://www.w3schools.com/css/default.asp
http://www.cssbasics.com/
http://csslearn.com/

Example:

Twitter is using class="text_field" on the inputs

<input autocomplete="off" class="text_field" id="user_name" maxlength="20" name="user[name]" size="20" tabindex="1" type="text" />

And the css is

input.text_field{
    border:1px solid #ddd;
    font-size:14px;
    padding:8px;
    width:200px;
    margin:0;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}