jupegarnica

/**
 * Overlapping shadows?
 */

font: bold 600% 'Open sans',sans-serif;
letter-spacing: -.2em;
text-decoration: line-through underline;
text-shadow: 1em 1em rgba(0,255,255,.2);

jupegarnica

/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */
 
@keyframes spin {
	to {
		stroke-dashoffset: -264;
	}
}

jupegarnica

/**
 * Just for fun™: Flickr spinner in pure CSS
 */

@keyframes move {
	to { left: 50%; }
}

@keyframes cover {
	from,49.9% { z-index: 1 }

jupegarnica

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

jupegarnica

/**
 * Reversing animation on mouse-out
 * Issues: Animation will also play in the beginning
 */

@keyframes test {
	from { background: white }
	to { background: black }
}

jupegarnica

/**
 * Testcase for nested @media rules
 * Does not work in Safari 6- (& mobile Safari), IE10-. Seems to work everywhere else, including Safari 6.1.
 */

body { background: red }

@media screen {
	body { background: yellow }
	

jupegarnica

/**
 * Refactor of the WPD breadcrumbs bar based on the idea by @wernull
 */

ol.breadcrumbs {
   margin: 0 0 0 -1.1em;
   padding: 0;
   height: 1em;
   text-transform: uppercase;
   float: left;

jupegarnica

/**
 * CSS transitions on stroke-dasharray
 */

circle {
	stroke: red;
	stroke-width: 10;
	stroke-dasharray: 20, 20;
	transition: 1s;
}

jupegarnica

/**
 * Flags (In progress!)
 */
 
@font-face {
	font-family: 'WPSymbols';
	src: url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.woff') format('woff'),
		 url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.ttf') format('truetype');
}
 

jupegarnica

/**
 * in a box
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

/* natural motion demos */
.natural-motion{