DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Neat and Modern Main Section with CSS3

Neat and Modern Main Section with CSS3

Andrey Prikaznov user avatar by
Andrey Prikaznov
·
Jan. 27, 13 · Interview
Like (0)
Save
Tweet
Share
2.98K Views

Join the DZone community and get the full member experience.

Join For Free

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

CSS

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Automated Performance Testing With ArgoCD and Iter8
  • Load Balancing Pattern
  • TDD: From Katas to Production Code
  • How Do the Docker Client and Docker Servers Work?

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: