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 #55 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>