csssecrets

/**
 * Irregular drop-shadows
 */

div {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: bottom;

csssecrets

/**
 * One-sided shadow
 */

div {
	width: 1.6in;
	height: 1in;
	background: #fb3;
	box-shadow: 5px 0 5px -5px black,
	           -5px 0 5px -5px black;

csssecrets

/**
 * One-sided shadow
 */

div {
	width: 1.6in;
	height: 1in;
	background: #fb3;
	box-shadow: 3px 3px 6px -3px black;
}

csssecrets

/**
 * One-sided shadow
 */

div {
	width: 1.6in;
	height: 1in;
	background: #fb3;
	box-shadow: 0 5px 4px -4px black;
}

csssecrets

/**
 * Pie charts — with SVG
 */

.pie {
	width: 100px;
	height: 100px;
	display: inline-block;
	margin: 10px;
	transform: rotate(-90deg);

csssecrets

/**
 * Static interpolation via paused animations
 * This technique becomes more useful if you need to interpolate more than 1 properties, and/or if you need multiple values in the spectrum
 * Currently works in every modern browser except Safari
 */

@keyframes foo {
	from { background: red }
	to { background: yellowgreen }
}

csssecrets

/**
 * Static pie charts
 */

.pie {
	display: inline-block;
	position: relative;
	width: 100px;
	line-height: 100px;
	border-radius: 50%;

csssecrets

/**
 * Animated pie chart
 */

.pie {
	width: 100px; height: 100px;
	border-radius: 50%;
	background: yellowgreen;
	background-image: linear-gradient(to right, transparent 50%, currentColor 0);
	color: #655;

csssecrets

/**
 * Trapezoid tabs
 */

body {
	padding: 40px;
	font: 130%/2 Frutiger LT Std, sans-serif;
}

nav {

csssecrets

/**
 * Diamond images — via clip-path
 */

img {
	max-width: 250px;
	margin: 20px;
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition: 1s;