CSS En-tête Responsive

@media screen and (max-width:800px)
@viewport {width: device-width;zoom: 1;}

@media all and (max-width: 640px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {...}

CSS3 : transformations

div:hover { transform: scale(1.02); transition: all 0.40s; }
div { transition: all 0.40s; }  (effet sur mouseout)

Bordures et ombrages

div {
   border: 1px solid #999;
   border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   box-shadow: 4px 4px 4px #ccc;
   -webkit-box-shadow: 4px 4px 4px #ccc;
   text-shadow: 1px 1px 2px #ccc;
}

CSS : couleur (blanc) avec opacité

div {background: rgba(255,255,255,0.8);}

CSS : césure automatique

div {hyphens: auto;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;-o-hyphens: auto;}

CSS Gradients : fonds dégradés

div {
   background-image: -webkit-linear-gradient(d, ce1, ce2, t);
   background-image: -moz-linear-gradient(d, ce1, ce2, t);
   background-image: -ms-linear-gradient(d, ce1, ce2, t);
   background-image: -o-linear-gradient(d, ce1, ce2, t);
   background-image: linear-gradient(d, ce1, ce2, t);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='c1',endColorstr='c2', GradientType=0);
}

d : position départ (top, right, etc., cumulables
ce1 : couleur et étendue de la couleur de départ, par ex. #930 0%
ce2 : couleurs et étendue de la couleurs d'arrivée, par ex. #c30 100%
t : transparence de 0 à 1 (utilisable seulement avec la notation de couleurs rgba)
Dernière ligne pour les versions IE9 en antérieures : "c1" et "c2" sont les valeurs hexadécimales des couleurs de départ et d'arrivée, par ex. #930 et #c30. GradientType a pour valeur 0 pour un dégradé vertical (haut-bas), et 1 pour horizontal (gauche-droite).

CSS : Multicolonnage

div {
   columns: 4;-webkit-columns: 4;-moz-columns: 4;
   column-gap: 2em;-webkit-column-gap: 2em;-moz-column-gap: 2em; 
   column-rule: 1px dotted #666; -webkit-column-rule: 1px dotted #666;-moz-column-rule: 1px dotted #666;}

CSS : Blog encadré

div {
   display: block;
   margin: 8px;
   padding: 6px;
   background-color: #ffe;
   border: 1px solid #999;
   border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   box-shadow: 4px 4px 4px #ccc;
   -webkit-box-shadow: 4px 4px 4px #ccc;
}