Add a Stitched Look with CSS

JUST COPY & PASTE

CSS can do some neat things to jazz up web pages. One nifty trick is to make a stitched look on the page for western themes or for coupons or whatever your imagination can muster. Below is the CSS code needed to make the stitching.

Just copy and paste the code into your CSS selector for the area you want a stitched look on. You may need to adjust some of the settings to get the exact look for your particular website.

Change the color and the width of the border for the most dramatic changes. The “key” to this look is the line “border: 2px dashed #fff;” change this and you change the type of dotted line it is. Play around with it and see what you can come up with.

.stitches {

padding: 20px;

margin: 10px;

background: #ff0030;

color: #fff;

font-size: 21px;

font-weight: bold;

line-height: 1.3em;

border: 2px dashed #fff;

border-radius: 10px;

box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

text-shadow: -1px -1px #aa3030;

font-weight: normal;

}

Have a unique CSS code to share or questions about how to use this code?

Sound off in the comments below!