JSFiddle

  • Image W/ Reflection

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

    <div class="mirror-image">
        <img src="http://lorempixel.com/200/200/people/" />
        <div class="reflection">
            <img src="http://lorempixel.com/200/200/people/" />
        </div>
    </div>
    <div class="mirror-image">
        <img src="http://lorempixel.com/200/200/transport/" />
        <div class="reflection">
            <img src="http://lorempixel.com/200/200/transport/" />
        </div>
    </div>
    <div class="mirror-image">
        <img src="http://lorempixel.com/200/200/abstract/" />
        <div class="reflection">
            <img src="http://lorempixel.com/200/200/abstract/" />
        </div>
    </div>
    <div class="mirror-image">
        Do it with TEXT as well...
        <div class="reflection">
            <span>Do it with TEXT as well...</span>
        </div>
    </div>
  • Position Items Into Circle W/ GSAP #31 is the latest revision

    jQuery 2.0.2, HTML, CSS, JavaScript

    var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter
        radius = '12em', //distance from center
        start = -90 ...
  • Position Items Into Circle W/ jQuery & CSS #83 is the latest revision

    jQuery 2.0.2, HTML, CSS, JavaScript

    var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter
        radius = '12em', //distance from center
        start = -90 ...
  • Label / Placeholder All-In-One

    jQuery 2.0.2, HTML, CSS, JavaScript

    $('input').on('blur', function() {
        $self = $(this);
        if ($self.val()) {
            $self.css({'background-color':'#ffffff'});
        }else{
            $self.css({'background-color':'transparent'});
        }
    });
  • Hide Template Element Contents From Search Engines

    jQuery 2.0.2, HTML, CSS, JavaScript

    var newContent = $('template').html().replace(/<!--([\s\S]*?)-->/mig, '$1');
    $('#content').append(newContent);
  • Door Opening W/ CSS #212 is the latest revision

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

    <div class="wall">
        <div class="threshold">
            <div class="door">   
            </div>
        </div>
    </div>
  • Bootstrap, Hover Caption and Filter #79 is the latest revision

    jQuery 2.0.2, HTML, CSS, JavaScript

    var $filter = $('[data-filter]');
    $('div.filter-options > select').on('change', function(e) {
        var filterValue = $(this).val();
        
        $filter.each(function() {
            var $self = $(this ...
  • Custom List Style Types

    jQuery 2.0.2, HTML, CSS, JavaScript

    <h2 class="text-center">List Style Types</h2>
    <div class="display-flex">
        <div>
            <h3>Different Color Than List</h3>
            <ul class="reset-style custom-style-base">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        </div>
        <div>
            <h3>Change Color On ...</h3></div></div>
  • Simple CSS Spinner #4 is the latest revision

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

    <div class="spinner"></div>
  • Fan Folding Image

    jQuery 2.0.2, HTML, CSS, JavaScript

    function getGap($elem) {
        var gap = 0;
    
        if (typeof $elem.prev().get(0) !== 'undefined') {
            gap = Math.floor($elem.position().left - $elem ...