JSFiddle

  • z-index test

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

    <div class="z-index-1">&nbsp;
      <div class="z-index-2">&nbsp;</div>
      <div class="no-index">&nbsp;
        <div class="z-index-3">&nbsp;</div>
      </div>
    </div>
  • Supersized fancyBox

    jQuery 1.7.2, HTML, CSS, JavaScript

    $(".fancybox")
        .attr('rel', 'gallery')
        .fancybox({
            padding    : 0,
            margin     : 5,
            nextEffect : 'fade',
            prevEffect : 'none',
            afterLoad  : function () {
                $.extend(this, {
                    aspectRatio : false,
                    type ...
  • CSS sprite sheet animation

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

    // Sprite Sheet animation with CSS3 using the steps() feature.
    // To change the speed, just edit the ".8s" animation time.
    
    // Post ...
  • Zylonenauge

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

    <!-- Learn about this code on MDN: https://developer.mozilla.org/de/docs/Web/CSS/animation -->
    
    <div class="view_port">
      <div class="polling_message">
        Warte auf Nachrichten
      </div>
      <div class="cylon_eye"></div>
    </div>
    
  • Transform onClick

    jQuery 3.2.1, HTML, SCSS, JavaScript

    $(".js-click").on('click', function() {
      $('.transform').toggleClass('transform-active');
    });
  • The <a> SVG element defines a hyperlink.

    Since this element shares its tag name with HTML's <a> element, selecting "a" with CSS or querySelector may apply to the wrong kind of element. Try the @namespace rule to distinguish between the two.

    <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->
    
    <svg width="140" height="30" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink">
    
      <a xlink:href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a"
          target="_blank">
        <rect height="30" width="120" y="0" x="0" rx="15"/>
        <text fill="white" text-anchor="middle" 
              y="21" x="60">SVG on MDN</text>
      </a>
    </svg>
  • Height 100% in Flexbox Item

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

    <div class="flexbox-parent">
        <div class="flexbox-item header">
            Header
        </div>
        
        <div class="flexbox-item fill-area content flexbox-item-grow">
            <div class="fill-area-content flexbox-item-grow">
                Content 
                <br /><br />
                Emulates height 100% with a horizontal flexbox with stretch
                <br /><br />      
                This box with a border should fill the blue ...</div></div></div>
  • scriptRdy Window Hack

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

    <script>
    window.scriptRdy = function() {
     var s = document.createElement('script');
     s.href = 'https://code.jquery.com/jquery-1.1.1.js';
     document.body ...</script>
  • Section Inception #11 is the latest revision

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

    <div class="cwt-wrapper">
      <strong>Homepage</strong>
      <header class="cwt-header">.cwt-header</header>
      <section class="cwt-mainstage-wrapper">.cwt-mainstage-wrapper</section>
      <section class="cwt-section">.cwt-section (main content)</section>
      <section class="cwt-section">.cwt-section</section>
      <footer class="cwt-footer">.cwt-footer</footer>
    </div>
    
    <div class="cwt-wrapper">
      <strong>Hubpage</strong>
      <header class="cwt-header">.cwt-header</header>
      <section class="cwt-mainstage-wrapper">.cwt-mainstage-wrapper</section>
      <section class="cwt-section">.cwt-section (main content)</section>
      <section class="cwt-section">.cwt-section</section>
      <section class="cwt-section">.cwt-section</section>
      <section class="cwt-section">.cwt-section</section>
      <footer class="cwt-footer">.cwt-footer</footer>
    </div>
    
    <div class="cwt-wrapper">
      <strong>Content Page ...</strong></div>
  • JS-less CSS Drawer

    Mootools 1.4.5, HTML, CSS, JavaScript

    <div id="contacts-cont">
        <div id="hidden">
    Form goes here            
        </div>
    <div id="shown">
        &raquo;
    </div>
    </div>