“Stitched” Look
.stitched {
padding: 20px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}
looks pretty awesome!!
This is a great trick!
The “key” to this look is just the line “border: 2px dashed #fff;” in case anyone wondered what were going on up there…
Well sure, but how did the border get INSIDE the element, or how did the background get out of it?
I don’t see any background-origin here…
That’s the box-shadow.
Simplest way is to use outline with outline-offset. That way you can use border for something usefull
Looks great! I think it looks even better with this added. :-)
border-bottom-left-radius: 3px 3px;
it is really good one
Great snippet
but it is not working in ie 7 and 8,
any solution please?
IE7 and IE8 don’t support CSS3, which this uses.
Use CSS3 PIE: http://css3pie.com/
Thanks for information guys
Looks great! Thank you
I would have used a much simpler example to demonstrate the stitched look
The trick to get the background color to bleed over the border is the spreadradius of box-shadow (the 4rth element, which here I set to 8px)
i wish these posts had visual examples :/
Try it out as a visual example.
border:
If your element is not using rounded corners, and you don’t care about IE6/7 support, then you could do this using a dashed border and the outline property, instead of a box shadow. Syntax-wise it’s a little simpler, but roughly the same effect.
But if you use rounded corners, then you can’t use outline because it will look weird. ;)
For browser compatibility, you can turn that long code into this
.stitched{
border:2px dashed #fff;
background: #ff0030;
box-shadow: 0 0 0 8px #ff0030;
}
That’s the main key, for some style…it’s all up to you..
webkit doesnt work in explorer…ban IE…hehehe
So nice~thank you
http://codepen.io/A-Bit-Annoying/pen/1/1 – Demo
http://codepen.io/A-Bit-Annoying/pen/1/2 – Updated version
Hi,
I would appreciate if there were previews for these snippets. For a beginner like me, it is hard to understand what some of the terms mean or would look like. Great site though and has been very helpful! :)
Nancie
Check out this tool for grabbing code and playing with it (live preview) immediately: http://blog.codepen.io/2012/07/04/introducing-the-codepen-bookmarklet/
Codepen.com is very useful indeed (as per ‘A Bit Annoying’s code, posted earlier). A similar site is: http://dabblet.com/
Also, underneath the code, there is a ‘Reference URL’ which leads to the original article. But I agree, some intro and/or screenshot would make it easier (yet more work…).
@Chris Coyier; Sorry YouTube currently banned in our country due to recent religious outrage.
@Jacques; dabblet.com is really awesome. Result could be observed instantly.
thanks for sharing.
Is their a way to make the dashes spaced out more or make longer?
Instead of this:
Do this:
- - - - - - - - - - - - - -
Or this:
_
Thanks!
This really looks good. I used this same inspiration on my site, like a year ago, with only one difference – I used outline property, instead of border. Good side of that is that border can be used for additional stuff, bad side is that border can have sides, like top or left, but outline goes all the way around symmetrically.
Main problem with this effect, using borders or outlines, is further behavior – like, trying to use fluid-width-equal-height-columns, on any method except JavaScript, with box-sizing: border-box; property.
Other methods are making this trick complicated:
When stretched down to infinity, border(and outline) bottom part moves all the way, leaving inconsistency in design, so ugly “patch div” has to be applied, to keep appearance of border-bottom, and that is not really a nicest example of code.
Really looks great. I used to create it using a dashed line border in CSS but this one is more elaborate. Thanks a lot!