Index
INFORMATION
Règlements
Présentations
Recrutements
Partenariats
COMMANDES
Bannières et avatars
Tenues RR
Parchemins et autres
GRAPHISME
Galeries
Tutoriels
Ressources
Evaluations
Coup de coeur
cadeaux
FolyGraph
Merci de venir lire le règlement et faire votre présentation afin d'avoir accès au reste du forum.
Sans cela, votre compte sera supprimé après deux semaines.
Merci de votre compréhension et bonne visite.




Partagez | 
 

  Les couleurs et les arrières-plans

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Inscris le : 18/08/2008
Messages : 12992



Lysandre
La petite Orchidée Joyeuse



MessageSujet: 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 Razz


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 Smile 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 Smile

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 Smile


Revenir en haut Aller en bas
 
Les couleurs et les arrières-plans
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Plusieurs arrières plan
» Comment modifier une les couleurs d une image swf ?
» Gras souligné et Italique en Couleurs dans les Sujets
» priorité des couleurs de groupe si membre dans plusieurs groupes ?
» [Editeur ] Palette de couleurs

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
FolyGraph :: Le codage c'est ici ! :: Libre Service :: Astuces forum-