mykelsoft

/**
 * Pie charts — with SVG
 */

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

mykelsoft

/**
 * One-sided shadow
 */

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

mykelsoft

/**
 * One-sided shadow
 */

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

mykelsoft

/**
 * One-sided shadow
 */

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

mykelsoft

/**
 * Irregular drop-shadows
 */

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

mykelsoft

/**
 * Color tinting — with filters
 */

img {
	max-width: 640px;
	transition: 1s filter, 1s -webkit-filter;
	-webkit-filter: sepia() saturate(4) hue-rotate(295deg);
	filter: sepia() saturate(4) hue-rotate(295deg);
}

mykelsoft

/**
 * Color tinting — with filters
 */

img {
	max-width: 640px;
	transition: 1s filter, 1s -webkit-filter;
	-webkit-filter: sepia() saturate(4) hue-rotate(295deg);
	filter: sepia() saturate(4) hue-rotate(295deg);
}

mykelsoft

/**
 * Color tinting — with blending modes
 */

.tinted-image {
	width: 640px; height: 440px;
	background-size: cover;
	background-color: hsl(335, 100%, 50%);
	background-blend-mode: luminosity;
	transition: .5s background-color;

mykelsoft

/**
 * Frosted glass effect
 */

body {
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0;
	padding-top: calc(50vh - 6em);
	font: 150%/1.6 Baskerville, Palatino, serif;

mykelsoft

/**
 * Folded corner effect
 */

div {
	width: 12em;
	background: #58a; /* Fallback */
	background:
		linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat,
		linear-gradient(-135deg, transparent 1.5em, #58a 0);