CSS Background Patterns

by Roberto Apasajja

HTML

<div id="stripes">
    <div class="stripes1">
        <span class="italic heavy text-shadowed">交錯條紋</span>
    </div>
    <div class="stripes2">
        <span class="italic heavy text-shadowed">直條紋</span>
    </div>
    <div class="stripes3">
        <span class="italic heavy text-shadowed">橫條紋</span>
    </div>
    <div class="stripes4">
        <span class="italic heavy text-shadowed">斜條紋</span>
    </div>
    <div class="stripes5">
        <span class="italic heavy text-shadowed">交錯斜條紋</span>
    </div>
    <div class="stripes6">
        <span class="italic heavy text-shadowed">模糊條紋</span>
    </div>
</div>

<p>
    <a class="buttonShape1 stripes1" href="#">
        <span class="italic heavy text-shadowed">測試按鈕1</span>
    </a>
</p>
</p>
    <a class="buttonShape1 stripes2" href="#">
        <span class="italic heavy text-shadowed">測試按鈕2</span>
    </a>
</p>
</p>
    <a class="buttonShape1 stripes3" href="#">
        <span class="italic heavy text-shadowed">測試按鈕3</span>
    </a>
</p>
</p>
    <a class="buttonShape1 stripes4" href="#">
        <span class="italic heavy text-shadowed">測試按鈕4</span>
    </a>
</p>
</p>
    <a class="buttonShape1 stripes5" href="#">
        <span class="italic heavy text-shadowed">測試按鈕5</span>
    </a>
</p>
</p>
    <a class="buttonShape1 stripes6" href="#">
        <span class="italic heavy text-shadowed">測試按鈕6</span>
    </a>
</p>

CSS

body {
    font-family: 微軟正黑體, Verdana, Arial;    
    color: #000033;
}
p {
    margin-top: 40px;
}
.buttonShape1 {
    border-radius: 6px;
    padding: 12px;
    text-decoration: none;
    box-shadow: 
        -1px -1px 2px #999,
        1px 1px 1px #444,
        2px 2px 4px gray,
        inset 6px 6px 8px rgba(255, 255, 255, .5),
        inset -6px -6px 8px rgba(44, 44, 44, .3);
}
.italic {    
    font-style: italic;    
}
.heavy {
    font-weight: 800;
}
.text-shadowed {
    text-shadow: 1px 2px 2px gray;
}
#stripes div {
    padding: 20px;
    margin: 0 20px 20px 0;
    height: 50px;
    width: 375px;
    border: 1px solid gray;
    box-shadow: 1px 1px 8px gray;
}
.stripes1 {
    background-size: 25px 25px;
    background-color: rgba(31, 2, 30, .3);
    background-image: 
        linear-gradient(
            0deg, 
            transparent 50%, 
            rgba(200, 0, 0, .2) 50%),
        linear-gradient(
            90deg,
            transparent 50%, 
            rgba(200, 0, 0, .2) 50%);
}
.stripes2 {
    background-size: 10% 10%;
    background-color: rgba(31, 2, 30, .3);
    background-image: 
        linear-gradient(
            90deg,
            rgba(255, 0, 255, .2) 50%, 
            transparent 50%);
}
.stripes3 {
    background-size: 30px 30px;
    background-color: #f90;
    background-image: 
        linear-gradient(
            0deg,
            rgba(255, 0, 255, .2) 50%, 
            transparent 50%);
}
.stripes4 {
    background-size: 26px 26px;
    background-color: rgba(31, 2, 30, .3);
    background-image: 
        linear-gradient(
            45deg,
            rgba(255, 255, 255, .3) 25%, 
            transparent 25%, 
            transparent 50%, 
            rgba(255, 255, 255, .3) 50%, 
            rgba(255, 255, 255, .3) 75%, 
            transparent 75%, 
            transparent);
}
.stripes5 {
    background-size: 26px 26px;
    background-color: rgba(2, 89, 30, .3);
    background-image: 
        linear-gradient(
           ...