csssecrets

/**
 * Taming table column widths
 */

body { background: #ddd }

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

csssecrets

/**
 * Translucent borders
 */

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

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

csssecrets

/**
 * Multiple borders
 */

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

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

/**
 * 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 calc()
 */

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

csssecrets

/**
 * Horizontal stripes
 */

background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;

csssecrets

/**
 * Vertical stripes
 */

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 20px 100%;

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

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

background: repeating-linear-gradient(60deg, 
              #fb3, #fb3 15px,
              #58a 0, #58a 30px);

height: 100%;