JSFiddle

  • Fancy CSS navigation #371 is the latest revision

    Rough CSS reproduction of the navigation found at http://beta.rallyinteractive.com/

    /*
    
    A rough CSS reproduction of the navigation found at http://beta.rallyinteractive.com/
    
    */
  • Flexible grid with fixed-width columns #32 is the latest revision

    Quick example of a flexible grid with fixed-width columns

    <div class="container">
        <div class="row show-grid" title="16 column layout">
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
    
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
    
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
    
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
            <div class="span1 column">1</div>
        </div>
    
        <div class="row show-grid" title="8 column layout">
            <div class="span2 column">2</div>
            <div class="span2 column">2</div>
            <div class="span2 column">2</div>
            <div class="span2 column">2 ...</div></div></div>
  • CSS :hover 'shine effect' (ver 3) #1617 is the latest revision

    Uses CSS multiple backgrounds, background-size, gradients, and transitions to create a 'shine effect' when hovering over a button

    /*
     * NOTES:
     *
     * CSS experiment using multiple backgrounds, background-size,
     * and transitions.
     *
     */
  • Clearfix variant tests #6 is the latest revision

    Testing margin collapse of non-floats within elements using different clearfix code.

    <h1>Clearfix : original</h1>
    
    <div class="a cf-1">
        <div class="x">
            a float
        </div>
        <div class="y">
            normal + top margin
        </div>
    </div>
    
    <h1>Clearfix : original (simpler)</h1>
    
    <div class="a cf-1-1">
        <div class="x">
            a float
        </div>
        <div class="y">
            normal + top margin
        </div>
    </div>
    
    <h1>Clearfix : reloaded</h1>
    
    <div class="a cf-2">
        <div class="x">
            a float
        </div>
        <div class="y">
            normal ...</div></div>
  • Easier CSS Flickr icon #4 is the latest revision

    Use % units to significantly reduce the amount of CSS needed

    <div class="s256 sicon sflickr">Flickr</div>
    <div class="s128 sicon sflickr">Flickr</div>
    <div class="s64 sicon sflickr">Flickr</div>
    <a class="s32 sicon sflickr" href="#" title="Find me on Flickr">Flickr</a>
    <div class="s16 sicon sflickr">Flickr</div>
    
  • CSS3 step pattern (2)

    A different type of step gradient

    No code. How about adding some?
  • CSS3 steps pattern (gradients)

    Step pattern created with CSS3 gradients

    No code. How about adding some?
  • CSS3 cross pattern (gradients)

    Using CSS linear gradients to create a repeating cross pattern.

    No code. How about adding some?
  • CSS star pattern (gradients) #2 is the latest revision

    Quick attempt at making a repeating star pattern using CSS gradients.

    No code. How about adding some?
  • CSS border gradients #6301 is the latest revision

    Two methods of creating border gradients.