* {
margin: 0;
padding: 0;
}
.main {
height: 600px;
width: 900px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -450px;
}
.top {
height: 275px;
width: 900px;
}
.empty {
height: 50px;
width: 900px;
}
.bottom {
height: 275px;
width: 900px;
}
.wrapper {
width: 25%;
height: 100%;
float: left;
}
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8 {
height: 200px;
width: 200px;
float: left;
position: relative;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
#div1 {
background: linear-gradient(top, #000, #FFF);
background: -moz-linear-gradient(top, #000, #FFF);
background: -o-linear-gradient(top, #000, #FFF);
background: -webkit-linear-gradient(top, #000, #FFF);
background: -ms-linear-gradient(top, #000, #FFF);
}
#div4 {
background: linear-gradient(left, #000, #FFF);
background: -moz-linear-gradient(left, #000, #FFF);
background: -o-linear-gradient(left, #000, #FFF);
background: -webkit-linear-gradient(left, #000, #FFF);
background: -ms-linear-gradient(left, #000, #FFF);
}
#div5 {
background: linear-gradient(top left, #000 0%, #00F 50%, #FFF 100%);
background: -moz-linear-gradient(top left, #000 0%, #00F 50%, #FFF 100%);
background: -o-linear-gradient(top left, #000 0%, #00F 50%, #FFF 100%);
background: -webkit-linear-gradient(top left, #000 0%, #00F 50%, #FFF 100%);
background: -ms-linear-gradient(top left, #000 0%, #00F 50%, #FFF 100%);
}
#div6 {
background: linear-gradient(top right, #000 0%, #00F 50%, #FFF 100%);
background: -moz-linear-gradient(top right, #000 0%, #00F 50%, #FFF 100%);
background: -o-linear-gradient(top right, #000 0%, #00F 50%, #FFF 100%);
background: -webkit-linear-gradient(top right, #000 0%, #00F 50%, #FFF 100%);
background: -ms-linear-gradient(top right, #000 0%, #00F 50%, #FFF 100%);
}
#div7 {
background: linear-gradient(bottom right, #000 0%, #00F 50%, #FFF 100%);
background: -moz-linear-gradient(bottom right, #000 0%, #00F 50%, #FFF 100%);
background: -o-linear-gradient(bottom right, #000 0%, #00F 50%, #FFF 100%);
background: -webkit-linear-gradient(bottom right, #000 0%, #00F 50%, #FFF 100%);
background: -ms-linear-gradient(bottom right, #000 0%, #00F 50%, #FFF 100%);
}
#div8 {
background: linear-gradient(bottom left, #000 0%, #00F 50%, #FFF 100%);
background: -moz-linear-gradient(bottom left, #000 0%, #00F 50%, #FFF 100%);
background: -o-linear-gradient(bottom left, #000 0%, #00F 50%, #FFF 100%);
background: -webkit-linear-gradient(bottom left, #000 0%, #00F 50%, #FFF 100%);
background: -ms-linear-gradient(bottom left, #000 0%, #00F 50%, #FFF 100%);
}