Join Sue Jenkins for an in-depth discussion in this video Creating stitched borders with CSS, part of Productivity Tips for Web Designers.
- Hello everyone, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson I'll show you a simple, effective technique to create a stitched border effect with CSS. Adding a stitched border effect to an object gives it a hip, 3D, tactile appearance that many people find attractive. You can use this style on any element like buttons, banners, and icons, but be careful not to overdo it. As with any style less is often more so use this technique selectively to add emphasis to a particular area of your site.
Let's start a basic stitched border. You'll begin by creating a div container on your page with a class attribute called stitched. It's okay to give an element a style before you've created the CSS. Then duplicate your container twice more so you have a set of three stacked divs. Now create a style called stitched with the following attributes including padding, margin, color, font, border, background-color, and shadow styles. In this example I've made the background-color a jeansie blue and made the stitching a light tan.
Note the comments here about the shadow boxes. The first set of shadow attributes extends the background-color past the stitching while the second set adds a shadow to the div container itself. Save your page and preview in a browser. This effect works great as long as you make sure you use the same flat color for both the background and the first box-shadow.
If you'd like to use a texture on your div element, be aware that a background-image will only extend as far as the element's edges but not through the shadows. For example, if I add a background-image to my stitch style, the texture will only display on the inside of the border, which may or may not be what you want. Let me show you how that looks. Fortunately there's a workaround to make the texture go all the way to the edges.
First create a div with a class called outside. Then nested inside of it, create another div with a class called inside. If desired add some text to the inside of the container.
Your code should look something like this. Now we'll go create our outside and inside styles with the following attributes. The outside style gives us our jeans material as the background-image along with the box-shadow effect around the outer edges. The inside style includes the same jeans material for the background, but also includes a dashed border to serve as the thread in our stitched effect. So now we'll save again and preview in a browser.
Ah, pretty cool. The beauty of using class styles here gives you the option of applying these styles to multiple elements. See what happens when you use different textures such as leather, cotton, linen, or vinyl. You can adjust any of the colors, sizes, textured images and so forth to create a unique custom stitched style for your website.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.