JSFiddle

  • Silcore Character Sheet

    Rendering Silcore Sheet using Flexbox and pure CSS.

    <div class="cs sheet silcore">
      <div class="row title">Arual Kovak</div>
      <div class="row">
        <div class="col">
          <div class="row header">Portrait</div>
          <div class="picture" style="/*background-image: url(http://lorempixel.com/425/550/people)*/"></div>
          <div class="row header">Attributes</div>
          <div class="row two-up traits">
            <div class="row entry">
              <div class="name">Agi</div>
              <div>1</div>
            </div>
            <div class="row entry">
              <div class="name">App</div>
              <div>0</div>
            </div>
            <div class="row entry">
              <div class="name">Bld</div>
              <div>1</div>
            </div>
            <div class="row entry">
              <div class="name">Cre</div>
              <div>0</div>
            </div>
            <div class="row entry">
              <div class="name">Fit</div>
              <div>1</div>
            </div>
            <div class="row entry">
              <div class="name">Inf</div>
              <div>0</div>
            </div>
            <div class="row entry">
              <div class="name">Kno</div>
              <div>0</div>
            </div>
            <div class="row entry">
              <div class="name">Per</div>
              <div>0 ...</div></div></div></div></div></div>
  • CyberCoders Style Tags

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

    <tag>Tag Text</tag>
    <tag>Style Tag</tag>
    <tag>Very Very Stretchy Tag</tag>
  • cMAX Button Styles #4 is the latest revision

    Button Styles for cMAX Buttons

    <div class="wb-button-bar">
        <div class="topic-name complete">3 Section 3</div>
        <div class="buttons">
            <span class="button green right"><i class="icon-arrow-left"></i>Previous</span>
            <span class="button green"><i class="icon-arrow-right"></i>Next</span>
            <span class="button separator"></span>
            <span class="button green"><i class="icon-arrow-right"></i>Guide Me</span>
        </div>
    </div>
  • Knockout Example

    Knockout Example for Presentation

    var model = {
        tasks: [{
            id: 1,
            title: 'Go to the grocery store.',
            complete: false
        }]
    };
    
    var viewModel = ko.mapping.fromJS(model);
    viewModel ...
  • Reflection Effect

    Reflected kittens for http://stackoverflow.com/q/16763677/1454806

    <div class="row-fluid">
        <div class="span12" id="cover_pictures">
            <div class="images">
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
            </div>  
        </div>
    </div>
  • Top/Bottom expanding border DIV

    http://stackoverflow.com/q/16725430/1454806

    <div class="border">
        <div class="content">
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum ...</br/></br/></br/></br/></br/></br/></div></div>
  • Rainbow Menu

    Rainbow Menu Test

    <div class="topbar">
        <ul class="nav"><li>Models</li><li>Services</li><li>Agency</li><li>Contact</li><li>Members</li></ul>
    </div>
  • H'Venus Album Sandbox

    jQuery Compat (edge), HTML, SCSS, JavaScript

    var username = 'HVenusPromotions';
    var url = {
        albums: function(username) {
            return 'http://graph.facebook.com/' + username + '/albums';
        },
        album_cover: function(album_id) {
            return 'http ...
  • jQuery Circle Animation #50 is the latest revision

    http://stackoverflow.com/q/16528488/1454806

    $('.circle').on('click', function() {
        var $this = $(this);
        $this.css('z-index', 2)
        .siblings('.circle').removeClass('expanded').css('z-index', 1);
        $this.animate ...
  • Enabling CSS4 Selectors in jQuery #3 is the latest revision

    As asked in http://stackoverflow.com/q/16366889/1454806

    $ = function (selector, context) {
        try {
            return jQuery(selector, context);
        } catch (e) {
            return jQuery(sel.sel(selector, context));
        }
    };
    $('div.jQuery').addClass('working ...