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:
