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

/* position:fixed + margin:auto; */

html {
background: #f06;
background:repeating-linear-gradient(45deg, #acf 0,transparent 14px),repeating-linear-gradient(-45deg, #acf 0,#159 14px);
height: 100%;
background-attachment : fixed;
}
body {width: 70%;min-width: 700px;min-height:200%;margin:auto;box-shadow:0 0 5px;
background:repeating-linear-gradient(0deg, white 0,#eee 1em)}

gcyrillus

/* city menu, voir commentaires */

html {background: #000;}
nav {height:150px;width:660px;background:url(http://lorempixel.com/800/150/city/5);/* modifier cette image comme il vous plait */
position:relative;/* utile pour la suite */
line-height:180px;/* centrage vertical pour une seule ligne */
text-align:justify;/* voir astuce plus bas pour justifier toutes les lignes d'un conteneur */
padding:0 70px;margin:auto;overflow:hidden;
}

gcyrillus

/* scrolling table ? , nop, tbody maybe :) */

table {
table-layout:fixed;
width:80%;
min-width:600px;
margin:3em auto;
text-align:center;
display:block;border-spacing:0;
background:yellow;

gcyrillus

/* text-shadow  */
html {
font-size:40px;
background:#333
}
.sharp {
text-shadow:
2px 0 0 red,-2px 0 0 red,
0 2px 0 red,0 -2px 0 red,
2px 2px 0 red,-2px -2px 0 red,

gcyrillus

/* debug safari/chrome sur text-shadow tronquée si italic */
.title {
	
	font-family:'Bubbleboy';
	font-size:60px;
	color:#fff;
	text-align:center;
	text-shadow:0 5px 3px rgba(255,255,255,0.2), 0 1px 0 #000, 0 6px 0 #00212a, 0 7px 0 rgba(255,255,255,0.3);
}

gcyrillus

/* http://www.siteduzero.com/forum/sujet/css-blocs-imbriques-et-design-extensible */

html, body, #content1 {height:100%;width:100%;box-sizing:border-box;border:solid 1px ;border-radius:0.5em;box-shadow:0 0 5px, inset 0 0 5px;;}
html {background:white;
display:table;
padding:2%;
}
body {
background:green;
display:table-cell;

gcyrillus

/* zoom:hover */
p {border:solid;width:500px;margin:3em auto;box-shadow:0 0 5px;font-size:1.25em;}
p img {float:left;;vertical-align:bottom;transform:scale(1);zoom:1;transition:0.5s;}
p img:hover {transform:scale(1.5);transform-origin:center;transition:0.5s;}

/* dabblet defaut CSS */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

gcyrillus

/* test background & png*/

img {
margin :-3em;
padding:2.5em;
position:relative;
border:1px solid;
box-shadow:inset 0 0 5px;
background-image:linear-gradient(0deg,rgba(0,0,0,0.1),rgba(0,0,0,0.5))}
img:hover {

gcyrillus

/* details et summary */
header {background:#5489FD; box-shadow:0 0 5px;text-shadow:0 0 5px white}
hgroup,h1,h2 ,aside ,aside > ul ,li, details {display:inline-block;padding:5px;margin:0;vertical-align:middle;}
details, ul ul {width:120px;padding:0;cursor:text}
h2, aside>ul>li {border-left: groove gray 2px;height:20px;line-height:20px;text-align:center}
ul ul {position:absolute;z-index:1;border:solid #5489FD;background:#eee;border-bottom:0;box-shadow:0 0 5px;}
ul ul li {display:block;border-bottom:solid #5489FD;padding:2px;display:block;text-align:left;}
input[type=submit], details {border:none;background:none;cursor:pointer}
img {margin:-5px -10px 0 10px;box-shadow:0 0 5px 2px white;border-radius:3em/2em}
small {display:inline-block;font-size:0.5em;transform:rotate(-90deg);transform-origin:0.3em 0.5em;