Registration Page with CSS 3 and HTML 5 version 1

19 Th11

I searched and got a tutorial source from This is awesome article so I decide to pratice and learn for my own work.

First of all, I need to have two files called “index.php” and “css.css” respectively.

In the file “index.php” I have:


a form will be seen like this on Firefox browser:


That is a basic thing to go first, now we consider on how to decorate our page by CSS 3.

in file “css.css”, we move the form into the middle of page by elements



Next step, I style a header by CSS with HTML element h1


“Note that at this moment only webkit browsers support background-clip: text, so we will create a stripped background only for webkit here, and clip it to the text to add the stripes to the H1 title. Since the background-clip: text property currently only works in Webkit browsers, I decided to go only with the webkit prefix. That’s the reason why I split the CSS declaration into two parts, and use a webkit prefixed gradient only. Only using the –webkit- prefix is bad practice, it’s only for demo purpose, and you should never do this on real a website! That’s also where the -webkit-text-fill-color: transparent comes in handy: it enables us to only have a transparent background on the webkit browsers, all the other ones will ignore it and give us the provided text color fallback.”


A line is put up under the header


suiting up all form elements for better look, we firstly start with p, label and a



Here I styled the inputs of text box and remove outline.


as seen on browser, there is nothing changed here.

I used the :not [type=”checkbox”], to style all inputs, except the checkbox.


However, if we remove the outline, we should provide some :active and :focus states for the inputs because the outline helps user know which input is focused.


Result on Firefox browser


I nearly finish the registration page, my step now is to style the button “Sign up”, there are some steps to do

    size the button by 30%

  • transforming button from arrow to hand pointer
  • decorating button with background, padding, font-family, colour, font-size, border, margin button
  • making text shadow effect


Full styling code for submit button


Finally, we have a better look on button


I made a little change for a button when users click on,


The effect will be shown below:


Moving the button to right side of the page



styling the form with css elements

cssform hinh

Finally, my work is done. Time to enjoy a cup of hot tea !!! Yah


Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập: Logo

Bạn đang bình luận bằng tài khoản Đăng xuất /  Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )


Connecting to %s

%d bloggers like this: