csssecrets

/**
 * Text on a circle
 */

body {
	font: bold 120% Helvetica, sans-serif;
}

.circular {
	width: 30em;

csssecrets

/**
 * Parallelograms — with pseudoelements
 */

.button {
	position: relative;
	display: inline-block;
	padding: .5em 1em;
	border: 0; margin: .5em;
	background: transparent;

csssecrets

/**
 * Diagonal stripes - linear-gradient() method
 */

background: linear-gradient(45deg, 
              #fb3 25%, #58a 0, #58a 50%,
              #fb3 0, #fb3 75%, #58a 0);
background-size: 42.4px 42.4px;

csssecrets

/**
 * Interactive image comparison - with CSS resize
 */

.image-slider {
	position:relative;
	display: inline-block;
}

.image-slider > div {

csssecrets

/**
 * Translucent borders
 */

body {
	background: url('http://csssecrets.io/images/stone-art.jpg');
}

div {
	border: 10px solid hsla(0,0%,100%,.5);

csssecrets

/**
 * Vertical centering - absolute positioning method
 */

main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	

csssecrets

/**
 * Typing animation
 */

@keyframes typing {
	from { width: 0 }
}

@keyframes caret {
	50% { border-right-color: transparent; }

csssecrets

/**
 * Bouncing animation
 */

@keyframes bounce {
	60%, 80%, to {
		transform: translateY(400px);
		animation-timing-function: ease;
	}
	70% { transform: translateY(300px); }

csssecrets

/**
 * Flexible quarter ellipse
 */

div {
	display: inline-block;
	width: 16em;
	height: 10em;
	margin: 1em;
	background: #fb3;

csssecrets

/**
 * Custom checkboxes
 */

input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
}

input[type="checkbox"] + label::before {