Search code examples
javascriptcsshtmlmodern-ui

Modern UI (Metro) style tile in HTML 5?

I would like to know if it's possible to recreate the tile system of modern UI from Windows 8 on a HTML page.

I already created this from this website. Here is the code 

<div class="tile pos1-1 w1h1 techolive"></div>
<div class="tile pos1-2 w1h1 techblue"></div>
<div class="tile pos2-2 w1h1 techred"></div>
<div class="tilebanner" style="font-size: 20px !important;">
    <a class="tile pos2-3 w2h1 techdarkblue" href="...">
                    List of<br/>
                    Sessions
    </a>
</div>

Now i would like to add the same slide movement effect of modern UI. I guest I need javaScript to create that. Perhaps this feature or a similar feature is included in HTML 5 or CSS. Do you know where I can find a sample?

Solution

  • There is a plugin for jQuery called Metro JS. Maybe you can use this to create the tiles with jquery and javascript.