Slit line effect via CSS [closed]

Question

Anyone know of a way to create one of these lines (refer to image) in CSS?

Answer 1

Here's a rough approximation to start with. You'll need to adjust the specifics. Basically what I've done is create an overhang div, and beneath that is a div that will create a shadow with a falloff on the ends. The overhang div sits on a higher layer so you only see the edge of the shadow.

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

Another one, 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 that in css3. You will have to combine some effects, but I think a grey line (you will have to add some extra space below, explained later) with a shadow will do.

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

Based on that 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 there on the left, but hidden (-2px). That gives you the illusion of a single shadow. This is just a start-up, try different options and come back if you have any particular questions. But do it yourself first.