Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
94 lines (76 sloc) 4.13 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kort</title>
<meta name="description" content="CSS 3D thumbnail preview concept">
<meta name="author" content="Hakim El Hattab">
<meta name="viewport" content="width=800, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/kort.css">
</head>
<body>
<div class="contents">
<article>
<h1>Kort</h1>
<p>
A thumbnail preview concept. Hover over the thumbnails, <br>
or touch and swipe if you're on a touch device.
</p>
<p>
Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
</p>
</article>
<div class="sharing">
<a href="http://twitter.com/share" class="twitter-share-button" data-text="Kort - a CSS 3D thumbnail preview concept by @hakimel" data-url="http://lab.hakim.se/kort" data-count="small" data-related="hakimel"></a>
<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Fkort%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
</div>
<a href="https://github.com/hakimel/kort"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
</div>
<h2>Default</h2>
<div class="thumb kort">
<img src="http://placekitten.com/200/200" width="200" height="200">
<img src="http://placekitten.com/200/201" width="200" height="200">
<img src="http://placekitten.com/200/202" width="200" height="200">
<img src="http://placekitten.com/200/203" width="200" height="200">
<img src="http://placekitten.com/200/204" width="200" height="200">
<img src="http://placekitten.com/200/209" width="200" height="200">
<img src="http://placekitten.com/200/206" width="200" height="200">
<img src="http://placekitten.com/200/207" width="200" height="200">
<img src="http://placekitten.com/200/208" width="200" height="200">
</div>
<h2>Concave</h2>
<div class="thumb kort concave">
<img src="http://placekitten.com/200/200" width="200" height="200">
<img src="http://placekitten.com/200/201" width="200" height="200">
<img src="http://placekitten.com/200/202" width="200" height="200">
<img src="http://placekitten.com/200/203" width="200" height="200">
<img src="http://placekitten.com/200/204" width="200" height="200">
<img src="http://placekitten.com/200/209" width="200" height="200">
<img src="http://placekitten.com/200/206" width="200" height="200">
<img src="http://placekitten.com/200/207" width="200" height="200">
<img src="http://placekitten.com/200/208" width="200" height="200">
</div>
<h2>Stack</h2>
<div class="thumb kort stack">
<img src="http://placekitten.com/200/200" width="200" height="200">
<img src="http://placekitten.com/200/201" width="200" height="200">
<img src="http://placekitten.com/200/202" width="200" height="200">
<img src="http://placekitten.com/200/203" width="200" height="200">
<img src="http://placekitten.com/200/204" width="200" height="200">
<img src="http://placekitten.com/200/209" width="200" height="200">
<img src="http://placekitten.com/200/206" width="200" height="200">
<img src="http://placekitten.com/200/207" width="200" height="200">
<img src="http://placekitten.com/200/208" width="200" height="200">
</div>
<script src="js/kort.js"></script>
<script>
// FF OS X animates this at 3-4 FPS when there are box-shadows
// on the images, hence the hack... Ugh :/
if( navigator.userAgent.match( /firefox/gi ) ) {
[].slice.call( document.querySelectorAll( '.thumb img' ) ).forEach(function( el ) { el.style.boxShadow = 'none'; });
}
</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</body>
</html>