fazlurr

/**
 * Color tinting images 
 * Important: Blending modes need to be enabled (Chrome: Experimental Web Platform Features flag, Firefox: layout.css.background-blend-mode.enabled pref)
 * Photo: https://flickr.com/photos/tangledcontrolpads/246642987
 */

height: 100vh;
background: url('https://c1.staticflickr.com/1/85/246642987_df591a5a33_b.jpg') no-repeat center hsl(335, 100%, 50%);
background-size: cover;
background-blend-mode: luminosity;

fazlurr

/* 
   Demo of shape-outside: border-box; by Lea Verou
   Original CSS Shapes demo by Sara Soueidan 
 */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400);

.demo {
	margin: 50px auto;
	width: 100%;

fazlurr

/**
 * Beveled corners & negative border-radius with CSS gradients
 */

div {    
	background: #c00; /* fallback */
	background:
		linear-gradient(135deg, transparent 10px, #c00 0) top left,
		linear-gradient(225deg, transparent 10px, #c00 0) top right,
		linear-gradient(315deg, transparent 10px, #c00 0) bottom right,

fazlurr

/* Gradient cheatsheet */
background: linear-gradient(45deg, white, black);
background: linear-gradient(to right, white 50%, red, black);
background: linear-gradient(to bottom right, white 50px, black);
background: repeating-linear-gradient(to bottom left, white, black 30px);

background: radial-gradient(at top right, white, black);
background: radial-gradient(circle at top right, lime 50%, black 0);
background: radial-gradient(farthest-corner at center, red 80%, black);
background: radial-gradient(farthest-side at center, yellow 80%, black);

fazlurr

/**
 * Flexbox playground
 */

body {
	margin: 0;
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	align-content: stretch;

fazlurr

/**
 * Animation on hover (right way)
 */

div {
	width: 9em;
	padding: .6em 1em;
	margin: 2em auto;
	background: yellowgreen;
	animation: spin 1s linear infinite;

fazlurr

/**
 * Animation on hover (wrong way)
 */

div {
	width: 9em;
	padding: .6em 1em;
	margin: 2em auto;
	background: yellowgreen;
}

fazlurr

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

fazlurr

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

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

fazlurr

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