JSFiddle

  • ScrollTo Anchor #3 is the latest revision

    jQuery based + blink effect

    $(document).on('click', 'a[href^="#"]', function(e) {
        var id = $(this).attr('href');
        var $id = $(id);
        if ($id.length === 0) {
            return ...
  • CSS Dialod Window

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

    <div title="Untitled  A Pen By Captain Anonymous">Content by captain Anonymous</div>
    
  • SVG as base64

    Used tools: 1. https://jakearchibald.github.io/svgomg 2. http://b64.io

    No code. How about adding some?
  • SVG applying fill CSS

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

    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
      <g>
        <polygon opacity="0.5" stroke="#000000" id="svg_2" fill="#FF0000" points="49.8125 11.1408 59.6249 39.3699 89.5045 39.9788 65.6893 58.0342 74.3435 86.6395 49.8125 69.5694 25.2815 86.6395 33.9357 58.0342 10.1205 39.9788 40.0001 39.3699 49.8125 11.1408 59.6249 39.3699"
        stroke-width="6" filter="url(#svg_2_blur)" />
      </g>
      <defs>
        <filter id="svg_2_blur">
          <feGaussianBlur stdDeviation="0.8" />
        </filter>
      </defs>
      <script type="text/javascript">alert(/1/.source)</script>
    </svg>
    hover me
    
  • Pure CSS Multiline Ellipsis

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

    <p class="line-clamp line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ...</p>
  • Pure SVG + CSS Circular Progress #6 is the latest revision

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

    <svg class="progress-circle definite" width="100" height="100">
      <g transform="rotate(-90,50,50)">
        <circle class="bg" r="40" cx="50" cy="50" fill="none"></circle>
        <circle class="progress" r="40" cx="50" cy="50" fill="none"></circle>
      </g>
    </svg>
  • :not([style*='display']):nth-child(2n+3) #7 is the latest revision

    The problem in :nth-clild selector for visible items

    <p>Correct behavior:</p>
    <ol>
        <li>NO</li>
        <li>NO</li>
        <li>YES</li>
        <li>NO</li>
        <li>YES</li>
    </ol>
    
    <hr>
    
    <p>Incorrect behavior:</p>
    <ol>
        <li>NO</li>
        <li style="display: none;"></li>
        <li>NO</li>
        <li style="display: none;"></li>
        <li>YES</li>
    </ol>
    
    
    
    
  • CSS :before for TABLE row #1 is the latest revision

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

    <table>
    	<tr>
    		<td><span class="label label-warning circle">!</span></td>
            <td><a href="">smith-flowers.com</a></td>
    		<td>12 Aug 2015</td>
    		<td></td>
       </tr>
    		<tr class="odd">
    		<td><span class="label label-danger circle">-</span></td>
    		<td><a href="">mystore.provider.com</a></td>
    		<td>12 Jan 2014</td>
    		<td></td>
    	</tr>
    	    <tr class="busy">
    		<td><span class="label label-success circle">+</span></td>
            <td><a href="">super-site.net</a></td>
    		<td>2 Oct 2014</td>
    		<td>Office 365</td>
    	</tr>
    	    <tr class="odd">
    		<td><span class="label label-success circle">+</span></td>
            <td><a href="">flowers.com ...</a></td></tr></table>
  • Fashion mobile Facebook-like menu (CSS only) #1 is the latest revision

    Reproduce (simply) the famous dark-backgrounded left-sliding menu, as seen in the mobile Facebook application.

    // Fixing iOS Safari "WTF" issue
    // http://stackoverflow.com/questions/7358781/tapping-on-label-in-mobile-safari
    $('label').click(function() {});
  • Pure CSS tooltip

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

    <body>
    	<a>Hover here!<i>This tootips's arrow also has a border.<br />Pure CSS!</i></a>
    </body>