Slit line effect via CSS [closed] - css

Question

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this 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.