gcyrillus

/* radio and :checked*/
div  div {display:none;padding:1em;margin:1em;border:solid;overflow:hidden;min-height:4em;}
:checked[id="aI"] ~ div #l0,
:checked[id="bI"] ~ div #l1,
:checked[id="cI"] ~ div #l2,
:checked[id="dI"] ~ div #l3,
:checked[id="eI"] ~ div #l4
 {display:block;}
:checked[id="aI"] ~ ul label[for="aI"],
:checked[id="bI"] ~ ul label[for="bI"],

gcyrillus

/* radiant avec box-shadow et background*/
div {margin:1em;text-align:center;line-height:100px;}
.button {
    width: 100px; height: 100px;
    padding: 8px;
    border-radius: 100px;
    box-shadow: 0 0.8px 8px rgba(0,0,0,.3);
   background-image: radial-gradient(center,  #8CE2FB 0, #52D2F8  50px, white 52px , white );/* safari ? */
   background-image: radial-gradient(circle at center,  #8CE2FB 0, #52D2F8  52px, white 52px , white ); /* newest */

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

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

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

gcyrillus

/* boxes , image  & ribbon */
html {
	font-size:1.2em;/* rezize font-size to see */
	background:#333;
	}
body {
	text-align:center;
}
aside {
	display:inline-table; 

gcyrillus

/* vertical-horizontal-centering , display through CSS 2.1 or 3 if understood by browser 
this include I8 and above, opera, FF, Saf, Ch, etc ... */
html,body {
display:table; 					/* today */
display:flex;  					/* tomorrow & only for body */
height:100%;					/* today & tomorrow */
width:100%;						/* today only */
margin:0;}
body {
display:table-cell;				/* today */

gcyrillus

/* center legend */
legend {font-size:30px;
    font-weight:400;
    border-bottom:#e45f56 solid 5px; 
    margin-left:35.7%;
    }
form { color:#666;
    width:310px;
    text-align:center;
    }