schadeck

Example Page for gist.io

var somecode = code;

A basic example of a jQuery powered lightbox with a fade slideshow.

	/**
	* Easy trapezoids with 3D transforms
	*/

	p {
	position: relative;
	display: inline-block;
	padding: 1em;
	margin: 2em;
	}

	/**
	* Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
	* Caveat: Not DRY. The content needs to be repeated in a data- attribute (or directly in the CSS).
	*/

	body {
	background: #ccc51c;
	min-height: 100%;
	}

	<div class="container">
	<div id="slides">
	<div>
	<img src="http://placehold.it/600x300/c66/fff&text=[slide+1]" width="100%" alt=""/>
	</div>
	<div>
	<img src="http://placehold.it/600x300/6c6/fff&text=[slide+2]" width="100%" alt=""/>
	</div>
	<div>
	<img src="http://placehold.it/600x300/36a/fff&text=[slide+3]" width="100%" alt=""/>

	/**
	* Circular Tooltip (SO)
	* http://stackoverflow.com/q/13132864/1397351
	*/
	* { margin: 0; padding: 0; }
	body {
	overflow: hidden;
	background: url(http://theearlcarlson.com/experiments/amTooltip/img/bg.jpg);
	}
	/* generic styles for button & circular menu */

	/**
	* Circular Tooltip (SO)
	* http://stackoverflow.com/q/13132864/1397351
	*/
	* { margin: 0; padding: 0; }
	body {
	overflow: hidden;
	background: url(http://theearlcarlson.com/experiments/amTooltip/img/bg.jpg);
	}
	/* generic styles for button & circular menu */

	/**
	* demo to explain chained transforms
	*/
	* { margin: 0; }
	.wrap, .wrap * { display: block; width: 4em; height: 4em; }
	.wrap { outline: dashed 1px dodgerblue; margin: 13em auto 0; }
	.deg45 {
	position: absolute;
	animation: ani 8s infinite;
	}

	/**
	* Using overflow: hidden to prevent text wrapping around a floated element
	*/
	div { width: 400px; margin: 25px auto; }
	img { float: left; margin-right: 1em; }
	span { display: block; overflow: hidden; }