/ Web Dev Zone
Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Neat and Modern Main Section with CSS3

DZone's Guide to

Neat and Modern Main Section with CSS3

by
·
Jan. 27, 13 · Web Dev Zone ·
Free Resource

Comment (0)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Learn how Crafter’s Git-based content management system is reinventing modern digital experiences. Download this white paper now. 

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:

result of main section

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

Crafter CMS is a modern Git-based platform for building innovative websites and content-rich digital experiences. Download this white paper now.

Like This Article? Read More From DZone

5 Stats Illustrating the Developer Shortage Facing Enterprise Organizations
Marketing Cloud Platforms to Engineers and Developers
How to Close Your Code

Free DZone Refcard

Node.js
DOWNLOAD
Topics:

Comment (0)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

Web Dev Partner Resources

7 Reasons Why Crafter Should Be On Your Web CMS Shortlist
Building and Optimizing Multi-Channel Web Experiences
A Guide to Modern Java Web Development with Crafter CMS
How Instacart Improves User Experiences and Reduces Mean-Time-to-Resolve (MTTR)
Top 10 JavaScript Errors and How to Avoid Them
App-centric Monitoring Alternatives to New Relic

Web Dev Partner Resources

7 Reasons Why Crafter Should Be On Your Web CMS Shortlist
Building and Optimizing Multi-Channel Web Experiences
A Guide to Modern Java Web Development with Crafter CMS
How Instacart Improves User Experiences and Reduces Mean-Time-to-Resolve (MTTR)

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.linkDescription }}

{{ parent.urlSource.name }}
by {{ parent.authors[0].realName || parent.author}}
· {{ parent.articleDate | date:'MMM. dd, yyyy' }} {{ parent.linkDate | date:'MMM. dd, yyyy' }}
· {{ parent.portal.name }} Zone