Ruslan2230

/**
 * One-sided shadow
 */

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

Ruslan2230

/**
 * One-sided shadow
 */

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

Ruslan2230

/**
 * One-sided shadow
 */

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

Ruslan2230

/**
 * Pie charts — with SVG
 */

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

Ruslan2230

/**
 * Static pie charts
 */

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

Ruslan2230

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

Ruslan2230

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

Ruslan2230

/**
 * Trapezoid tabs
 */

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

nav {

Ruslan2230

/**
 * Beveled corners — with border-image and an inline SVG
 */

div {
	border: 21px solid transparent;
	border-image: 1 url('data:image/svg+xml,\
	                      <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\
	                      <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\
	                      </svg>');

Ruslan2230

/**
 * Scoop corners
 */

div {
	background: #58a;
	background:	radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
	            radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
	            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
	            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;