< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > CSS test </ title >
< style type ="text/css" >
body
{
margin : 0 ;
background-image : url('images/bg1.jpg') ;
background-attachment : fixed ;
background-position : center ;
background-repeat : no-repeat ;
}
#header
{
}
#inner-header
{
margin : 0 auto ;
width : 960px ;
background-color : Gray ;
height : 80px ;
box-shadow : 3px 3px 4px #000 ;
-moz-box-shadow : 3px 3px 4px #000 ;
-webkit-box-shadow : 3px 3px 4px #000 ;
filter : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000') ;
-ms-filter : "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')" ;
}
#main
{
background-color : Gray ;
margin : 10 auto ;
width : 960px ;
min-height : 500px ;
height : auto ;
filter : alpha(opacity=70) ;
-moz-opacity : 0.7 ;
opacity : 0.7 ;
-moz-border-radius : 20px ;
-webkit-border-radius : 20px ;
border-radius : 20px ;
}
#footer
{
margin : 0 auto ;
width : 960px ;
height : 100px ;
filter : alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0) ;
-ms-filter : alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0) ;
background-color : Gray ;
background : -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)) ;
background : -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))) ;
background : -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)) ;
}
</ style >
</ head >
< body >
< div id ="header" >
< div id ="inner-header" >
< h1 >
CSS Demo </ h1 >
</ div >
</ div >
< div id ="main" >
</ div >
< div id ="footer" >
</ div >
</ body >
</ html >