Neat and Modern Main Section with CSS3

last week we started making the very neat header section. this article was very popular (we got a lot of reviews). so today i decided to continue begun design. today we look at the most basic elements of a page such as blocks and forms. i think that if we make all the blocks with the same styles – it would be boring, so (for a change), i prepared four types of blocks with custom headers and footers. and, as a demonstration of the form design – i made the contact form. now, this is complete design of a single page.

before we start, i would like to show you what we are going to build today:

live demo

download in package

now, let’s download the sources and start coding !

step 1. html

in the beginning, we have to add our main section with all mentioned elements:

index.html

<!-- main content section -->
<div class="main">
    <!-- left column -->
    <div class="left">

        <!-- block element -->
        <div class="block">
            <h3 class="head">header</h3>
            <div>some extra content</div>
            <h3 class="foot">footer</h3>
        </div>

        <div class="block">
            <h3 class="head head_a">header a</h3>
            <div>some extra content</div>
            <h3 class="foot foot_a">footer a</h3>
        </div>

        <div class="block block_a">
            <h3 class="head">header</h3>
            <div>block a: some extra content</div>
            <h3 class="foot">footer</h3>
        </div>

        <div class="block block_b">
            <h3 class="head">header</h3>
            <div>block b: some extra content</div>
            <h3 class="foot">footer</h3>
        </div>

        <div class="block block_c">
            <h3 class="head">header</h3>
            <div>block c: some extra content</div>
            <h3 class="foot">footer</h3>
        </div>
    </div>

    <!-- right column -->
    <div class="right">
        <div class="block">
            <h3 class="head head_b">header b</h3>
            <div>some extra content</div>
            <h3 class="foot foot_b">footer b</h3>
        </div>

        <div class="block">
            <h3 class="head head_c">header c</h3>
            <div>some extra content</div>
            <h3 class="foot foot_c">footer c</h3>
        </div>

        <div class="block">
            <h3 class="head head_b">contact us block</h3>
            <div>
                <form>
                    <fieldset>
                        <legend>contact us form</legend>
                        <p><label for="name">your name:</label> <input type="text" id="name" value=""></p>
                        <p><label for="email">your email:</label> <input type="text" id="email" value=""></p>
                        <p><label for="text">message:</label><textarea id="text" cols="33" rows="4"></textarea></p>
                        <input type="submit" value="submit">
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    footer section
</div>

as you see – everything is very easy. there are only 2 columns in the main section and one footer element. and, there are various blocks in every section. by default, if you like to build a block – you have to use ‘block’ as a class name, if you like to change design of this block – you can add another class name (block_a, block_b or block_c). it will paint your block into different colors. you can also use headers and footers in your blocks (h3 elements with a class name ‘head’ or ‘foot’). and again, there are several classes available to customize headers or footers (head_a, head_b, head_c, foot_a, foot_b and foot_c). in the end – you can see the ordinary contact form.

step 2. css

css/main.css

and now, the most important step – stylization. first of all – main layout styles (for columns):

/* main layout */
.main {
    margin: 0 auto 25px;
    overflow: hidden;
    position: relative;
    width: 1000px;
}
.left {
    float: left;
    width: 60%;
}
.right {
    float: right;
    width: 38%;
}

here are styles for our custom blocks:

