csssecrets

/**
 * Flexible background positioning
 * via extended background-position
 */

div {
	background: url(http://csssecrets.io/images/code-pirate.svg)
	            no-repeat bottom right #58a;
	background-origin: content-box;
	

csssecrets

/**
 * Flexible background positioning
 * via extended background-position
 */

div {
	background: url(http://csssecrets.io/images/code-pirate.svg)
	            no-repeat bottom right #58a;
	background-position: right 20px bottom 10px;
	

csssecrets

/**
 * Multiple borders
 */

div {
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	box-shadow: 0 0 0 10px #655,

csssecrets

/**
 * Translucent borders
 */

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

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

csssecrets

/**
 * Taming table column widths
 */

body { background: #ddd }

section {
	width: 500px;
	margin: 2em;
	background: white;

csssecrets

/**
 * Intrinsic sizing
 */

figure {
	max-width: 300px;
	max-width: min-content;
	margin: auto;
}

csssecrets

/**
 * Sticky footer with flexible height
 */
 
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

csssecrets

/**
 * Sticky footer with fixed height
 */
 
main {
	min-height: calc(100vh - 5em - 7em);
}

/* Toggle checkbox to alternate between short/long content */
#contents:checked ~ p { display: none }

csssecrets

/**
 * Vertical centering - Flexbox solution for text
 */

body {
	display: flex;
	align-items: center;
	min-height: 100%;
	margin: 0;
}

csssecrets

/**
 * Vertical centering - Flexbox solution
 */

* { margin: 0 }

body {
	display: flex;
	min-height: 100vh;
}