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 {
	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:


By Todd Dunham
A web and application developer, based in Chicago, IL. Founder of Dragon Fruit Development (www.dragonfruitdevelopment.com)
  • Loved it!. Thanks

  • WOW! Thanks a lot for these trick!

  • 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.

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns