Update – Improved IE support provided by Nicolas Gallagher
p {
position:relative;
z-index:1;
padding: 10px;
margin: 10px;
font-size: 21px;
line-height: 1.3em;
color: #fff;
background: #ff0030;
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
p:before {
content: "";
position: absolute;
z-index: -1;
top: 3px;
bottom: 3px;
left :3px;
right: 3px;
border: 2px dashed #fff;
}
p a {
color: #fff;
text-decoration:none;
}
p a:hover,
p a:focus,
p a:active {
text-decoration:underline;
}
I Created some stitched elements for my current theme. I wanted to use the double border trick using #id:after. However that makes child links unclickable! Luckily CSS3 Box-Shadow allows multiple box shadows. If you define a dotted border, a solid color box-shadow, and then a regular box-shadow the effect is a nifty stitched element! Here’s the essentials
p {
background: red;
color: white;
border: 2px dashed white;
-moz-box-shadow: 0 0 0 4px red;
-webkit-box-shadow: 0 0 0 4px red;
box-shadow: 0 0 0 4px red;
}
Example
Here’s a more styled version:
p {
padding: 5px 10px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: -1px -1px #aa3030;
}
See!
Pingback: Tweets that mention CSS3 Stitched Elements | Kit MacAllister -- Topsy.com
Great! But it will look bad on older browsers w/o box-shadow support… well, still accessible, right?
Yup. I’m using Paul Irish’s HTML5 Boilerplate which gives the body a different class for each version of IE. The idea is to use CSS3 for modern browsers and images for older ones, that way you save a lot of overhead.
Hi Kit, you’ll probably get better legacy browser fallback if you use a pseudo-element. You can create this effect without the link becoming unclickable – http://jsfiddle.net/necolas/EcRdd/. The underlying technique has been inaccurately reproduced by a few sites, leaving the element’s content unselectable and unclickable; hopefully this will help you in your future experiments.
Aha! Negative z-index disappears on new browsers, but renders correctly on IE due to the z-index bug. Very nice.
The code in that jsfiddle works in modern browsers and well as IE 8.
is there any code to make it run in IE 6 and IE7 also?
Without
:beforeand:afterpseudo elements, I think the simplest solution is to just use two elements.<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Stitched</title>
<style>
p {
display: block;
background: red;
padding: 3px;
color: white;
}
.stitched {
display: block;
border: 2px dashed white;
padding: 4px;
}
</style>
</head>
<body>
<p id="hello"><span class="stitched">Hello World</span></p>
</body>
</html>
This is awesome! Thanks!
it is not working in ie 7 and 8 any solution?
imaginext christmas toys imaginext
Pingback: Mostrar elementos en forma de Stitched
Looks really amazing!!!