Saturday, July 24, 2010

Css Tips and Tricks [4] : Web Forms Using HTML5 and Css3


In this tutorial I’m going to create a Great HTML5 form using latest css3 techniques.


I'm going to create a simple registration form contains :

  • Personal Info.
  • Addressing Info 

Also going to use some of HTML5’s new input types and attributes:

  • email, for the email field
  • tel, for the telephone field
  • number, for the credit card number and security code
  • required, for required fields
  • placeholder, for the hints within some of the fields
  • autofocus, to put focus on the first input field when the page loads

1- Create unstyle Html From:

I grouped each section within fieldset also the Gender sub-section into a fieldset , inside each filedset i used order list to contain the lable/input pair.

Html
<body>
    
    <form id=register>
    <fieldset>
        <legend>Personal Info</legend>
        <ol>
            <li>
                <label for=name>Name</label>
                <input id=name name=name type=text placeholder="First and last name" required autofocus>
            </li>
            <li>
                <label for=email>Email</label>
                <input id=email name=email type=email placeholder="example@domain.com" required>
            </li>
            <li>
                <label for=phone>Phone</label>
                <input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>
            </li>
            <li>
                <fieldset>
                    <legend>Gender</legend>
                    <ol>
                        <li>
                            <input id=male name=Gender type=radio>
                            <label for=male>Male</label>
                        </li>
                        <li>
                            <input id=female name=Gender type=radio>
                            <label for=female>Female</label>
                        </li>
                    
                    </ol>
                </fieldset>
            </li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>Personal Address</legend>
        <ol>
            <li>
                <label for=address>Address</label>
                <textarea id=address name=address rows=5 required></textarea>
            </li>
            <li>
                <label for=postcode>Post code</label>
                <input id=postcode name=postcode type=text required>
            </li>
            <li>
                <label for=country>Country</label>
                <input id=country name=country type=text required>
            </li>
        </ol>
    </fieldset>

    <fieldset>
        <button type=submit>Register</button>
    </fieldset>
</form>
   
    
</body>

It will be like that:

image

2- Style the body Element and Resetting some Css attributes :

 

Body Css

html, body, h1, form, fieldset, legend, ol, li {
    margin: 0;
    padding: 0; }

body
{
    background-position: #F0F0F0;
    background: #F0F0F0;
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman" , Times, serif;
    padding: 20px;
}

 

 

3- Style the form , fieldset , legends Elements :

  • a) I removed the border from the fieldset and apply some bottom margin to it. Using the :last-of-type pseudo-class, removed the bottom margin of the last fieldset.
  • b) Make the legends big and bold, and we will also apply a light-green text-shadow
  • c) Adding a clear indication of how many steps our form has? Instead of adding that manually to every legend, we can use automatically generated counters.using  either the :before or :after pseudo-elements to add content via CSS.
  • d) Change the style of the legend that is part of the radio buttons group, to make it look like a label:

Note: Creating Counter steps:

  • create a counter using the counter-reset property on the form element
  • call the counter with the content property (using the same name we’ve created before)
  • with the counter-incremet property, indicate that for each element that matches our selector, that counter will be increased by 1

Form Css
form#register
{
    background-position: #3366FF;
    background: #3366FF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
    width: 400px;
    color: #FFFFFF;
}

    form#register fieldset {
        border: none;
        margin-bottom: 10px; }

        form#register fieldset:last-of-type { margin-bottom: 0; }

    form#register legend
{
    color: #000099;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 1px 1px #c0d576;
}

    form#register > fieldset > legend:before {
        content: "step " counter(fieldset) ": ";
        counter-increment: fieldset; }

    form#register fieldset fieldset legend
{
    color: #FFFFFF;
    font-size: 13px;
    font-weight: normal;
    padding-bottom: 0;
}

