Slit line effect via CSS

Question

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

enter image description here

why is this question closed? – tim peterson Dec 01 '12 at 13:01 — tim peterson, Dec 01 '12 at 13:01

score 11 · Accepted Answer · answered Dec 13 '11 at 16:11

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;
    }

thanks! I was trying to figure out the best way to get the shadow falloff on both ends. — Chris Fletcher, Dec 13 '11 at 16:15
This is why, although I don't think css is a language, I respect it (as well as love it). Because you can reach the same objective with different paths, each one unique and creative. — Yisela, Dec 13 '11 at 16:18
+1 nice one, 'd never thought you could make it look this good with just css — ptriek, Dec 13 '11 at 16:24

score 2 · Answer 2 · edited May 23 '17 at 12:19

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.

Slit line effect via CSS

2 Answers2