As the Sr Web Developer here at Computer VIP I do all the Weymouth Web Design so I’ve been heavily using CSS3 for a few months now and I really enjoy it. Prior to getting back into web design, I was a Java Programmer so I like to tinker with coding look and feel. I’ve been changing this template for each site I design but here are the main nuts and bolts. I must preface this by saying I am using the blueprint css grid which I like for the most part. Blueprint runs everything on a 950 width grid and I prefer to make a tag called “wrapper” hold the entire site. Lately I’ve been putting a drop shadow on the outside of it to give it a nice look using
.wrapper {
width:950px;
margin:0 auto -4em;
border:2px solid #666;
border-top: 0px;
border-bottom: 2px;
background:#ffffff;
color: #333;
min-height:auto;
position:relative;
overflow: hidden;
box-shadow: 0px 10px 10px 1px #333;
background-image:url(../images/bkgd.gif);
}
I also have a couple of cool boxes for holding various data. I called them blueGradBox and yellowGradBox for ease of identification. I use a gradient background for both of them and reasonable borders and padding.
.blueGradBox {
margin:0px 15px 0px 15px;
padding: 0px 15px 15px 15px;
background:#EBEBEB;
color:#4e4e4e;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(201,219,224)), color-stop(1, rgb(247,247,247)));
background-image: -moz-linear-gradient( center bottom, rgb(201,219,224) 0%, rgb(247,247,247) 100%);
border: 1px #999 solid;
text-align:left;
}
.yellowGradBox {
padding: 15px 15px 15px 15px;
margin:15px 15px 15px 15px;
background:#fcf880;
color:#4e4e4e;
box-shadow: 0 5px 5px -3px black;
border: solid 1px;
border-color:#CCC;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(252,248,128)), color-stop(1, rgb(252,252,234)));
background-image: -moz-linear-gradient( center bottom, rgb(252,248,128) 0%, rgb(252,252,234) 100%);
text-align:left;
}
I also have a css box for coupons or promotions, here is the code for that
.couponBox {
margin:22px 15px 0px 15px;
padding: 15px 15px 0px 15px;
background:#caecc9;
border: 1px dashed #333;
color:#444444;
background-repeat:no-repeat;
text-align:left;
}
I also have a box with rounded edges for a different look and feel. I’ve been experimenting with this type of look more recently.
.quickContactBox {
left: 50%;
margin:0px 10px 10px 14px;
padding: 1px 10px 10px 16px;
width:210px;
color:#686868;
border:1px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
This is the css tag I use for just keeping images or headers off the left side of the page.
.padded {
text-align: left;
margin-top: 20px;
margin-left: 17px;
margin-bottom: 20px;
}