gcyrillus

/* basic layout, defilement horizontal */

nav {float:left;}
article {overflow:auto;white-space:nowrap;}

/* makup */
html {display:table;height:100%;width:100%;table-layout:fixed;}
body {display:table-cell;vertical-align:middle;
text-shadow:-1px -1px 0px #999;
background:gold;background:

gcyrillus

/* elastic , rubber menu */
p#nav {text-align:justify;background:#48a;
box-shadow:
inset 0   0    0     1px #aaa,
    0  40px  1px -38px #6CD000, 
    0 -40px  1px -38px #6CD000, 
-23px     0  1px -20px #6CD000, 
 23px     0  1px -20px #6CD000,
    0  40px  1px -34px #48a, 
    0 -40px  1px -34px #48a, 

gcyrillus

/* gradient in content(Chrome) or background & responsive via em */
html {height:100%;width:100%;display:table;text-align:center;font-size:20px;}
body {display:table-cell;height:100%;vertical-align:middle;
background:
repeating-linear-gradient(-45deg,gray 0,gold,gray,gold,gray 4em) repeat-y top right, 
repeating-linear-gradient( 45deg,gray 0,gold,gray,gold,gray 4em) repeat-y top left,
linear-gradient(0deg,gray,gold,gray);position:relative;
padding:0 2.5em;
background-size:2em 2em,2em 2em ,100%}
body:before{content:repeating-linear-gradient(25deg,gray 0,gold,gray,gold,gray 4em);

gcyrillus

/* scalable, reponsive image map + font-size so are em values for radius & shadow*/
html {
font-size:30px;
min-height:100%;
background:linear-gradient(0deg, transparent,gray);}
p , h1{text-align:center;
position:relative;text-shadow:1px 1px #999
}
.image_map  {
width:640px;height:480px;

gcyrillus

/* Resize image <map> : apply and change background <area> for webkit */
div {display:inline-block;position:relative;border-radius:1em;border:inset #333;
box-shadow:0 0 5px #fff;height:800px;width:1300px;overflow:hidden;}
div p {height:25%;width:25%;position:absolute;z-index:3;top:0;left:0;padding:10px;margin:0;background:purple;color:white;font-size:1.5em;box-shadow:0 0 500px 30px gold, 0 0 800px 100px white;border-radius:0 0 1em 0 ;border-right:outset #333;border-bottom:outset #333}
img {display:block;margin:0 auto;}
div > img {position:absolute;top:0}

html {
background: #f06;
background: linear-gradient(45deg, #159, turquoise);

gcyrillus

/* column css, exemple pour 1 topic */
body {
column-width:300px;
column-rule:dashed 1px gray;
column-gap:1em;
column-fill:balance;
width:80%;
margin:0 auto;
padding:0 1em;
background:ivory;

gcyrillus

/* px, pt, em, tronquage sur x lignes et fond a l'echelle */
body {background:gray;font-size:85%;text-shadow:1px 1px #444;color:orange;font-weight:bold;text-align:justify;}
p {width:30em;margin:1em auto;padding:0 0.25em;
line-height:1.4em;
max-height:4.2em;/*  1.4em X3 = 3 lignes = 4.2em */
border:solid;
overflow:hidden;
background:repeating-linear-gradient(180deg, transparent 0, transparent 1.3em, #159 1.3em, #159 1.4em) ,linear-gradient(-15deg,turquoise,#159)
}
h1 {color:white;background:#48a;margin:1em auto;box-shadow:0 0 15px gold;;padding:0.5em;width:80%;text-align:center;}

gcyrillus

/* basic pied de page glissant en HTML5  avec 4 selecteur et 10 regles */
html {height:100%;}
body {margin:0;min-height:100%;position:relative;}
footer {position:absolute;width:100%;bottom:0;left:0;height:2em;}
section {margin-bottom:2em;}
/* ============================================
Le principe est d'un élément en position relative dans lequel on place un autre element en position absolute
!IMPORTANT! PENSEZ feuille de style => heritage en cascade et flux du document 

1) html en height:100%; reference de la hauteur de la fenêtre.

gcyrillus

/* bascic loading for iframe */
.ifrHold {display:table;margin:3em auto;position:relative;border:solid;
background:linear-gradient(0deg,turquoise,purple);}
.ifrHold:before {content:"LOADING";position:absolute;width:100%;text-align:center;top:40%;font-size:4em;}
iframe {width:900px;height:600px;opacity:1;animation: 10s showifr;position:relative;z-index:1}
@keyframes showifr {
0% {opacity:0}
100% {opacity:1;}
}

gcyrillus

/* glossy kitch menu or not */
nav {text-align:center;margin:3em auto;opacity:0.95}
ul {margin:0;padding:0.5em;text-align:left;}
ul , li {display:inline-block;}
ul {font-size:2em;background:#dE6B26;border-radius:0.5em;
box-shadow:inset 10px 10px 5px #EE9A6D,inset 0 0  30px 20px #BE6B46, 10px 10px 10px #333, 0 0 1px #BE6B46;
position:relative;overflow:hidden;}
ul:before , p:before {content:'';position:absolute;top:0;left:5%;width:95%;height:1em;
background:linear-gradient(180deg,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.1));/* <= turn this into box-shadow for IE9 */
box-shadow: 0 0 5px rgba(255,255,255,0.2);