xav76’s gists

xav76 / index.html

Created October 23, 2012 19:07

A CodePen by Neil Carpenter. Fly in, fly out - Text effect animations

	<html>

	<body>

	<p>fly in, fly out</p>

	</body>

	</html>

xav76 / index.html

Created October 23, 2012 19:08

A CodePen by Adem ilter. Navigation Knob - Pure CSS3, no image, no js, no woman, no cry :p —design by Piotr Kwiatkowski http://drbl.in/eXBR


	<div class="container">

	<!-- OUTER SHADOW -->
	<div class="de">

	<!-- TEXT -->
	<div class="den">

	<!-- LINE -->

xav76 / index.html

Created October 23, 2012 19:08

A CodePen by Tim Holman. Draw worm - Click to clear the screen. Interactive Javascript demo ported from flash experiment by nutsu: http://wonderfl.net/c/9os2

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

	<!--

	Click to clear the canvas

	-->

xav76 / index.html

Created October 23, 2012 19:08

A CodePen by Tim Holman. Draw worm - Click to clear the screen. Interactive Javascript demo ported from flash experiment by nutsu: http://wonderfl.net/c/9os2

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

	<!--

	Click to clear the canvas

	-->

xav76 / index.html

Created October 23, 2012 19:09

A CodePen by Jason Brown. CSS animated waves - messing around with making waves using css3 rather than JS. Its a bit different than you might expect. Pieces of the sky are actually moving.

	<div id="ocean">

	</div>

xav76 / index.html

Created October 23, 2012 19:27

A CodePen by Fabrice Weinberg. CSS Digital Clock - The digits are all done in pure CSS (linear-gradient + multiply backgrounds) Hope you like it. Using JS only to make it show the correct time.

	<span class="digit"></span>
	<span class="digit"></span>

	<span class="colon"></span>

	<span class="digit"></span>
	<span class="digit"></span>

	<span class="colon"></span>

xav76 / index.html

Created October 24, 2012 11:29

A CodePen by Robert Lemon. CSS Neon Lights Demo - using text-shadow and keyframe animations to produce neon light effect. Javascript to enable it and hide the button.

	<div class="title">Neon Lights</div>
	<div class="content">
	<span id="switch">Turn em on</span>
	<h1 id="lights">rlemon's diner<br />$4.95 a plate!</h1>
	</div>

xav76 / script.js

Created October 24, 2012 11:31

A CodePen by Jason Brown. Random card shuffle thing. - Just a random thing I did with some spare time. Thanks to rlemon (@TheGreatRupert) for the idea about using data-attributes in the css.

	var cards = [];

	function initDeck(){
	for(var cardNum = 1; cardNum < 14; cardNum++){
	for(var i = 0; i < 4; i++){
	var suit = i;
	switch(i){
	case 0:
	suit = "\u2665";
	break;

xav76 / index.html

Created October 24, 2012 11:32

A CodePen by Jeff Powers. Pure CSS Ribbon - A Clean, Simple, CSS Ribbon.

	<div id="ribbon">
	<span id="content">Hello There</span>
	</div>

xav76 / index.html

Created October 24, 2012 11:33

A CodePen by Tristan. Pipes - Just like the old windows screen saver!