Menu-1
Menu-2
x
box-shadow:inset 0px 0px 1px #edf9ff;
<style type="text/css">
.popup1,.popup2,.popup3,.popmenu{
position:fixed;
opacity:0;
width:20%;
height:50px;
overflow:hidden;
top:-200px;
left:40%;
}
.popup1:target,.popup2:target,.popup3:target {
-moz-transition:opacity 0.5s 0.6s, height 0.6s 0.2s, width 0.6s 0.2s,top 0.5s, left 0.5s;
display:block;
opacity:1.0;
position:fixed;
overflow:auto;
top:100px;
left:10%;
width:80%;
height:50%;
background:rgba(0,0,0,0.8);
color:#fff;
padding:20px;
border-top-right-radius:20px;
}
.popup1 a,.popup2 a,.popup3 a{color:#fff;}
#popup:target .popmenu a{
color:#fff;
}
a.close{
display:block;
margin-top:-20px;
margin-right:-20px;
width:28px;
height:28px;
line-height:21px;
float:right;
color:lightblue;
font-size:33px;
text-align:center;
background:rgba(255,255,255,0.4);
border:2px solid #fff;
font-weight:bold;
border-radius:16px;
text-decoration:none;
text-shadow:1px 1px 1px #000;
}
pre{
width:90%;
max-height:500px;
margin:20px auto;
display:block;
background:#fff;
color:#000;
overflow:auto;
line-height:18px;
font-family:Courier New;
font-size:12px;
padding:20px 10px;
white-space:pre;
}
</style>
The first line applies a simple background color (for older browsers); the second and third lines create a gradient from the top to the bottom using two colors : #0272a7 and #013953.
We can now add a darker border and polish the design with a "fake" inset border created with the "box-shadow" feature. The syntax is the same for all compatible browsers: the first value is the horizontal offset, the second one is the vertical offset, the third one is the blur radius (a small value makes it sharper; it will be 1 pixel in our example). We set all offsets to 0 so the blur value will create a uniform light border :
view plaincopy to clipboardprint?
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
Here's the final CSS code for the #menu container :
view plaincopy to clipboardprint?
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Background color and gradients */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
box-shadow:inset 0px 0px 1px #edf9ff;
