Stitched Look in CSS

Introduction: Stitched Look in CSS

Stitched look in CSS 

code :

.stitched {
padding: 5px 10px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;

then in body Section 

just call it 

<div class="stitched" >
Demo "Stitched Look"


Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Be the First to Share


    • LED Strip Speed Challenge

      LED Strip Speed Challenge
    • Sculpting Challenge

      Sculpting Challenge
    • Clocks Contest

      Clocks Contest


    Prof. Pickle
    Prof. Pickle

    7 years ago on Introduction

    Very nice. I love it how you even included the shadow. Can you suggest some alternate colours that would keep the "felt" look of it?

    I'm sure some sort of green would work well aswell.

    A comment would be nice to show traditional ownership, although it's not necessary. I'm definitely keeping this one stored in my treasure trove.

    Keep up the good work.