Slit line effect through CSS

Question

Does anyone know a way to create one of these lines (see image) in CSS?

Answer 1

Here's a rough approximation to begin with. You will need to adjust the specifics. Basically, what I did was create a div overbang, and below it is a div that will create a drop shadow at the ends. The expanded div sits at a higher level, so you only see the edge of the shadow.

Demo: http://jsfiddle.net/X5muV/

Another, slightly darker: http://jsfiddle.net/X5muV/1/

HTML:

<div id="container"> <div id="overhang"></div> <div id="falloff-shadow"></div> </div> 

CSS

  #container { background: #5A5A5A; width: 700px; padding: 200px 0 80px 0px; } #overhang { background: #5A5A5A; border-top: 1px solid #666; height: 80px; width: 600px; margin: 0 auto; position: relative; z-index: 5; } #falloff-shadow { width: 500px; margin: 0 auto; -webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); position: relative; z-index: 1; height: 1px; top: -65px; } 

Answer 2

Yes, you can create this in css3. You will have to combine some effects, but I think the gray line (you will need to add the extra space below, explained later) with shadow printing.

To write a shadow that appears only on one side (top), check this question / answer: How to add a shadow on one side of an element?

Based on this example, you can try something like:

 .myDiv { width: 700px; height: 50px; border-top: 2px solid #333; -webkit-box-shadow: 10px 0px 0px -2px #888 ; } 

The shadow is still on the left, but hidden (-2px). This gives the illusion of a single shadow. This is just a startup, try different options and come back if you have any specific questions. But first do it.