mirror of
https://github.com/imsky/holder.git
synced 2026-04-21 03:01:19 -04:00
99 lines
3.7 KiB
HTML
99 lines
3.7 KiB
HTML
<!doctype html>
|
|
<!--
|
|
Holder is made by Ivan Malopinsky (https://imsky.co)
|
|
Thanks for checking out the source, visit my site for more of my work!
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
|
<title>Holder.js - image placeholders in browser</title>
|
|
<style type="text/css">
|
|
body {padding:0;margin:0;font-family:sans-serif;background:#fff}
|
|
body.etc {font-family:"Droid Sans", "FreeSans", sans-serif}
|
|
a {color:#5c9f7e}
|
|
a:hover {color:#4D8569}
|
|
a, a:hover {transition:color 0.1s ease-in}
|
|
h1, h2 {margin:0;letter-spacing:-1px}
|
|
h2.ie {font:3em inherit;color:red;position:fixed;top:0px;margin:0;z-index:2;width:100%;background:yellow}
|
|
|
|
#content {position:absolute;z-index:1;top:120px;left:0px;height:230px;color:#555;font-size:12px}
|
|
#content-inner {padding:20px;overflow:hidden;width:500px}
|
|
.block {float:left;width:200px;margin-right:40px}
|
|
#details {width:220px}
|
|
.block.header h1 {margin-bottom:20px;color:#78c9a9;font-size:24px}
|
|
.block h2 {color:#aaa;font-size:16px;line-height:20px;margin-bottom:8px}
|
|
.block.fluid {width:auto}
|
|
.block p {margin:0;margin-bottom:16px;line-height:16px}
|
|
.block code {border-radius:4px;font-size:12px;font-family:'Lucida Console',monospace;background:#eee;text-align:center;display:block;padding:4px;white-space:nowrap}
|
|
|
|
#download {background:#78c9a9;display:block;text-align:center;font-weight:bold;color:#fff;padding:4px 0;font-size:14px;border-radius:4px;text-decoration:none;text-shadow:0px 1px 0px rgba(0,0,0, 0.2);box-shadow:0px 0px 0px #69B094}
|
|
#download:hover {box-shadow:0px 2px 0px #69B094}
|
|
#download, #download:hover {transition:all 0.1s ease-out}
|
|
|
|
#background {position:fixed;z-index:2}
|
|
#background img {position:absolute;display:block}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="content">
|
|
<div id="content-inner">
|
|
<div class="block header">
|
|
<h1>Holder.js</h1>
|
|
<p>
|
|
Holder renders image placeholders entirely in browser.
|
|
</p>
|
|
<p>Placeholders can have custom colors, fonts, resizing behavior, and rendering engine (Canvas/SVG).</p>
|
|
<a href="https://github.com/imsky/holder/zipball/v2.9.8" id="download">Download Holder.js</a>
|
|
</div>
|
|
<div class="block" id="details">
|
|
<h2>Usage</h2>
|
|
<p>
|
|
<code><img src="holder.js/300x200"></code>
|
|
</p>
|
|
<h2>Documentation</h2>
|
|
<p>
|
|
Learn more at the <a href="https://github.com/imsky/holder">Holder.js GitHub page</a>.
|
|
</p>
|
|
<h2>Credits</h2>
|
|
<p>
|
|
Made by <a href="https://imsky.co">Ivan Malopinsky</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="background"></div>
|
|
|
|
<!--[if lt IE 9]>
|
|
<h2 class="ie">You're using an unsupported browser. <a href="http://goo.gl/OxmUO">Upgrade to IE9.</a></h2>
|
|
<![endif]-->
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<script src="http://imsky.github.com/cssFx/cssfx.min.js"></script>
|
|
<script src="holder.js"></script>
|
|
<script src="demo.js"></script>
|
|
|
|
<!-- Start of StatCounter Code for Default Guide -->
|
|
<script type="text/javascript">
|
|
var sc_project=9180214;
|
|
var sc_invisible=1;
|
|
var sc_security="80b7049b";
|
|
var scJsHost = (("https:" == document.location.protocol) ?
|
|
"https://secure." : "http://www.");
|
|
document.write("<sc"+"ript type='text/javascript' src='" +
|
|
scJsHost+
|
|
"statcounter.com/counter/counter.js'></"+"script>");
|
|
</script>
|
|
<noscript><div class="statcounter"><a title="free hit
|
|
counters" href="http://statcounter.com/"
|
|
target="_blank"><img class="statcounter"
|
|
src="http://c.statcounter.com/9180214/0/80b7049b/1/"
|
|
alt="free hit counters"></a></div></noscript>
|
|
<!-- End of StatCounter Code for Default Guide -->
|
|
|
|
</body>
|
|
</html>
|