CSS Stitched Look

December 10th, 2014 | CSS | Kumar Gaurav

CSS Stitched Look

Being designers we love to give numerous effects to our designed stuffs. From very long time I was trying to achieve “Stitched” look on a box. Finally I have a solution and it is insanely easy. So, now forget about crafting stitched look in Photoshop and create same using following CSS chunk.


.stitched {
   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;
}

Don't Be Selfish...Share on Facebook3Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on StumbleUpon0Share on Tumblr0Email this to someone

Having more than 5 years of experience in User Experience Design. My objective is to identify and solve design/architectural problems in the products we use or the product I work for. The methods are always same "User Centric Design" but execution is something which makes this field exciting and challenging. I aim to create engaging designs and experience that inform, inspire and entertain.