xav76’s gists

xav76 / index.html

Created October 23, 2012 18:15

A CodePen by Ana Tudor. Sliding door effect (box-shadow method) - Same effect as http://codepen.io/html5web/pen/EFyzB and http://codepen.io/thebabydino/pen/Kkvum

	<div class='s s1'></div>
	<div class='s s2'></div>
	<div class='s s3'></div>
	<div class='s s4'></div>

xav76 / index.html

Created October 23, 2012 18:15

A CodePen by adrianleb.

	<div class="blob clockwise"></div>
	<div class="blob anticlockwise blue"></div>
	<div class="blob clockwise slower green"></div>

xav76 / index.html

Created October 23, 2012 18:17

A CodePen by Christophe Benoliel Molina. Adjust Controls (updated 22/10/12) - inspired from Dribbble shot by Nikolay Verin http://dribbble.com/shots/767214-Adjust-Controls

	<div id="warp">
	This Css + js Version</br>(work better on chrome & safari)
	</br></br>
	<label for="molette">
	<button class="dec button moins" value="">−</button>
	<input id="molette" type="range" name="molette" value="31" >
	<button class="inc button plus">+</button>
	</label>
	</br></br><b>NEW</b></br><a target="_blank" href="http://codepen.io/10tribu/full/LotBv">Here</a></br> Pure Css (no-js)
	</br>

xav76 / index.html

Created October 23, 2012 18:17

A CodePen by Stuart Robson. Responsive Accordian to Tabs - A constant work in progress

	<h2>Responsive Accordian to Tabs</h2>


	<ul id="nav">
	<li><a href="#">Item 1</a>
	<section>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
	</section>
	</li>
	<li><a href="#">Item 2</a>

xav76 / index.html

Created October 23, 2012 18:19

A CodePen by Stuart Robson. Responsive Accordian to Tabs - A constant work in progress

	<h2>Responsive Accordian to Tabs</h2>


	<ul id="nav">
	<li><a href="#">Item 1</a>
	<section>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
	</section>
	</li>
	<li><a href="#">Item 2</a>

xav76 / index.html

Created October 23, 2012 18:24

A CodePen by Neil Carpenter. RAINBOWBALLZ - First go at a canvas thing, so code is pretty badly written, gets quite sluggish towards the higher end of balls too.

	<body>

	<div id="controls">
	<span>

	<h1>RAINBOWBALLZ</h1>

	<p>Drag your mouse around. Move sliders to adjust effects. Click to toggle painting mode on/off. (No sliders in Firefox, sorry!)</p>

	<p>

xav76 / index.html

Created October 23, 2012 18:25

A CodePen by Michael Martin-Smucker. CSS Stacked Paper Effect - Creating a messy stack of papers using the magic of CSS transforms and generated content.

	<div class="letter">
	<p>Dear Friends,</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque quis rhoncus sapien facilisis. Mauris quis massa dui, rhoncus viverra quam. Nulla tempus, augue ut consectetur facilisis, arcu elit pellentesque arcu, sed rutrum orci turpis pulvinar augue. Donec eget arcu mauris. Vestibulum tristique consequat lacus eget laoreet. Integer sed nisl sed nibh pulvinar ornare quis nec quam. Aenean rhoncus ligula ut lectus placerat a commodo quam vulputate. In eu metus turpis.</p>
	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus facilisis erat in nibh auctor at aliquet velit vestibulum. Curabitur turpis diam, malesuada eu consequat eget, ultricies sed nunc. Aenean sed odio massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare vulputate congue. Quisque leo metus, condimentum nec molestie et, egestas luctus libero.</p>
	<p>M

xav76 / index.html

Created October 23, 2012 18:26

A CodePen by Neil Carpenter. Spirograph in canvas - Canvas for spirograph-y effects, works best on a large screen.

	<body>

	<canvas id="canvas"></canvas>

	<div id="controls">
	<span>

	<h1>spiro</h1>

	<p>Click and drag to draw. Move sliders to adjust effects. Double click to clear screen. (No sliders in Firefox, sorry!)</p>

xav76 / index.html

Created October 23, 2012 18:27

A CodePen by D. Moraschi. CSS Atom

	<div class="container">
	<div class="wrap">
	<div class="circle horizontal c1">
	<div class="wrap-electron">
	<div class="circle electron"></div>
	</div>
	</div>
	<div class="circle vertical c1">
	<div class="wrap-electron">
	<div class="circle electron"></div>

xav76 / index.html

Created October 23, 2012 18:28

A CodePen by Azik Samarkandiy. Typing animation using CSS - work on progress...

	<p>hi folks, this is typing animation using CSS</p>
	<p>created with ♥ by
	<a href="https://twitter.com/@samarkandiy" title="Azik Samarkandiy">@samarkandiy</a>
	:)<span>\|</span></p>