loai-kanou

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

loai-kanou

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

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

loai-kanou

/**
 * Playing with background-attachment
 */

pre {
	max-height: 150px;
	border: 1px solid silver;
	overflow: auto;
	border: 10px dotted red;
	background: url('http://placedog.com/200/200');

loai-kanou

/**
 * CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
 */

li {
	list-style: none;
	display: inline-block;
	padding: 1em 2em 1em 1em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 0 999px 999px 0;

loai-kanou

/**
 * Flexible buttons with ems (duh!)
 */

body {
	font-family: sans-serif
}

button {
	padding: .5em .8em .4em;

loai-kanou

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

loai-kanou

/**
 * Standardization status
 */

body {
	background: #f9f7f3;
	font-size: 14px;
}

/* Don't copy this rule, it’s just for the demo */

loai-kanou

/**
 * Overlapping shadows?
 */

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

loai-kanou

/**
 * Overflow border-radius (Gecko bug)
 */

div {
	background: deeppink;
	width: 400px;
	height: 300px;
	border-radius: 9999999999999999999999999999999999px
}

loai-kanou

/**
 * border-radius computed style test
 */

div {
	width: 200px;
	height: 100px;
	padding: 2.4em 0;
	box-sizing: border-box;
	background: deeppink;