JSFiddle

  • Deadmau5 Cube

    3D Cube animation using CSS3, SVG and bit of javascrtipt

    $(document).ready(function(){
    	var nodes = $('.box-part');
    	var timeout = null;
    	var highlight = function(node){
    		node.toggleClass('highlight');
    		timeout = setTimeout(function(){highlight ...
  • Font-length test

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

    <div class="t40">
    mmmmmmmmmm
    MMMMMMMMM
    iiiiiiiiiiiiiiiiiiiiiiiiiiiii
    nejneobhospodařovávatelnějšímu
    kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
    pneumonoultramicroscopicsilicovolcanoconiosis
    <span class="upper">
    nejneobhospodařovávatelnějšímu
    kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
    pneumonoultramicroscopicsilicovolcanoconiosis
    </span>
    </div>
    
    <div class="t24">
    mmmmmmmmmmmmmmmmm
    MMMMMMMMMMMMMMM
    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
    nejneobhospodařovávatelnějšímu
    kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
    pneumonoultramicroscopicsilicovolcanoconiosis
    <span class="upper">
    nejneobhospodařovávatelnějšímu
    kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
    pneumonoultramicroscopicsilicovolcanoconiosis
    </span>
    </div>
    
    <div class="t18">
    mmmmmmmmmmmmmmmmmmmmmmmmm
    MMMMMMMMMMMMMMMMMMMMMM ...</div>
  • Music bars animation

    This demo is hand-crafted using the mighty magic of CSS3 animation & CSS3 filters.

    <div class="main">
    <h1>Music bars animation</h1>
        <p>This demo is hand-crafted using the mighty magic of <strong>CSS3 animation</strong> &amp; <strong>CSS3 filters.</strong></p><p><small> Currently can be run ...</small></p></div>
  • Rising water

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

    <div class="show">
    <h1>Rising Water / Loading Progress Bar CSS3 animation</h1>
    <p>Wave animation simulation using transformation of border-width and position.</p>
        <p>Currently can be run ...</p></div>
  • Tidal wave using CSS3

    Wave animation simulation using transformation of border-width and position. Currently can be run in all CSS3 compatible browsers. Author Marek Králík @ Image Design

    <div class="show">
    <h1>Tidal wave using CSS3 animation</h1>
    <p>Wave animation simulation using transformation of border-width and position.</p>
        <p>Currently can be run in all ...</p></div>
  • Wave effect

    jQuery 2.1.3, HTML, CSS, JavaScript

    <div class="about">
    Wave effect using CSS3 transform and blur
        <br /> <small>Author <a href="http://profile.idesigned.cz/marakoss">Marek Králík</a> @ <a href="http://www.idesigned.cz/">Image Design</a></small>
    </div>
    <div class="hero anim wave"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
    
  • Diagonal reflection using CSS3 clip path

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

    <div class="reflect">
        Diagonal reflection using CSS3 clip path
        <br /> <small>Author <a href="http://profile.idesigned.cz/marakoss">Marek Králík</a> @ <a href="http://www.idesigned.cz/">Image Design</a></small>
    </div>
  • Film Grain Simulation - CSS3 #54 is the latest revision

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

    <div class="box noise vignette">
        
        <h1>CSS3 FILM grain simulation</h1>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ...</p></div>
  • CSS Miss-click helper #8 is the latest revision

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

    <ul class="menu">
        <div class="inner">
            <li class="item">
                <a href="#1">Item 1</a>
                <ul class="submenu">
                        <li>
                            <a href="#1">Item 1</a>
                        </li>
                        <li>
                            <a href="#2">Item 2</a>
                        </li>
                        <li>
                            <a href="#3">Item 3</a>
                        </li>
                        <li>
                            <a href="#4">Item 4</a>
                        </li>
                </ul>
            </li>
            <li class="item">
                <a href="#2">Item 2</a>
                <ul class="submenu">
                        <li>
                            <a href="#1">Item 1</a>
                        </li>
                        <li>
                            <a href="#2">Item 2</a>
                        </li>
                        <li>
                            <a href="#3">Item 3</a>
                        </li>
                        <li>
                            <a href="#4">Item 4 ...</a></li></ul></li></div></ul>
  • Distribute Boxes

    Mootools 1.3.2, HTML, CSS, JavaScript

    <div id="container"><div class="box1">test text for text test purporses after test text  </div><div class="box2">test text for text test purporses after test text </div><div class="box3">test text ...</div></div>