Is it possible to perfectly replicate this in css3?

Question

The div: sidebar-top at http://alex.piechowski.org/school/...

CSS:

.sidebar-top {
float: left;
height: 32px;
width: 292px;
background: url(../images/sidebar_top.png) no-repeat;
padding: 4px 15px;
}

Note, it's an image. Is it possible without that image?

Answer 1

You can achieve a fairly similar effect with these rules:

border-top-right-radius: 12px;
border-top-left-radius: 12px;
border: 1px solid #ccc;
width: 290px;
background: -webkit-linear-gradient(top, white 0%,#ddd 100%);
background: linear-gradient(to bottom, white 0%,#ddd 100%);

Answer 2

I think this DEMO is what you need

.sidebar-top {
background: #ccc;
border: 1px solid rgba(0,0,0,0.5);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
box-shadow: inset 0 -20px 40px #aaa, inset 0 20px 40px #fff, 0 2px 6px rgba(0,0,0,0.5);
-o-box-shadow: inset 0 -20px 40px #aaa, inset 0 20px 40px #fff, 0 2px 6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 -20px 40px #aaa, inset 0 20px 40px #fff, 0 2px 6px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 -20px 40px #aaa, inset 0 20px 40px #fff, 0 2px 6px rgba(0,0,0,0.5);
padding: 0px 20px 15px 10px;
width: 500px;
}

h2 {
text-align: center;
font-family: "Helvetica Neue", sans-serif;
color: #444;
text-shadow: 0 1px 1px #fff;
font-size: 14px;
margin: -0 -20px 10px -10px;
padding: 5px 15px;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
background: rgba(0,0,0,0.2);
border-bottom: 2px groove rgba(255,255,255,0.75);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
-o-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
-webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
-moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
}