Ryan Boudreaux illustrates how to create a stitched effect using the CSS3 dash border property and with and without background images.
Figure BCSS3 Stitched Elements, using a double border trick with a CSS3 box-shadow and defining a dotted border. The sample code and resulting output is seen in the screen capture as displayed in Figure C from Kit's tutorial, viewed in Chrome v 21.01:
Figure C"Stitched Look" code snippet and also included more of the vendor prefixes into the CSS3 style. I took both Kit's and Chris's code and added it to the demonstration HTML and CSS files, and the results were just about the same as displayed in this example shown in Figure D (Chrome v 21.01).
Figure DDouble Stitched Effect on ITechColumn where Vinod Suthersan incorporates the use of a div, styling the first stitch as a 2px dashed border, #ffff9c; color, and the second stitch styled as an outline with the same 2px dashed and color, but he adds in an outline-offset to -8px. The resulting demo output is displayed in Figure E as viewed in Chrome v 21.01.
There are several ways to achieve the background texture effect. In the example below, my first attempt places a background property with the URL value set to a local denim texture .jpg file within the example class selector named .stitched_element as shown in the CSS code snippet below:
padding: 5px 5px 15px 5px;
background: url(i/deminTexture_45.jpg) 50% 50% repeat-x;
border: 2px dashed #FC0;
-moz-box-shadow: 0 0 0 4px #333333, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #333333, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #333333, 2px 1px 6px 4px rgba(10,10,0,.5);
The HTML code snippet:
<p>Stitched effect with denim background image
</div>The output is displayed in Figure F:
Figure FCSSDeck.com with the Simple White Stitched Leather with CSS3 which uses a background texture image along with several nested divs with class selectors for inside and outside style properties. I've modified the styles from the original as shown in Figure A above, the original output as displayed from the demo is shown in Figure G (viewed in Chrome 21.0.1):
Now, how about recreating the same stitched effects that Elegant Themes uses in the Memoir theme but with CSS3 only? That would be way cool, right? I will review the steps to recreating the Elegant Theme sidebar using only CSS3 in the next segment.