[Basic Web Design] Part 4 - Styling web content (Header)

In header, i only use 3D text effect(CSS3) and one image as a background.

<header>
<!--Page title & description-->
<h1>Basic Web Design</h1>
<h2>First web design tutorial by me :D</h2>
</header>
Add this CSS code to the <style> tag :

h1 {
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 40px;
    padding-left: 30px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    }

h2 {
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 20px;
    padding-left: 50px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    }
I put some image at he bottom-right of the header.

header {
    width: 950px;
    height: 150px;
    margin: 5px auto;
    background: #fff url(images/banner_design.png) no-repeat bottom right;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
Done! A simple header is ready.

Write by Arafa Daming
Labels: