Monday, August 5, 2013

CSS3 layout for HTML5

Here's a pretty neat CSS layout I worked on last week for one of my websites. The main content has a water marked paper image. The color theme is based on a dark blue.
This was done in HTML5, so there's a header, nav, section, aside and footer element. All of these elements have unique ids, and sits inside a div (id="big_wrapper"). So if you are just starting out in learning HTML5 or testing a page and want to attach some quick css3 code, this will be a big help.

*{
 
 list-style-type:none;
 margin:0px;
 padding:0px;
}

body{

 
 font-family: Arial;
 font-size:14px;
 color:#303030;
 background-image:url('images/background.jpg');
 background-attachment:fixed;
 
 
}

header, nav, section, aside, footer{
 display:block;
}



#wrapper{
 
 width:1000px;
 margin-left:150px;
 background:white;
 background-image:url('images/paper_background.jpg');
 background-attachment:fixed;
}



#top_nav a, #main_footer a{
 color:white;
 text-decoration:none;
}

#top_nav a:hover, #main_footer a:hover{

 text-decoration:underline;
 color:yellow;
}



a{
 text-decoration:none;
 color:#303030;
}

a:hover{
 border-bottom:1px #303030 dotted;
 font-weight:bold;
 
}

#main_header{
 background-color:black; 
 text-align:center;
}

#main_content{
 /*float:left; */
 width:560px;
 margin:10px;
 padding:10px;
 text-align:left;
 line-height:20px;
 background:white;
 border-radius:15px;
 box-shadow:5px 5px 5px #080808;
 float:left;
}

#main_aside{
 float:left;
 width:320px;
 margin:10px;
 padding:10px;
 background:white;
 border-radius:15px;
 box-shadow:5px 5px 5px #080808;
 
}

#bod_content{
 background:white;
 background-image:url('images/paper_background.jpg');
}

.news_content{
 text-align:left;
}

.h3_eye_catcher{
 color:green;
 text-align:center;
}


#top_nav{
 color:white;
 text-align:center;
 text-shadow:1px 1px 3px #080808;
 padding: 10px;
 font-weight:bold;
 margin-bottom:10px;
 box-shadow:0px 3px 10px #080808;
 font-size:16px;
 
 /* Beginning of Gradient */
 
 background-image: linear-gradient(bottom, #0B0142 48%, #2107B5 95%);
 background-image: -o-linear-gradient(bottom, #0B0142 48%, #2107B5 95%);
 background-image: -moz-linear-gradient(bottom, #0B0142 48%, #2107B5 95%);
 background-image: -webkit-linear-gradient(bottom, #0B0142 48%, #2107B5 95%);
 background-image: -ms-linear-gradient(bottom, #0B0142 48%, #2107B5 95%);
 
 background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.48, #0B0142),
  color-stop(0.95, #2107B5)
 );
 
 /* End of Gradient */
 
}

#main_footer{
 clear:both;
 background:#2107B5;
 box-shadow:0px 5px 10px #080808 inset;
 color:white;
 text-align:center;
 padding:10px;
}


   
Be sure to change the images and name your "id"s appropriately. You can play around with this code and change it to your liking.

Note: This code is not perfect, but it is a good starting point.

No comments:

Post a Comment