csssecrets

/**
 * Subtle stripes
 */

background: #58a;
background-image: repeating-linear-gradient(30deg, 
              hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
              transparent 0, transparent 30px);

height: 100vh;

csssecrets

/**
 * Inner rounding
 */

div {
	outline: .6em solid #655;
	box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
	
	max-width: 10em;
	border-radius: .8em;

csssecrets

/**
 * Blueprint grid
 */

background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
                  linear-gradient(90deg, white 2px, transparent 0),
                  linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
                  linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,

csssecrets

/**
 * Polka dot
 */

background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
                  radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

csssecrets

/**
 * Vertical stripes
 */

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

csssecrets

/**
 * Checkerboard
 */

background: #eee;
background-image: 
	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

csssecrets

/**
 * Pseudorandom stripes
 */

background: hsl(20, 40%, 90%);
background-image: 
	linear-gradient(90deg, #fb3 11px, transparent 0),
	linear-gradient(90deg, #ab4 23px, transparent 0),
	linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;

csssecrets

/**
 * Vintage envelope themed border
 */

div {
	padding: 1em;
	border: 1em solid transparent;
	background: linear-gradient(white, white) padding-box,
	            repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, 
	              #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;

csssecrets

/**
 * Vintage envelope themed border via border-image
 */

div {
	padding: 1em;
	border: 16px solid transparent;
	border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
	              #58a 0, #58a 3em, transparent 0, transparent 4em);
	

csssecrets

/**
 * Continuous image borders
 */

div {
	border: 1em solid transparent;
	background: linear-gradient(white, white) padding-box,
	            url(http://csssecrets.io/images/stone-art.jpg) border-box  0 / cover;
	
	/* Styling & enable resize */