• Multiple Column Layout

    Testing some fun stuff with CSS3

    <div class="container">
    <div class="header">
      <h1>Extrey, extrey read all about it!</h1>
      <h2>We're bringing your newspaper to your web browser</h2>
          <h3>Three column example:</h3>
          <p>Pellentesque habitant ...</p></article></article></section></div>
  • Simple Navigations

    Horizontal CSS3 navigations using unordered lists.

    <!-- change the following id tag to "home", "about", "gallery", "services", or "contact" to change the selected navigation item for all of the examples and then run the fiddle. On a real web page you would generally want to add this id to the body tag -->
    <div id="about">
    <!-- example begin -->
    <h1>What makes these so cool?</h1>
    <p>You will notice that each <code> a </code> tag for the navigation menu's has a class ...</p></!--></div></!-->
  • Star Rating

    A star rating demo using SVG, Javascript, and CSS

    //initialize clicked to false and initializes selected and arrays
    var clicked = false;
    var selected;
    var idArray = [one, two, three, four ...
  • HTML5 local page visit counter

    jQuery 1.7.1, HTML, CSS, JavaScript

     <div class="page-count">
          <script type="text/javascript">
              if (localStorage.pagecount)
                localStorage.pagecount=Number(localStorage.pagecount) +1;
            document.write("You've been to this ...</script></div>
  • Flexbox

    A navigation demo using the CSS3 flexbox property

    /* Default pageslide, moves to the right */
    /* Slide to the left, and make it model (you'll have to ...
  • Flexbox Nav

    The second installment of the flexbox nav experiment

      <ul class="primary-nav">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
    <div class="content">
        <p>Move your mouse over the nav bar and you will notice each list-item will stretch ...</p></div>
  • Notebook #2 is the latest revision

    A notebook or notepaper effect using just CSS

    <ul class="list">
      <li><a href="#">Eat Breakfeast</a></li>
      <li><a href="#">Feed Pugsly, the cow</a></li>
      <li><a href="#">Sit Down</a></li>
      <li><a href="#">Eat lunch</a></li>
      <li><a href="#">Call mom</a></li>
      <li><a href="#">Tweet about feeding pugsly</a></li>
      <li><a href="#">Join a hangout in ...</a></li></ul>
  • Dropdown Navigation

    Dropdown ul > li navigation using CSS3

    <ul class="menu">
      <li><a href="#">My dashboard</a></li>
      <li><a href="#">Likes</a></li>
      <li><a href="#">Views</a>
          <li><a href="#"><div>K</div>Documents</a></li>
          <li><a href="#"><div>m</div>Messages</a></li>
          <li><a href="#"><div>X</div>Sign Out</a></li>
      <li><a href="#">Uploads</a></li>
      <li><a href="#">Videos</a></li>
      <li><a href="#">Documents</a></li>
  • CSS Buttons

    jQuery 1.8.3, HTML, CSS, JavaScript

        <a href="#" class="button black">Rectangle</a>  or
        <a href="#" class="button black bigrounded">Rounded</a> Can be
        <a href="#" class="button black medium">Medium</a> or 
        <a href="#" class="button black small">Small</a> 
        <br /><br /> 
        <input class="button black" type="button" value="Input Element" /> 
        <button class="button black">Button Tag</button> 
        <span class="button black">Span</span> 
        <div class="button black">Div</div> 
        <p class="button black">P Tag</p> 
        <h3 class="button black">H3</h3> 
        <a href="#" class="button gray">Gray</a> 
        <a href="#" class="button gray bigrounded">Rounded</a> 
        <a href="#" class="button gray medium">Medium</a> 
        <a href="#" class="button gray small">Small</a> 
        <br /><br /> 
        <input class="button gray" type="button" value="Input Element" /> 
        <button class="button gray">Button ...</button></div>
  • Drop Down Nav 02

    jQuery 1.7.2, HTML, CSS, JavaScript

    <ul class="menu">
      <li><a href="#">Current Project</a>
        <ul class="large">
          <li><a href="#"><span class="green"></span>Proposal: 01-101</a></li>
          <li><a href="#"><span class="green"></span>IACUC: 12-002 - Pending</a></li>
          <li><a href="#"><span class="green"></span></span>IACUC: 12-203</a></li>
          <li><a href="#"><span class="green"></span></span>Proposal: 01-101</a></li>
          <li><a href="#"><span class="red"></span></span>IACUC: 12-002 - Pending</a></li>
          <li><a href="#"><span class="red"></span></span>IACUC: 12-203</a></li>
          <li><a href="#"><span class="red"></span></span>Proposal: 01-101</a></li>
          <li><a href="#"><span class="red"></span></span>IACUC: 12-002 ...</a></li></ul></li></ul>