Ruslan2230

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

Ruslan2230

/**
 * Vertical stripes
 */

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

Ruslan2230

/**
 * Horizontal stripes
 */

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

Ruslan2230

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

Ruslan2230

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

Ruslan2230

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

Ruslan2230

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

Ruslan2230

/**
 * Multiple borders
 */

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

Ruslan2230

/**
 * Translucent borders
 */

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

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

Ruslan2230

/**
 * Responsive tables with element()
 * Pros: No markup changes, works with normal table markup, no content duplication
 * Cons: element() is only implemented in Firefox :(
 */

@media (max-width: 600px) {
	table, tr, td, th, thead, tbody {
		display: block;
	}