kyoo119

var a = 1;

kyoo119

/**
 * Border clipping with border-image
 * Support: Chrome, Opera, Safari, Firefox. Cannot get it to work in IE11, even though it supports border-image…
 * Note: In CSS Backgrounds & Borders 4, there will be a property to clip borders (likely called border-clip). Until then though…
 * Author: Lea Verou
 */

div {
	border-top: .2em solid; /* Sets the thickness, also serves as fallback when no border-image */
	border-image: 100% 0 0 linear-gradient(90deg, currentColor 5em, transparent 0); /* 5em is the width of clipped border */

kyoo119

{
	"cssconf": {
		"location": {
			"date": "September 12, 2014",
			"country": "Germany",
			"city": "Berlin",
			"venue": "Radialsystem V",
			"lat": 52.51039,
			"long": 13.42864
		},

kyoo119

/**
 * angled rounded border (SO)
 * http://stackoverflow.com/questions/10684524/how-do-i-make-a-slated-rounded-border-on-a-html-element/10684564#10684564
 */
body {
	padding: 125px 9px;
	background: #e9e9f3;
}
h1 {
	min-width: 150px;

kyoo119

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

kyoo119

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

kyoo119

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

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

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

kyoo119

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

kyoo119

/* Circular path CSS lol */

.circular {
	display: block;
	margin: 40px auto;
	font: 63px sans-serif;
	padding-top: 0;
	padding-left: 4.2em;
	width: 3.4em;
	height: 8em;

kyoo119

/* Pounding heart animation */

@keyframes pound {
	to { transform: scale(1.4); }
}

.heart {
	display: inline-block;
	font-size: 150px;
	color: #e00;