JSFiddle

  • Border Layout CSS

    Border Layout CSS

    <div id="north">North</div>
    <!-- <div id="east">East</div> -->
    <div id="west">West</div>
    <div id="center">Center</div>
    <div id="south">South</div>
  • Bootstrap 3.0 Skeleton

    jQuery 2.0.2, HTML, CSS, JavaScript

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button> <a class="navbar-brand" href="#">Bootstrap 3.0 Skeleton</a>
    
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="#about">About</a>
                    </li>
                    <li><a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
    
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0;    
                background:lightgray;width:100%;'>
        Find documentation: <a href='http://getbootstrap.com/css/'>Get Bootstrap 3.0</a><br/>
        Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 ...</a></br/></div></!-->
  • Animated banner - Css

    jQuery (edge), HTML, CSS, JavaScript

    <div></div>
  • CSS3 animated rotation #3 is the latest revision

    CSS3 animated rotation

        
        <body bgcolor="black">
            <div align="center">
                <img src="http://www.your-website-value.com/style/images/logo.png" class="animation-rotate" />
            </div>
        </body>
  • Input Field Fade-in Glow

    Pure CSS.

    <form action="#" method="post">
        <div>
            <label for="name">Text Input</label>
            <input type="text" name="name" id="name" value="" tabindex="1" />
        </div>
      
        <div id="textarea">
            <label for="textarea">Textarea</label>
            <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
        </div>
    </form>    
  • Animated CSS Fire Demo

    A little demo of the CSS property 'text-shadow' NOW WITH ADDED ANIMATION!! woop woop

    var obj = $('#fire');
    var fps = 200;
    var letters = obj.html().split('');
    obj.empty();
    $.each(letters,function(el){
        obj.append($('<span>'+this+'</span>'));
    });
    
        
  • Simulating lighting with CSS gradients and masks

    No-Library (pure JS), HTML, CSS, JavaScript

    function texture(elm, image, angle, d, addLight, addMask) {
        var t = (Math.sin(angle)/2)
        var stop1 = 0.5 + t;
        var ...
  • Logo rotation #2 is the latest revision

    html5

                YUI().use('event-flick', 'transition', function(Y){
                
                    Y.one('#logo').on('flick', function(e){
                        
                        var vel = e.flick.velocity;
                        Y.one ...
  • Responsive iframe #1 is the latest revision

    Small snippet for a responsive iframe solution with fixed aspect-ratio.

    <body>
    <div class="wrapper">
        <div class="h_iframe">
            <iframe src="http://www.wikipedia.org" frameborder="0" allowfullscreen></iframe>
        </div>        <iframe src="http://www.wikipedia.org" </div>
    </body>
    
  • Perspective Portfolio v2

    No-Library (pure JS), HTML, CSS, JavaScript

    <figure>
        <img src="http://lorempixel.com/192/96/sports/1" alt="Portfolio Item">
        <figcaption>
            <h3>Title</h3>
            <p>Description.</p>
        </figcaption>
    </figure>
    
    <figure>
        <img src="http://lorempixel.com/192/96/sports/2" alt="Portfolio Item">
        <figcaption>
            <h3>Title</h3>
            <p>Description.</p>
        </figcaption>
    </figure>
    
    <figure>
        <img src="http://lorempixel.com/192/96/sports/3" alt="Portfolio Item">
        <figcaption>
            <h3>Title</h3>
            <p>Description.</p>
        </figcaption>
    </figure>
    
    <figure>
        <img src="http://lorempixel.com/192/96/sports/4" alt="Portfolio Item">
        <figcaption>
            <h3>Title</h3>
            <p>Description.</p>
        </figcaption>
    </figure>
    
    <figure>
        <img src="http://lorempixel.com/192/96/sports/5" alt="Portfolio Item">
        <figcaption>
            <h3>Title</h3>
            <p>Description.</p>
        </figcaption>
    </figure>
    
    <figure>
        <img src="http://lorempixel.com/192/96/sports/6" alt="Portfolio Item">
        <figcaption>
            <h3>Title</h3>
            <p>Description.</p>
        </figcaption>
    </figure>
    
    <figure>
        <img src="http://lorempixel.com/192/96/sports/7" alt="Portfolio Item">
        <figcaption>
            <h3>Title</h3>
            <p>Description.</p>
        </figcaption>
    </figure>
    
    <figure>
        <img src="http://lorempixel.com/192/96/sports/8" alt="Portfolio Item">
        <figcaption>
            <h3>Title</h3>
            <p>Description.</p>
        </figcaption>
    </figure>
    
    <figure>
        <img src="http://lorempixel.com/192/96/sports/9" alt="Portfolio Item">
        <figcaption>
            <h3>Title</h3>
            <p>Description.</p>
        </figcaption>
    </figure>