3- Styling the List and content :

  • a) Adding some nice rounded corners and semi-transparent border and background. Because we are using RGBa colors, we should provide a fallback for browsers that don’t support them (that comes before the RBGa color). For the nested lists, we will remove these properties because they would be overlapping:
  • b)  We will float labels to the left and give them a width.
  • c) Add an extra user-friendly detail, we’ll add a cursor: pointer to the radio button labels on the :hover state, so the user knows that he can simply click them to select that option.
  • Now onto the input elements. Here we want to match all inputs, except for the radio ones, and the textarea. For that we will use the negation pseudo-class (:not()). With it we can target all input elements except for the ones with type of radio.
  • We will also make sure to add some :focus styles and add the appropriate styling for the radio inputs.
  • Finally we come to our submit button. To it, we will just add some nice typography and text-shadow, align it to the center of the form and give it some background colors for its different states.

List and Content Css

    form#register ol li {
        background: #b9cf6a;
        background: rgba(250,250,250,.3);
        border-color: #e3ebc3;
        border-color: rgba(250,250,250,.6);
        border-style: solid;
        border-width: 2px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        line-height: 30px;
        list-style: none;
        padding: 5px 10px;
        margin-bottom: 2px; }

    form#register ol ol li {
        background: none;
        border: none;
        float: left; }

    form#register label {
        float: left;
        font-size: 13px;
        width: 110px; }

    form#register fieldset fieldset label {
        background: none no-repeat left 50%;
        line-height: 20px;
        padding: 0 0 0 30px;
        width: auto; }

    form#register label[for=male] { background-image: url(male.png); }

    form#register label[for=female] { background-image: url(female.png); }



    form#register fieldset fieldset label:hover { cursor: pointer; }

    form#register input:not([type=radio]),
   form#register textarea {
        background: #ffffff;
        border: none;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        font: italic 13px Georgia, "Times New Roman", Times, serif;
        outline: none;
        padding: 5px;
        width: 200px; }

    form#register input:not([type=submit]):focus,
   form#register textarea:focus { background: #eaeaea; }

    form#register input[type=radio] {
        float: left;
        margin-right: 5px; }

    form#register button
{
    background-position: #3399FF;
    background: #3399FF;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    color: #000000;
    display: block;
    font: 18px Georgia, "Times New Roman" , Times, serif;
    letter-spacing: 1px;
    margin: auto;
    padding: 7px 25px;
    text-shadow: 0 1px 1px #000000;
    text-transform: uppercase;
}

        form#register button:hover
{
    background-position: #3333FF;
    background: #3333FF;
    cursor: pointer;
    color: #FFFFFF;
}

I got the male and female img form Icon Finder

http://www.iconfinder.com/icondetails/36041/32/female_gender_icon 

http://www.iconfinder.com/icondetails/36181/32/gender_male_icon

Here’s what we created :

image

Ref. “New input types and form attributes on HTML5  what’s new on the W3C website.”

Download this ex :



Css tips and tricks [3] : Enable body background scaling

image

image (1)

Window width: 800px      Window height: 600px

Viewport width: 784px   Viewport height: 375px

image

image (2)

Window width: 1296px    Window height: 786px

Viewport width: 1280px    Viewport height: 561px

You can enable background scaling by adding the following declarations to your style sheet:

Css
body {
  background: #000 url(finalbg.jpg) center center fixed no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}


Wednesday, July 14, 2010

Css tips and tricks [1] : Set [ Div – box ] Shadows.

image


look to get show like the inner image you have to use these three lines to set the shadow and to avoid the cross browsing problems.

 

 

Css Script
  1. .box{
  2.     -moz-box-shadow:0px 0px 10px #333;
  3.     -webkit-box-shadow:0px 0px 10px #333;
  4.     box-shadow:0px 0px 10px #333;
  5. }


Followers

Blog Archive

Search

Loading...

About Me

My Photo
Waleed Mohamed
Flair Developer www.flair-systems.com
View my complete profile

Visitors Map

follow me