JSFiddle

  • Perspective Portfolio v2 #5 is the latest revision

    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>
  • Section Highlighter

    Mootools 1.4.4, HTML, CSS, JavaScript

    /* 
        
        Also: http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations
        
    */
  • CSS Arrow Nav #1 is the latest revision

    This really doesn't need a description. Open your eyes fool!

    <div class="wrapper"><!-- Wrapper begin -->
    
      <div id="header"><!-- Header begin -->
        <div class="container"><!-- Header Container begin -->
          <nav>
            <ul class="primary-nav">
              <li><a href="#">Forty-Nine</a></li>
              <li><a href="#">Three Times</a></li>
              <li><a href="#">About Us</a></li>
              <li><a class="selected" href="#">Home</a></li>
            </ul>
            <br class="clear">
          </nav>
        </div><!-- Header Container end -->
      </div><!-- Header end -->
    
    
    
      <div id="content"><!-- Content begin -->
        <div class="container"><!-- Content Container begin -->
            <div class="left"><!-- Container / Left begin -->
              <ul class="secondary-nav box">
                <li><a href="#">Mission Statement</a></li>
                <li><a href="#">Staff and Board</a></li>
                <li><a href="#">Membership Program</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Industry Sectors</a></li>
              </ul>
              <div class="box02">
                  <h2>Discover more for Business ...</h2></div></!--></div></!--></div></!--></div></!--></!--></div>
  • Radio Buttons with 2-Way Exclusivity

    Inspired by Chris Coyier's article here: http://css-tricks.com/14402-radio-buttons-with-2-way-exclusivity/ Added event delegation and value switching.

    function buttonHandler(event, target) {
        var ele = target,
            col = ele.dataset.col,
            row = ele.name.split('-')[1],
            eleParentRow = ele.getParent('tr ...
  • Slide/fade CSS3

    jQuery (edge), HTML, CSS, JavaScript

    var box = document.getElementById('box');
    
    function slide() {
        if (box.style.maxHeight != "100px") {
            box.style.maxHeight = "100px";
            box.style.opacity = "1 ...
  • Slide/fade CSS3

    jQuery (edge), HTML, CSS, JavaScript

    var box = document.getElementById('box');
    
    function slide() {
        if (box.style.maxHeight != "100px") {
            box.style.maxHeight = "100px";
            box.style.opacity = "1 ...
  • Slide/fade CSS3

    jQuery (edge), HTML, CSS, JavaScript

    var box = document.getElementById('box');
    
    function slide() {
        if (box.style.maxHeight != "100px") {
            box.style.maxHeight = "100px";
            box.style.opacity = "1 ...
  • Make div's like a's #1337 is the latest revision

    Mootools 1.3.2, HTML, CSS, JavaScript

    <div tabindex=1></div>
    <div tabindex=2></div>
    <div tabindex=3></div>
  • styleing password

    Mootools 1.3.2, HTML, CSS, JavaScript

    <input type=password />
  • CSS Only Tabs #89 is the latest revision

    Mootools 1.3.2, HTML, CSS, JavaScript

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               <p>Stuff for Tab One</p>
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               <p>Stuff for Tab Two</p>
               
               <img src="http://placekitten.com/200/100">
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               <p>Stuff for Tab Three</p>
               
               <img src="http://placedog.com/200/100">
           </div> 
       </div>
        
    </div>
    
    <p>Pellentesque habitant ...</p>