I recently had to reproduce a fancy “kinda separator” and I gave it a try in pure css. The result is quite cool. It works like a charm in ie9, Chrome, Safari, Opera and Firefox.
If you’re using Firefox you’ll notice (or not) that the dashed rounded border is “solid” rather than being “dashed” (inside the white circle)… Well there’s a bug about it in Firefox opened since 2007… dashed border simply doesn’t work when a border-radius is applied to it. Too bad… Well the guys at Webkit’s have the solution, wonder why Firefox didn’t implemented it jet.
Anyway the :after shadow border works great every where I tested it so it’s a quite robust ie9+ technique. I need to apply a degraded version for ie8, maybe just a simple grey border.
Here’s the Codepen version. You can play with the tabs to see how it works underhood.
See the Pen Shadow separator by Julien Knebel (@jkneb) on CodePen.
Is it possible to create this affect using just CSS3 instead of SCSS w/ compass or LESS? I can’t seem to figure out the code.
Let me know.
Thanks.
Absolutely you could simply compile this scss code into css and you’ll get what you want: http://pastebin.com/1NHJQMiT
Hi Jkneb,
Nice little snippet there. I’m trying to make this work as a vertical seperator, but encounting some problems.
While changing the properties of .mask to
.mask {
overflow:hidden; height:200px;
&:after {
content:'';
display:block; margin:25px auto 0;
width:2px; height:100px;
border-radius:125x / 125px;
box-shadow:0 0 8px black;
}
}
Seems to work for the &:after line
adding a &:before does not.
Do you have any thoughts on that?
Hi!
Well, check the pen above (I have updated it) you’ll see a vertical version. The left one is made with an :after and the right one with a :before. Cheers!
Thank you very much, I like that
Thanks alot indeed my friend!!
awesome
how can you centered this for a responsive website?
I used:
(above your code)
but it won’t act responsively
to contain your code
I’m sorry but this separator is beautiful all credit to the person who designed it.
can you make like this but a box with both separator (left and right) only??
Is it possible to get the horizontal line in the opposite way so that it can be top-left and top-right with the same effects. Explanation de horizontal seperator let’s say it has bottom-left and bottom-right radius, so I would like to see an example of top-left and top-right radius. Best regards!
This is good but its not responsive.