RSS

Registration Page with CSS 3 and HTML 5 version 1

19 Nov

I searched and got a tutorial source from tympanus.net 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:

bacsichtml

a form will be seen like this on Firefox browser:

hinh

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

css

hinh

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

cssform

“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.”

hinhcenter

A line is put up under the header

cssformhinh

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

css

hinhcenter

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

css

as seen on browser, there is nothing changed here.

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

css

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.

css

Result on Firefox browser

hinh

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

styleMap

Full styling code for submit button

css

Finally, we have a better look on button

hinh

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

formbutton

The effect will be shown below:

bgButton

Moving the button to right side of the page

css

hinh

styling the form with css elements

cssform hinh

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

 
 

Gửi phản hồ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:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

 
%d bloggers like this: