xav76’s gists

xav76 / index.html

Created October 24, 2012 17:19

A CodePen by Tunghsiao Liu. Path 2.0 Flyout Menu using CSS - Demo: http://sparanoid.com/lab/path-menu/ Dribbble page: http://drbl.in/cwcK

	<div id="testfield" class="span16">
	<div class="flyout-wrap">
	<a class="flyout-btn" href="#" title="Toggle"><span>Flyout Menu Toggle</span></a>
	<ul class="flyout flyout-init">
	<li><a href="#"><span>Item</span></a></li>
	<li><a href="#"><span>Item</span></a></li>
	<li><a href="#"><span>Item</span></a></li>
	<li><a href="#"><span>Item</span></a></li>
	<li><a href="#"><span>Item</span></a></li>
	<li><a href="#"><span>Item</span></a></li>

xav76 / index.html

Created October 24, 2012 17:19

A CodePen by Tyrus. Progress Bars - Simple progress bar styles. *Chris Coyier's scalable background image technique: http://css-tricks.com/perfect-full-page-background-image/

	<div id="bg">
	<img src="http://img.skitch.com/20120814-m3ei5cptau2yjn7sgi2a4i62kn.png" alt="">
	</div>


	<div class="wrapper">
	<div class="progress"></div>
	</div>

	<div class="wrapper">

xav76 / index.html

Created October 24, 2012 17:18

A CodePen by Mario Gonzalez. Canvas PS3 homescreen wave

xav76 / script.js

Created October 24, 2012 17:18

A CodePen by Takashi Kitao. Lighting and Billboard with CSS - This is an example of DivSugar, a CSS-based 3D graphics library. DivSugar: https://github.com/kitao/divsugar

	'use strict';

	// create a scene
	var scn = new DivSugar.Scene().setSize(800, 600).setImage('#d0d0d0').appendTo(document.body);

	// maximize the scene size
	function resize() { scn.adjustLayout(window.innerWidth, window.innerHeight, 'cover'); }
	window.addEventListener('resize', resize, true);
	resize();

xav76 / index.html

Created October 24, 2012 17:18

A CodePen by Christian Naths. Responsive Admin Template - Just a design I'm working on for an admin area of a CMS. Just one responsive breakpoint at 800px; one layout for portrait iPad and smaller and another layout for landscape iPad and larger.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />

	<title></title>

xav76 / index.html

Created October 24, 2012 17:16

A CodePen by Sergio Tapia Gutierrez. Google Logo with CSS3 Animations. - This is taken from the logo that appears on the main Google website: http://www.google.com The icon has a nice animation effect, and I wanted to recreate it using CSS3 animations.

	<h1>Google Logo with CSS3 Animations</h1>

	<p>Another one of my experiments while learning about CSS3 animations and transitions. @lostinthegc</p>

	<div class="wrap">

	<img src="http://i.imgur.com/e8LMT.png" /> <!-- Original logo. -->

	<div class="pen"> <!-- Sexy times logo.-->
	<div class="blue"></div>

xav76 / index.html

Created October 24, 2012 17:15

A CodePen by Tristan. Geese - A tribute to Giess - Best Winamp vis plugin ever. Type your name in the Seed box to see what it looks like! Most of the control is done with Ctrl, Alt and Shift & Mouse Wheel / Click on the Canvas element. Seedrandom.js co

	<body>
	<section id="wrapper">
	<label title="Ctrl-Click">[ <span id="screenshot">Screenshot</span> ]</label>
	<label title="Shift-Click">[ <span id="revRotation">Reverse Rotation</span> ]</label>
	<label title="Alt-Click">[ <span id="palette">Reverse Palette</span> ]</label>
	<label class="right" title="Ctrl-Mouse Wheel">[ Draw Alpha: <span id="drawAlpha">0.0750</span> ]</label>
	<label class="right" title="Alt-Mouse Wheel">[ Clear Alpha: <span id="clearAlpha">0.0100</span> ]</label>
	<label class="right" title="Shift-Mouse Wheel">[ Rotation: <span id="rotation">0.0050</span> ]</label>
	<label class="right" title="Mouse Wheel">[ Scale: <span id="scale">1.2000</span> ]</label>
	<canvas id="canvas" width="1200" height="600"></canvas>

xav76 / index.html

Created October 24, 2012 17:14

A CodePen by Ben Markowitz. That's No Moon! - Webkit 3D transforms, Keyframe Animation, and JQuery used to create a 3D blueprint of the Death Star. Probably only works in Safari/Chrome.

	<div id="wrapper">
	<div id="container">
	<div id="output"></div>
	<div id="star">
	<div class="trench_wall north"></div>
	<div class="trench_wall"></div>
	<div class="trench_wall south"></div>
	</div>
	</div><!-- container -->
	</div><!-- wrapper -->

xav76 / index.html

Created October 24, 2012 17:14

A CodePen by Hugo Giraudel. CSS kaleïdoscop - A small pen to try with SASS for loops, HSLa and Zen Coding. ALL IN ONE ! Plus a colorful result. :P

	<ul>
	<li class="a-1"></li>
	<li class="a-2"></li>
	<li class="a-3"></li>
	<li class="a-4"></li>
	<li class="a-5"></li>
	<li class="a-6"></li>
	<li class="a-7"></li>
	<li class="a-8"></li>
	<li class="a-9"></li>

xav76 / index.html

Created October 24, 2012 17:12

A CodePen by Hakim El Hattab. Magnetic - An old <canvas> particle experiment of mine.

	<p>Double-click to add new nodes. Drag to move them. <br>Change skin: <a id="prevSkin" href="#">Previous</a> / <a id="nextSkin" href="#">Next</a>.</p>

	<canvas id='world'></canvas>