schadeck

schadeck

/**
 * (C)Leanest CSS spinner ever
 */

@keyframes spin {
	to { transform: rotate(1turn); }
}

.progress {
	position: relative;

schadeck

(function () {
	function define(object, properties) {
		for (var property in properties) !(property in object) && Object.defineProperty(object, property, { get: properties[property], enumerable: true });
	}

	define(Element.prototype, {
		width: function () {
			return this.getBoundingClientRect().width;
		},
		height: function () {

schadeck

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

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

schadeck

/**
 * Slanted tabs with CSS 3D transforms
 * See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
 */

body { padding: 50px; }

nav {
	position: relative;
	z-index: 1;

schadeck

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

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

schadeck

/**
 * 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%;
}

schadeck

/**
 * 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 */

schadeck

/**
 * 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;
}

schadeck

.slider {
	/* set initial width */
	width: 520px;
		   
	/* hide the content that overflows (to allow second box to show through) */
	overflow: hidden;
	display: inline-block;
		   
	/* skew container so that it has angled edge, and set up transition */
	transform: skewX(-20deg);