Je vous ai expliqué dans cet article que le blog Erog était constitué de boîtes imbriquées les unes dans les
autres.
Il est temps de savoir quoi faire avec ces boîtes et je vais vous expliquer comment les remplir : fond et bords sont au programme.
-
Couleurs de fond et image de fond de la boîte
background-color est la couleur unie du fond
background-image:url(ADRESSE DE L'IMAGE HEBERGEE) est l'image de fond
Cette image a divers paramétrages possibles :
background-attachment correspond au mouvement de l'image par rapport à la boîte. Elle peut être fixe (fixed) ou bien bouger en même temps que l'ascenseur de la fenêtre du
navigateur (scroll qui est par défaut).
background-position est l'alignement de l'image. Elle peut être en haut (top), en bas (bottom), à droite (right), à gauche (left), au centre
(center) ou composée par exemple en haut à droite (top right).
background-repeat fixe la répétition de l'image. Elle peut être répétée (repeat qui est par défaut), non répétée (no-repeat), répétée en hauteur (repeat-y) ou
en largeur (repeat-x).
Exemple pour des modules :
.box-content {background-color:#cccccc; background-image:url(http://idata.erog.com/1/00/05/30/design/tissus/weaving01---petit.png); background-attachment: fixed; background-position:
bottom right; background-repeat:repeat;}
Ici je demande en fond de blog : une couleur grise unie, une image (hébergée par Erog), que cette image soit fixe, qu'elle commence en haut à droite et qu'elle se répète sur toute la surface du
fond du blog.
Conseils :
Il faut une couleur au cas où l'image n'apparaîtrait pas.
L'image doit être très légère pour apparaître rapidement et peu contrastée s'il y a du texte qui doit s'afficher dessus.
border-width est l'épaisseur de la bordure. Elle se mesure le plus souvent en pixels (px).
border-style est le style de la bourdure. Je développe ceci un peu plus bas.
border-color est tout simplement la couleur de la bordure.
Vous pouvez mettre tous les bords à la boîte ou n'en demander que certains (ou demander à certains de ne pas apparaître) :
border-top est le bord du haut,
border-right est le bord de droite,
border-bottom est le bord du bas,
border-left est le bord de
gauche.
Le style de la bordure peut être de différents type :
none pour n'avoir aucune bordure,
solid pour avoir une bordure continue,
dotted pour avoir une bordure en pointillé (sauf internet explorer),
dashed pour avoir une bordure en tirets (sauf internet explorer),
double pour avoir une bordure en double trait,
groove pour avoir une bordure en creux,
ridge pour avoir une bordure en saillie,
inset pour avoir une bordure en 3d lumière basse,
outset pour avoir une bordure en 3d lumière haute.
Exemples :
Voici les différents styles en 5 pixels de large
|
none
|
solid
|
dotted
|
|
dashed
|
double
|
groove
|
|
ridge
|
inset
|
outset
|
Voici un exemple regroupant un ensemble de possibilités :
border-top:5px dashed #FF8000; border-right: 15px solid #80FF00; border-bottom: 15px dashed #80FF00; border-left:5px solid #FF8000;
Le boîte est naturellement avec des coins carrés. Mais il est possible de donner de la douceur avec des coins arrondis.
border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;
Il faut utiliser les trois syntaxes pour que ce soit pris en compte par l'ensemble des navigateurs (mais pas les versions les plus anciennes)
Exemples :
Avec un bord
border:5px double #008080; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;
Avec un fond:
background-color:#FF0080; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;
J'espère que cet article vous aura aidés malgrè sa technicité.
Désolé aux lecteur de la version mobile qui n'ont pas accès aux différents exemples en fin d'article.
Commentaires