FED Challenge #2

Create your own CSS3 Pattern.

by nate

HTML

<h2>FED Challenge #2</h2>

<p>Make a bad-ass new <a href="http://leaverou.me/css3patterns/">CSS3 pattern</a>.</p>

<link href="http://leaverou.me/css3patterns/style.css" rel="stylesheet" />
<ul id="patterns">
<li style="background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#000, #000);
background-position: 50px 50px, 80px 50px, 55px 55px, 75px 55px, 85px 60px, 40px 60px, 40px 65px, 90px 65px, 55px 65px, 75px 65px, 45px 75px, 55px 80px, 85px 75px, 40px 60px, 55px 85px, 70px 85px, 0 0;
background-size: 5px, 5px, 5px, 5px, 10px 5px, 10px 5px, 5px, 5px, 5px, 5px, 5px 10px, 25px 5px, 5px 10px, 55px 25px, 10px 5px, 10px 5px, 100%;background-repeat: no-repeat;" title="Space Invader" data-author="Kevin Foster" data-author-url="http://about.me/kevinfoster" id="space"></li>
</ul>

<p>Submit entries as a jsFiddle to <a href="mailto:[email protected]">[email protected]</a>.</p>

    <script src="http://leaverou.me/csss/plugins/css-snippets.js"></script>
    <script src="http://leaverou.me/css3patterns/css3patterns.js"></script>

CSS

body {
    background-color: hsl( 0, 0%, 20% );
    color: hsl( 0, 0%, 80% );
    font-family: monospace;
    font-size: 18px;
}

h1 {
    font-size: 36px;
    margin-bottom: 18px;
    text-shadow: 2px 2px 0 hsl( 0, 0%, 0% );
}

p {
    clear: left;
    margin-bottom: 18px;
    text-shadow: 1px 1px 0 hsla( 0, 0%, 0%, 0.5 );
}

a {
    color: hsl( 0, 0%, 50% );
}

/* Make your super awesome pattern here */

li {
    background-color: #6d695c;
    background-image:
        -webkit-repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
        -webkit-repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
        -webkit-linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
        -webkit-linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
    background-size: 70px 120px;
}

/* These styles just make it look like a cool-ass button, ala http://leaverou.me/css3patterns/ */

li {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 40px;
    float: left;
    list-style: none;

    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    
    -moz-box-shadow:
        -3px -3px 10px 2px hsla(0, 0%, 0%, .3) inset,
        0 0 0 15px hsla(0, 100%, 100%, .6) inset,
        0 0 0 1px hsla(0, 0%, 0%, .5),
        2px 2px 10px hsla(0, 0%, 0%, .6);
    
    box-shadow:
        -3px -3px 10px 2px hsla(0, 0%, 0%, .3) inset,
        0 0 0 15px hsla(0, 100%, 100%, .6) inset,
        0 0 0 1px hsla(0, 0%, 0%, .5),
        2px 2px 10px hsla(0, 0%, 0%, .6);
    
    -webkit-box-shadow:
        0 0 0 15px hsla(0, 100%, 100%, .6) inset,
        0 0 0 1px hsla(0, 0%, 0%, .5),
        2px 2px 10px hsla(0, 0%, 0%, .6);   
}