JSFiddle

  • Carousel Nav

    CSS arrow buttons with hover areas

    <div class="gallery">
        <div class="gallery-nav gallery-next">
            <div class="button"></div>
        </div>
        <div class="gallery-nav gallery-previous">
            <div class="button"></div>
        </div>
    </div>
  • Angle Divider #11 is the latest revision

    Content split in half with an arbitrary angle and changes width on hover. All with done with CSS, HTML, and trigonometry.

    <div class="container">
        <div class="panel left">
            <div class="content">
                
            </div>
        </div>
        <div class="panel right">
            <div class="content"></div>
        </div>
    </div>
  • Fixed and Fluid

    Fixed width box with adjacent container that is the remaining width.

    <div class="effandeff cf">
      
      <div class="secondary">
        
        <a href="#">+</a>
        
      </div>
      
      <div class="primary">
        
        <a href="#">
          
          <span>100% Width</span>
          
        </a>
        
      </div>
      
    </div>
  • Hamburger icon to full width

    jQuery 1.11.0, HTML, SCSS, JavaScript

    $('.nav').click(function () {
        $(this).toggleClass('clicked');
    });
  • Outline Text

    CSS to take a normal font and translate it into an outline font

    <div class="container" >
      <h1 class="outline">Test H1</h1>
    </div>
    <p>At the time of creation, this technique is only supported in Webkit</p>