gcyrillus

/* Chess board CSS3  */
html {width:100%;height:100%;display:table;}
body {perspective: 500px;transform-style: preserve-3d;
display:table-cell;height:100%;vertical-align:middle;}
.eaten {width:411px;;height:2.8em;border:1px solid;margin:0 auto;font-size:25px;}
.eaten span {display:inline-block;transform : rotate(-45deg);}
table {position:relative;
perspective: 500px;
transform-origin: 0% 5%;
transform: rotatex(40deg) rotatey(0deg) rotatez(0deg) ;

gcyrillus

/* metro alike but not ? */
html {
	background-color:#45a;
	height:100%;
	padding:9% 5% 2%;
	box-sizing:border-box;
}
body {
	height:100%;
	column-width:324px;

gcyrillus

/* keyhole  */
html {
padding-top:3em;
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;}
div {float:left;
width:150px;
padding:20px;
margin:20px;

gcyrillus

/* basic layout, defilement horizontal avec effet de parallax  */

figure {
	overflow:auto;
	white-space:nowrap;
}
figure div {
	display:inline-block; 
	width:100%;
	text-align:center;

gcyrillus

/**
 * How do I position a link relatively to background-image with background-size contain?
 */

html, body {
    height: 100%;width:100%;display:table;
}

body {
    background: #fff url(http://www.apple-weblog.de/wp-content/uploads/2007/10/Leopard.jpg) no-repeat center center;

gcyrillus

/* original accordeon layout full page 2contents */
html,body, body > section {height:100%;margin:0 auto;}
article {height:100%;}
h1 {height:20%;margin:0;text-align:center;}
h1 a {padding:1em;display:inline-block;}
article section:first-of-type {height:60%;}
section ~ section {height:0;}
article > h1,article > section {position:relative;top:0;transition:1s;overflow:auto;}
:target , section + :focus, 
:target + section, section + :focus + section {top:-60%;}

gcyrillus

/* Chess board CSS3  3d buggy in chrome*/
html {width:100%;height:100%;display:table;}
body {perspective: 500px;transform-style: preserve-3d;
display:table-cell;height:100%;vertical-align:middle;}
.eaten {width:411px;;height:2.8em;border:1px solid;margin:0 auto;font-size:25px;}
.eaten span {display:inline-block;transform : rotate(-45deg);}
table {position:relative;
perspective: 500px;transform-style: preserve-3d;
transform-origin: 0% 5%;
transform: rotatex(40deg) rotatey(0deg) rotatez(0deg) ;

gcyrillus

/* cow fences 
 3d sign */
html {min-height:100%;
background:
linear-gradient( 0deg,transparent 0, #333 0px, #888,transparent 4px, transparent 1em),
linear-gradient(-45deg,transparent 0, #555 2px, transparent 5px , transparent 4em, transparent 8em),
linear-gradient(45deg,transparent 0, #333 2px, transparent 5px , transparent 4em, transparent 8em),
linear-gradient( 91deg,transparent 0.55em, #930 0.65em,#c63, #930 1.25em, transparent 1.45em, transparent 5em),
linear-gradient( 89deg,transparent 0.55em, #930 0.65em,#c63, #930 1.25em, transparent 1.45em, transparent 5em);
background-position:  0 0 ,  2em 0;

gcyrillus

/* column  CSS, fallback IE = inline-block; */
body {
width:600px;
column-width:290px;
column-count:2;
text-align:center;
margin:auto;
}
div {display:inline-block;background:rgba(255,255,255,0.8);
width:280px;padding:5px;

gcyrillus

/*  preserve3d for a fake box */
html {
display:table;
width:100%;height:100%;
background: #f06;
background: linear-gradient(45deg, yellow, #f06);min-height: 100%;
}
body {
display:table-cell;
vertical-align:middle;