80 Stunning Background Patterns For Your Websites « Noupe.

La syntaxe de base du CSS

Il y a trois parties à un élément de code css : le sélecteur, la propriété et la valeur

p { color: #333333; }

Raccourcir le sélecteur Background

Le sélecteur background a cinq propriétés : la couleur (color), une image de fond (images), la possibilité de répéter cette image horizontalement et/ou verticalement (repeat), positionner cette image (position) ou même l’attacher (attachment).

Admettons qu’on utilise les cinq propriétés en les codant séparément.

#exemple {
background-color: #F0F0F0;
background-image:  url(logo.png);
background-repeat: no-repeat;
background-position: 10px 10px;
background-attachment: scroll;
}

Cela paraitra sans doute plus propre à la plupart d’entre vous, car pour les plus analytiques, une propriété = une ligne, c’est quelque chose de logique. Mais d’un point de vue optimisation, cela n’est pas idéal. Il vaut mieux tout coder en une ligne, qui contiendrait les 5 éléments les uns derrière les autres.

#exemple { background: #F0F0F0 url(logo.png) no-repeat 10px 10px scroll;}

Raccourcir le sélecteur Border

Selon le même principe, border contient les propriétés width (largeur), style (le style de bord, solid, dotted, etc) et la couleur. Ce qui peut donner :

#exemple  { border: 1px solid #c3c3c3;}

Raccourcir les sélecteurs Margin et Padding

Les sélecteurs margin et padding acceptent quatre propriétés (top, right, bottom et left – dans l’ordre des aiguilles d’une montre quoi) et il y a moyen de raccourcir en les mettant sur la même ligne :

#exemple { margin: 5px 10px 5px 10px;}

Si vous voulez, vous pouvez même penser à réduire de 4 à 2 valeurs en utilisant la même valeur pour top et bottom, et pour left et right. Ca donnerait donc :

#exemple (margin: 10px 20px;}

Ce qui voudrait dire que vous auriez une marge de 10px en haut et en bas, et 20px à gauche et à droite.

Raccourcir les codes hexa des couleurs

Les couleurs codées en code hexadécimal possèdent 3 x 2 lettres ou chiffres. Si les paires sont équivalentes, vous pouvez raccourcir :

color: #44DD66; peut devenir color: #4D6;