Décoration

Boîtes

opacity:0.8;
 Détermine la transparence de la boite et de son contenu 
box-shadow: 10px 5px 5px 0px rgba(0, 0, 0, 0.2);
 Crée une ombre pour la boîte. Les deux premières valeurs sont le décalage de l'ombre sur les axes X et Y, la troisième est le flou, la quatrième la taille de l'ombre et enfin sa couleur 
background-color: #rgba(255,200,200,0.5);
 Détermine la couleur de fond et sa transparence si RGBa ou HSLa 
background-image: url(image.jpg)
 Affiche une image comme fond 
background-repeat: no-repeat;
 Gère la répétition de l'image de fond
repeat : l'image se répète à l'infini dans les deux sens
no-repeat : l'image ne s'affiche qu'une fois
repeat-x ou repeat-y : l'image se répète à l'infini sur l'axe choisi 
background-attachment: fixed;
 Fixe l'image de fond d'une boîte 
background-position: top center;
 Placement de l'image de fond, ici en haut et centrée. Il est possible d'utiliser des valeurs (10px, 1rem, 20%...) 
background: #069 url(image.jpg) repeat-x fixed top center;
 Raccourci permettant de rassembler toutes les déclarations ci-dessus 
background: linear-gradient(to right, #FF9900, #FF6600);
 Affiche un dégradé d'oranges de gauche à droite
Beaucoup de possibilités avec les dégradés... 
background-size:cover;
 Détermine la taille de l'image de fond par rapport à la boîte. "cover" oblige par exemple l'image à toujours remplir l'entièreté de la boite.

Les arrière-plans multiples sont possibles !

Bordures

border-width:2px;
 Détermine l'épaisseur de la bordure 
boder-style:dotted;
 Détermine le style de bordure (solid, dotted, dashed, double...) 
border-color:#0000FF;
 La couleur des bordures 
boder: 2px solid #0000FF;
 Raccourci des déclarations précédentes 
border-radius:10px;
 Détermine l'arrondi des coins de la boîte 
border-image: url("/images/border.png") 27 space;
 Assigne une image à la bordure, ici aussi beaucoup de possibilités :

Transformations

transform: translate(120px, 50%);
 Déplace l'élément de 120px horizontalement (X) et de 50% de sa taille verticalement (Y). Utilisable sur un seul axe grâce à 
translateX()
et 
translateY
, mais existe également pour l'axe Z ou la 3D. 
transform: scale(2, 0.5);
 Modifie l'échelle de l'élément (x, y) 
transform: rotate(-90deg);
 Effectue une rotation à l'élément 
transform: skew(30deg, 20deg);
 Déforme l'élément tel un parallélogramme (x, y) 
transform: scale(0.5) translate(-100%, -100%);
 Les combinaisons sont possibles 
transform-origin: top left;
 Il est parfois utile de changer le point d'origine de la transformation (par défaut : center). Dans cet exemple une rotation de l'élément se ferait à partir du coin haut-gauche

Typographie

font-style:italic;
 Détermine le style de la police, ici italique 
font-variant:small-caps;
 Détermine une variante, ici en petites majuscules 
font-weight:light;
 Détermine la graisse de la police en fonction des possibilités de la police en question (normal, light, bold, lighter, bolder, 100...900) 
font-size:1.2rem;
 Détermine la taille de la police (peu importe l'unité : px, em, rem, vw) 
line-height:1.2em;
 Détermine la hauteur de ligne et donc influencera l'interlignage du paragraphe 
font-family:Arial, Helvetica, sans-serif;
 Détermine la police à utiliser (voir Fonts) 
font: italic small-caps light 18px/1.2em Arial, Helvetica, sans-serif;
 Raccourci sur l'ensemble de ces paramètres 
letter-spacing
 Détermine l'espace entre les lettres 
word-spacing
 Détermine l'espace entre les mots 
text-align:center;
 Centre le texte (et les autres éléments inline) dans son bloc parent (left, center, right, justify...) 
text-decoration:underline;
 Détermine la décoration du texte (none, underline, overline...) 
text-indent:2rem;
 Retrait de la première ligne 
text-transform:capitalise
 Transforme le texte, ici tout en capitales (capitalise, lowercase, uppercase...) 
text-shadow: 0px 0px 5px black;
 Applique une ombre au texte. Les deux premières valeurs sont le décalage de l'ombre sur les axes X et Y, la troisième est le flou, la quatrième sa couleur

Listes

li {list-style-type: square;}
 type de puce ou numérotation (none, circle, square...) 
li {list-style-image: url(bullet.gif);}
 Remplace la puce par une image