Ruslan2230

/**
 * Example to show off inline CSS highlighting
 */

Ruslan2230

/**
 * Extending the hit area — with generated content
 */

button {
	position: relative;
	padding: .3em .5em;
	background: #58a;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.3);

Ruslan2230

/**
 * Fancy Ampersands
 */

@font-face {
	font-family: Ampersand;
	src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Garamond-Italic'), local('Palatino-Italic');
	unicode-range: U+26;
}

Ruslan2230

/**
 * Ligatures
 */

body {
	font: 200%/1.6 "Adobe Caslon Pro", Baskerville, serif;
	font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
}

Ruslan2230

/**
 * Adjusting tabs
 */

pre { 
	padding: .5em;
	line-height: 1.5;
	background: hsl(20, 50%, 95%);
	font-family: Consolas, Monaco, monospace;
}

Ruslan2230

/**
 * Zebra striped text lines
 */

pre { 
	padding: .5em;
	line-height: 1.5;
	background: hsl(20, 50%, 95%);
	background-image: linear-gradient(
	                  rgba(120,0,0,.1) 50%, transparent 0);

Ruslan2230

/**
 * Inserting line breaks
 */
 
dt, dd {
	display: inline;
	margin: 0;
}

dd {

Ruslan2230

/**
 * Hyphenation
 */

width: 8.7em;
font: 180%/1.4 Baskerville, serif;
text-align: justify;
hyphens: auto;

Ruslan2230

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

Ruslan2230

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