gcyrillus

/* by gcyrillus, another legend, a mythe */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
form {margin:1em ;}
.after legend:after, legend {width:450px;}
legend {text-align:center;line-height:0;}
.bis-justify legend {text-align : justify;}

gcyrillus

/* By gcyrillus : fake flexbox justified */
#conteneur {text-align:justify;}
h1 {text-align:center;margin:0;}
#colonne1, #colonne2, #clear {display:inline-block;margin:0}
#colonne1, #colonne2  {width:49%;vertical-align:middle;}
#clear {width:100%;}

/* extra - correction */
#conteneur {margin:1em auto;width:70%;background:rgba(0,0,0,0.05);padding:0 0.5em;}
#colonne1, #colonne2  { margin-bottom:-2em}

gcyrillus

/* triangled links , by gcyrillus . transform and perspective could achieve this as well */
ul  {width:40px;list-style-type:none;padding:0;margin:2em auto;transform:scale(2);transform-origin:top;}
li {overflow:hidden;width:40px;margin:0 0 -40px 0 ; }
li:nth-child(even) { }
a {
float:left;
height:80px;
width:80px;
background:red;
margin:0 0 0  -60px  ;

gcyrillus

/* GCYRILLUS : experiment on background & transition over the window */
body {
	margin:0;
	padding:0;
}
 
#wrapper {
    width:100%;
    height:100%;
    position:absolute;

gcyrillus

/* GCYRILLUS : experiment on background & transition over the window */
body {
	margin:0;
	padding:0;
}
 
#wrapper {
    width:100%;
    height:100%;
    position:absolute;

gcyrillus

/**
 * by gcyrillus
 */
html {
background: url(http://doc-css.com/img/un.png)
top left no-repeat;
min-height:100%;
animation: bghtml  0.75s  infinite ;
}
@keyframes bghtml {

gcyrillus

/* Menu Déroulant sans float CSS3 et centré , GCyrillus */

/* Base CSS sans float et centrage du menu */
ul#menu-gc {
	display:table; /* contexte de formatage : alternative = inline-block */
	margin:auto;   /* centrage pour element similaire a block, si inline-block, alors text-align:center; sur le parent  */
	padding:0;		/* reset marge interne */
	}
#menu-gc li {
	display:inline-block; /* alternative à float avec contexte de formatage */

gcyrillus

/* Menu Déroulant sans float CSS3 et centré , GCyrillus */

/* Base CSS sans float et centrage du menu */
ul#menu-gc {
	display:table; /* contexte de formatage : alternative = inline-block */
	margin:auto;   /* centrage pour élément similaire a block, si inline-block, alors text-align:center; sur le parent  */
	padding:0;		/* reset marge interne */
	}
#menu-gc li {
	display:inline-block; /* alternative à float avec contexte de formatage */

gcyrillus

/* CSS3 Carrousel by Gcyrillus
no typo, no js involved ... usable in modern browsers of course :)
 */

#my-sliding-box {width:506px;margin:0 auto;overflow:hidden;
}
#my-slider {
width:400px;height:208px;border:solid;overflow:hidden;
margin:4em auto 0;white-space:nowrap;text-align:right;
vertical-align:top;border-radius:1em;padding:0 50px 1em;

gcyrillus

/* CSS img rollover gcyrillus . no js involved . It's kind of a mixed of ir an sprites :P */

 .reseau a img {
  background-image : url(http://dribbble.s3.amazonaws.com/users/904/screenshots/511628/social-sprite.jpg);
  height : 0; 
  width : 0;
  padding:16px;
}
#fb {
  background-position : -145px -4px;