xav76’s gists

xav76 / index.haml

Created October 24, 2012 18:01

A CodePen by Bruno Dias. css 3d test. webkit. - there is a fork of this code without prefixes = http://codepen.io/saxamaphone69/pen/KIcnF

	#folder
	.left
	.grad
	.right
	.grad

xav76 / index.html

Created October 24, 2012 18:00

A CodePen by Dec Norton. Bouncy Icons - Bouncy icons with a cool shadow effect

	<ul class="bouncy">
	<li>
	<a href="#" title="Facebook"><span>Facebook</span></a>
	<span></span>
	</li>
	<li>
	<a href="#" title="Twitter"><span>Twitter</span></a>
	<span></span>
	</li>
	<li>

xav76 / index.html

Created October 24, 2012 17:26

A CodePen by Chris Mounsey. CSS 3D Coverflow - ... at least, that is what I have attempted (it's notoriously difficult). It's not perfect but the cards do move in 3D space (although the active one is not centred), and they're controlled by my faithful sta

	<!--- This may need to change --->
	<div class="main-container">
	<div class="coverflow-container">
	<ol class="coverflow-list">
	<!-- Cover item -->
	<input type="radio" name="cover-item" id="cover-1">
	<li class="coverflow-item">
	<label for="cover-1">
	<figure class="album-cover">
	<img src="http://devilskitchen.net/media/coverflow-images/love-is-blind.jpg">

xav76 / index.html

Created October 24, 2012 17:25

A CodePen by Jack Rugile. Canvas Vertical Light - Just some experimentation. Click to clear!

xav76 / index.html

Created October 24, 2012 17:24

A CodePen by Keith Wyland. CSS Drawers - CSS drawers with transform hover effect. based on http://dribbble.com/shots/176332-Navigation

	<div class="wrap">
	<ul class="drawers">
	<li class="drawer"><span class="handle"></span></li>
	<li class="drawer"><span class="handle"></span></li>
	<li class="drawer"><span class="handle"></span></li>
	<li class="drawer"><span class="handle"></span></li>
	</ul>
	</div>

xav76 / index.html

Created October 24, 2012 17:23

A CodePen by turusuke. CSS background effect - no Javascript and Images

	<div>
	</div>

xav76 / index.html

Created October 24, 2012 17:23

A CodePen by David Pedersen. iOS style button

<a href="#" class="back-button">Tilbage</a>

xav76 / index.html

Created October 24, 2012 17:22

A CodePen by Jeroen Franse. Toggle switch with checkbox:checked - Round switch button in css with animation cleaned up. Inspired on the design of Paul Flavius, see: http://psd.tutsplus.com/tutorials/interface-tutorials/round-switch-button/ It is pure CS


	<p class=l>Don't forget to click the switch to see the action</p>
	<div class=round><input type=checkbox id=onoff name=onoff />
	<div class=back><label class=but for=onoff><span class=on>I</span><span class=off>0</span></label></div></div>
	<p class=r>It is just an ordinary ckeckbox, usable in any form!</p>

xav76 / index.html

Created October 24, 2012 17:21

A CodePen by Chris Mounsey. Circular Slideshow - So, I saw a nice circular slideshow at envylabs.com, and I thought that I would try to emulate it in my own way. Inevitably, it is actioned by radio inputs (I can do JQuery—I just prefer the purity of HTML

	<div class="container">
	<input type="radio" name="slide-control" id="goto-slide-1" checked>
	<input type="radio" name="slide-control" id="goto-slide-2">
	<input type="radio" name="slide-control" id="goto-slide-3">
	<input type="radio" name="slide-control" id="goto-slide-4">
	<div class="reflect">
	<div class="horizon">
	<ul class="slideshow">
	<li class="slides slide-1"></li>
	<li class="slides slide-2"></li>

xav76 / index.html

Created October 24, 2012 17:20

A CodePen by Jonathan Dumaine. Jason Polito 'Tick-Tock' CSS - http://www.reddit.com/r/web_design/comments/y5mve/the_ticktock_gif_from_yesterday_seemed_like_a/


	<div class="container">

	<div class="actual">
	<div class="" id="blurred">
	<div class="gear1"></div>
	<div class="gear2"></div>
	<div class="circle"></div>
	<div class="wheel">
	<div class="slot">