[HTML/CSS] "Stitched" Box Design

reloadmydeagle Feb 12, 2015

  1. reloadmydeagle

    reloadmydeagle I LoVe GoldZ Lifetime Gold XPG Retired Staff
    135/188

    Joined:
    Oct 30, 2013
    Messages:
    1,608
    Likes Received:
    656
    Trophy Points:
    135
    Gender:
    Male
    Location:
    Texas
    Console:
    Xbox One
    Here's how to make a <div> box with a "stitched" feel to it using lightweight CSS and HTML.

    CSS:

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

    HTML:

    <div class="stitched">
    Stitched
    </div>

    Example:
    [​IMG]
     
    Feb 12, 2015 #1

Share This Page

Close