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:
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.” Stéphanie Walter, tympanus.net.
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
Finally, my work is done. Time to enjoy a cup of hot tea !!! Yah