Hundtandsrutor

by abernier

HTML

<article>
    <h1><a href="https://gist.github.com/1099590">gist</a> CSS3pattern</h1>
fetched in here!
    <p><small><a href="https://github.com/LeaVerou/CSS3-Patterns-Gallery/issues/3">github.com/LeaVerou/CSS3-Patterns-Gallery/issues/3</small><p>
</article>

CSS

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle; font-size:200%;}
article {display:inline-block; padding:1em; background-color:rgba(255,255,255,.95); border:.5em double #333; box-shadow:.25em .25em 0 rgba(0,0,0,.5); font-size:50%;}

JavaScript

(function ($) {
    var yQuery = "USE 'http://gist.github.com/raw/1097256' AS github.gist.content; select * from github.gist.content where gist_id='" + 1099590 + "'";

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(yQuery) + "&format=json&diagnostics=true&callback=?", function (data) {
    $('body').attr('style', data.query.results.content);
});
}(jQuery));