CSS3 Stitched Effect

Oct 3, 2012
CSS Snippet
By

When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s.

Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra “pop” needed to make things stand out and look great without making the site look busy and thrown together.

The next time you need to call attention to something on a page, try this cool effect in CSS3 that makes it look like an element has been sewn onto the page!

.stitched {
	height:100px;
	width:500px;
	padding: 5px 10px 5px 10px;
	margin: 15px;
	background: #e2e2e2;
	border: 2px dashed rgba(255,255,255,0.4);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
	-webkit-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
	box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 6px 4px rgba(10,10,0,.5);
        }

Here’s an example of what it will look like:

DEMO

Author: Todd Dunham
A web and application developer, based in Chicago, IL. Founder of Dragon Fruit Development (www.dragonfruitdevelopment.com)
  • http://front-endmagazine.com/ Frontend Magazine

    Loved it!. Thanks

  • http://www.websitetemplates.org/ Stacy Summers

    WOW! Thanks a lot for these trick!

  • http://www.webdesign.org/ Julia Agnes

    Cool! I was looking for such effect!

  • Spinx Inc. in New York

    Yes, this is a good code and I have implemented in my project
    and I get an excellent effect from that code. Thanks for sharing it.