I started my website design with the header. I didn’t really know where to start so I just started from the top and i’m going to work down!

For my header, I basically wanted to have a curved edge on one side with slightly rounded edges around each corner, with a logo to the left and a title in the middle.

Here is the final css code for my header. I’ll break down each bit and describe whats going on in bold and leave the code as normal:

header{
This centers the div to the middle of the container as it is inside the container
margin:0 auto;
The 100% means that the header will always be 100% the width of the container
width:100%;
I had a set height because it won’t need to change until the breakpoints and probably not even then
height:150px;

The border settings below mean that there will be a 2px border around the div. 

border:2px;
border-style:solid;

The box sizing values are there so that all browsers can see what I mean, and they keep the border inside the div rather than outside. These settings also keep the size of the div as it is written in the width and height values, no matter how much padding is added which is pretty handy for working out div sizes!! This style of creating multiple attributes so that each browser type can read the css3 code.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:
border-box;

These are the values for the background. I wanted a linear gradient from dark yellow to a lighter yellow, but this didn’t work on IE, so I also had to set a background colour of yellow which was flat and readable by IE. Luckily IE reads the colour, but the other browsers accept the linear gradient and it overrides the background colour.

background-color:#FF6;
background-image: linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -o-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);

background-image: -webkit-gradient(

linear,
left bottom,
left top,
color-stop(0.1, rgb(255,255,5)),
color-stop(0.55, rgb(224,224,9))
);

All of the code below is to do with the border radius which gives the header its shape.

-webkit-border-top-left-radius: 200px;
-moz-border-radius-topleft: 200px;
border-top-left-radius: 200px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}

This is the main logo div where the logo will sit. It’s 20% the width of the header, it’s on the left and its height suits the image inside it.

#logo{
width:20%;
float:left;
vertical-align:bottom;
height:auto;
bottom:2px;}

I’ve added the logo and this is the css related to the image itself. It sets a max height and width and also positions it relative to the logo div in relation to where it is.

#logo2{
max-width:153px;
max-height:92px;
position:relative;
width:100%;}

This is where the title will be in the header, on the right and 70% of the header so that it starts not in the middle but enough to give it room to stretch across.

#title{
width:70%;
max-height:100px;
float:right;}

The result of this is a completed header:

Advertisements