Apps optimize

Create cool stitched effects with CSS3

Ryan Boudreaux illustrates how to create a stitched effect using the CSS3 dash border property and with and without background images.
The stitched effect has been replicated in numerous creative designs using Photoshop techniques with great effect; in fact, the implementation used by Elegant Themes as the background for the left sidebar in their Memoir WordPress theme, utilizes three segments of the image which are cut for the top, middle, and bottom sections as shown in Figure B (viewed in Chrome v 21.01). But this blog post is about using CSS3 to create a similar cool stitched effect, some incorporated with background texture images and others without.

Figure B

One of the earliest references I can find for this effect comes from Kit MacAllister's CSS3 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

Chris Coyier took the technique a step further in his "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 D

Then, I ran across an example of using a Double 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.

Figure E

What I wanted to find out next was if there was a way to incorporate a background image texture such as denim or leather to add more design appeal to the total effect (as shown above in Figure A) with the leather texture.

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:

.stitched_element {
    padding: 5px 5px 15px 5px;
    margin: 25px;
    background: url(i/deminTexture_45.jpg) 50% 50% repeat-x;
    border: 2px dashed #FC0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -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);
    height: 100%;
    width: 80%;
    color:#FFF;
}

The HTML code snippet:

    <div class="stitched_element">
        <p>Stitched effect with denim background image
    </div>
The output is displayed in Figure F:

Figure F

Now, the next effort was to eliminate the outside border and allow the background image to appear beyond the stitched effect. How would I achieve this effect? I found what I was looking for from CSSDeck.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):

Figure G

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.

Some pattern and texture image files used in this tutorial were acquired from www.subtlepatterns.com, and are approved for free cultural works under CC BY-SA 3.0.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

4 comments
monster_cookie2148
monster_cookie2148

Excelent work, all in the mood for knowledge. Did I miss something or is Figure G not around today? Also I see that you show all examples in Chrome, will these work with other browsers?

lehnerus2000
lehnerus2000

Thanks Ryan. I assume the paragraph (in the HTML code snippet) is meant to have a closing tag. :)