/* blocks */
.block {
    background: -webkit-linear-gradient(#f7f7f7, #f4f4f4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#f7f7f7, #f4f4f4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#f7f7f7, #f4f4f4) repeat scroll 0 0 padding-box transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#f7f7f7', endcolorstr='#f4f4f4',gradienttype=0 );

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2);
    border-image: none;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #ffffff inset;
    color: #56595e;
    margin-bottom: 20px;
    padding: 20px;
}
.block_a, .block_b, .block_c {
    box-shadow: 0 1px 0 transparent inset;
}
.block_a {
    background: -webkit-linear-gradient(#f1f1f1, #ecebec) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f1f1f1, #ecebec) repeat scroll 0 0 transparent;
    background: linear-gradient(#f1f1f1, #ecebec) repeat scroll 0 0 transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#f1f1f1', endcolorstr='#ecebec',gradienttype=0 );
}
.block_b {
    background: -webkit-linear-gradient(#55a6f1, #3f96e5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55a6f1, #3f96e5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55a6f1, #3f96e5) repeat scroll 0 0 transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55a6f1', endcolorstr='#3f96e5',gradienttype=0 );
}
.block_c {
    background: -webkit-linear-gradient(#5b5d63, #4d5055) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#5b5d63, #4d5055) repeat scroll 0 0 transparent;
    background: linear-gradient(#5b5d63, #4d5055) repeat scroll 0 0 transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#5b5d63', endcolorstr='#4d5055',gradienttype=0 );
}

/* block headers and footers */
.block .head {
    font-size: 18px;
    line-height: 15px;
    text-shadow: 0 1px 0 #ffffff;
    margin: 0 0 15px;
}
.block .foot {
    font-size: 16px;
    line-height: 14px;
    text-shadow: 0 1px 0 #ffffff;
    margin: 15px 0 0;
}
.block .head_a, .block .head_b, .block .head_c {
    border-bottom: 1px solid #d1d1d1;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 1px 0 #ffffff inset;
    margin: -20px -20px 10px;
    padding: 13px 15px 11px;
}
.block .foot_a, .block .foot_b, .block .foot_c {
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #d1d1d1;
    box-shadow: 0 1px 0 #ffffff inset;
    margin: 10px -20px -20px;
    padding: 13px 15px 11px;
}
.block .head_a, .block .foot_a {
    background: -webkit-linear-gradient(#f1f1f1, #ecebec) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f1f1f1, #ecebec) repeat scroll 0 0 transparent;
    background: linear-gradient(#f1f1f1, #ecebec) repeat scroll 0 0 transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#f1f1f1', endcolorstr='#ecebec',gradienttype=0 );
}
.block .head_b, .block .foot_b {
    background: -webkit-linear-gradient(#55a6f1, #3f96e5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55a6f1, #3f96e5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55a6f1, #3f96e5) repeat scroll 0 0 transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55a6f1', endcolorstr='#3f96e5',gradienttype=0 );

    box-shadow: 0 1px 0 #3f96e5 inset;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.block .head_c, .block .foot_c {
    background: -webkit-linear-gradient(#5b5d63, #4d5055) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#5b5d63, #4d5055) repeat scroll 0 0 transparent;
    background: linear-gradient(#5b5d63, #4d5055) repeat scroll 0 0 transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#5b5d63', endcolorstr='#4d5055',gradienttype=0 );

    box-shadow: 0 1px 0 #4d5055 inset;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.block_b .head, .block_c .head,
.block_b .foot, .block_c .foot,
.block_b > div, .block_c > div {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

finally, we need is to define styles for our ‘contact us’ form:

/* forms */
.main form fieldset {
    background: none repeat scroll 0 0 #f1f1f1;
    border: 1px solid #cccccc;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 0 #ffffff;
    padding: 15px;
}
.main form legend {
    color: #999999;
    font-size: 18px;
    padding: 0 15px;
}
.main form p {
    margin-bottom: 10px;
    overflow: hidden;
}
.main form input, .main form select, .main form textarea {
    background-color: #f9f9f9;
    border: 1px solid #cccccc;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #ffffff;
    color: #999999;
    padding: 6px;
    resize: none;
    text-shadow: 0 1px 0 #ffffff;
}
.main form input[type="text"], .main form input[type="password"], .main form select, .main form textarea {
    min-width: 200px;
}
.main form textarea {
    margin-top: 10px;
}
.main form input[type="text"]:focus, .main form input[type="password"]:focus, .main form select:focus, .main form textarea:focus {
    background: none repeat scroll 0 0 #ffffff;
    color: #444444;
    outline: medium none;
    text-shadow: none;
}
.main form button, .main form input[type="button"], .main form input[type="submit"] {
    background: -webkit-linear-gradient(to bottom, #f9f9f9, #f7f7f7) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(to bottom, #f9f9f9, #f7f7f7) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom, #f9f9f9, #f7f7f7) repeat scroll 0 0 transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#f9f9f9', endcolorstr='#f7f7f7',gradienttype=0 );

    border-color: #e0e0e0 #e0e0e0 #cdcdcd;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #ffffff inset;
    color: #444444;
    cursor: pointer;
    padding: 6px 10px;
}
.main form button:hover, .main form input[type="button"]:hover, .main form input[type="submit"]:hover {
    background: -webkit-linear-gradient(to bottom, #59a8f3, #479ceb) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(to bottom, #59a8f3, #479ceb) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom, #59a8f3, #479ceb) repeat scroll 0 0 transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#59a8f3', endcolorstr='#479ceb',gradienttype=0 );

    border-color: #3990db #3990db #2f78b7;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.main form button:active, .main form input[type="button"]:active, .main form input[type="submit"]:active {
    background: -webkit-linear-gradient(to bottom, #3f96e5, #55a6f1) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(to bottom, #3f96e5, #55a6f1) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom, #3f96e5, #55a6f1) repeat scroll 0 0 transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#3f96e5', endcolorstr='#55a6f1',gradienttype=0 );

    border-color: #3990db #3990db #2f78b7;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

if you want to put something into a footer, you can use next styles for footer:

/* footer block */
.footer {
    background: -webkit-linear-gradient(#f7f7f7, #f4f4f4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#f7f7f7, #f4f4f4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#f7f7f7, #f4f4f4) repeat scroll 0 0 padding-box transparent;
    filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#f7f7f7', endcolorstr='#f4f4f4',gradienttype=0 );

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2);
    border-image: none;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #ffffff inset;
    color: #666666;
    font-size: 22px;
    font-weight: bold;
    line-height: 31px;
    margin: 0 auto 20px;
    overflow: hidden;
    padding: 20px;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    width: 960px;
}

live demo

download in package

conclusion

that’s all. i hope that we have just made a real nice example for our growing experience. i’m sure that it will be very useful for you. good luck and welcome back