Inscris le : 18/08/2008
Messages : 12993
Lysandre
 |  Sujet: Les couleurs et les arrières-plans Dim 1 Fév - 19:27 | | Hello les folygrapheurs Je me lance dans des petites cession d'explications diverses afin de vous aidez dans le codage ! J'ai appris pas mal de choses avec divers site (en anglais et français) et je me suis dis que ce serait cool de vous proposez les bases ! Donc je vais vous faire un récapitulatif des diverses choses qu'on peut faire sur le background de vos Block  La couleur d'avant-plan : la propriété 'color' : - Citation :
- La propriété 'color' décrit la couleur d'avant-plan d'un élément.
Par exemple, supposons que nous voulions tous les titres du document en rouge foncé. Les titres sont tous balisés avec l'élément HTML
- Code:
-
<h1>. Le code suivant donne aux éléments <h1> une couleur rouge.
Exemple :
- Code:
-
h1 {
color: #ff0000;
}
On peut définir les couleurs avec des valeurs hexadécimales comme dans l'exemple précédent (#ff0000), ou avec les noms des couleurs ("red"), ou avec des valeurs RGB (rgb(255,0,0)). La propriété 'background-color' : - Citation :
- La propriété background-color décrit la couleur d'arrière-plan des éléments.
Balise :
- Code:
-
background-color: #FFCC66; Les images d'arrière-plan [background-image] : - Citation :
- La propriété CSS background-image sert à insérer une image d'arrière-plan.
Balise :
- Code:
-
background-image: url("lien de votre image"); Répéter l'image d'arrière-plan [background-repeat] : - Citation :
- Vous pouvez répété une image en arrière plan et lui indiqué le sens des répétitions
 Pour cela il suffit de vous référez aux divers balise suivant vos envies.
Balises :
- Code:
-
Background-repeat: repeat-x;
L'image se répète horizontalement
- Code:
-
background-repeat: repeat-y; L'image se répète verticalement
- Code:
-
background-repeat: repeat; L'image se répète horizontalement et verticalement
- Code:
-
background-repeat: no-repeat; L'image ne se répète pas Bloquer l'image d'arrière-plan [background-attachment] : - Citation :
- La propriété background-attachment définit si l'image d'arrière-plan est fixe ou bien défile avec l'élément conteneur. Une image d'arrière-plan bloquée ne bougera pas avec le texte lorsque le lecteur fait défiler la page, au contraire d'une image d'arrière-plan non bloquée qui défilera avec le texte.
Balises :
- Code:
-
Background-attachment: scroll; L'image défile avec la page (non bloquée)
- Code:
-
Background-attachment: fixed; L'image est bloquée Positionner une image d'arrière-plan [background-position] : - Citation :
- Par défaut, l'image d'arrière-plan se positionnera dans le coin supérieur gauche de votre block. La propriété background-position permet de changer cette position prédéfinie et de placer l'image d'arrière-plan n'importe où dans votre block.
Il y a plusieurs méthodes pour fixer la valeur de background-position. Par contre, elles se présentent toutes sous la forme d'un jeu de coordonnées. Par exemple, la valeur'100px 200px' positionne l'image d'arrière-plan à 100px depuis la gauche et à 200px depuis le haut de votre block.
Les coordonnées peuvent s'exprimer en pourcentages de la largeur du block, ou en unités fixes (pixels, centimètres, etc.), ou on peut utiliser les mots-clés "top", "bottom", "center", "left" ou "right".
Quelques exemples de balises...
- Code:
-
background-position: 2cm 2cm; L'image est positionnée à 2 cm de la gauche et à 2 cm du haut de votre block
- Code:
-
background-position: 50% 25%; L'image est positionnée au centre et à un quart du block vers le bas
- Code:
-
background-position: top right; L'image est positionnée au coin supérieur droit de votre block
Après à vous de trouver les réglages qui vous plairont Concision [background] : - Citation :
- En bref !
La propriété background est un raccourci pour toutes les propriétés listées ci dessus.
Avec background, on peut comprimer plusieurs propriétés et donc écrire une feuille de style plus courte, ce qui en facilite la lecture.
Par exemple, les cinq lignes suivantes :
avec ça :
- Code:
-
background-color: #FFCC66;
background-image: url("votre lien");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
On peut obtenir ça :
- Code:
-
background: #FFCC66 url("votre lien") no-repeat fixed right bottom;
La liste de commande est la suivante :
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Si une propriété manque, elle prend automatiquement sa valeur par défaut. Par exemple, si on supprime background-attachment et background-position, Ces deux propriété non définies prendront tout simplement leurs valeurs par défaut, qui sont comme chacun sait "scroll" et "top left". J'espère que ce petit "cours" rapide vous aidera à mieux comprendre les balises background afin de vous amusez avec les codage proposez ! C'est juste un plus pour personnaliser au mieux un libre service ou, qui sait, peut être vous lancez sur vos propre codage ! Je reviens avec d'autres petits trucs sympa |
|
