Introduction au CSS3 - Partie 6 : Les arrière-plans

| Design Shack | kalyparker (traductrice) |

Traducteur

kalyparker

Pour la dernière partie de notre série d'introduction à CSS3, nous allons regarder de plus près les nouvelles propriétés de fond. Cela inclus la taille du fond, la possibilité d'utiliser plus d'un fond par élément et de définir l'origine du fond (qui affecte la position d'un fond).

Cet article a été publié à l'origine, le 27 Mai 2008, en version anglaise et est visible à l'adresse suivante : Introduction to CSS3 - Part 6: Backgrounds

- Titre : Introduction au CSS3 - Partie 6 : Les arrière-plans

- Auteurs : Design Shack, kalyparker (traductrice)

- Traducteur : kalyparker

- Parution : 10 décembre 2008

- Licence : Copyright ® 2008 Design Shack. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Introduction

- Taille du fond

- Fonds multiples

- L'origine du fond

- En conclusion

- Remerciements

- Articles de cette série

Introduction

Les nouvelles propriétés permettent un plus grand contrôle de l'élément de fond et fourniront aux designers de nombreuses nouvelles possibilités. Comme d'habitude, des exemples peuvent être trouvés ci-dessous :

Voir la page d'exemples.

Taille du fond

Avant le CSS3, la taille de fond était déterminée par la taille de l'image utilisée. Il sera possible avec la prochaine version de CSS de spécifier en pourcentages ou en pixels la taille que doit avoir une image de fond. Ceci permettra de réutiliser des images dans plusieurs contextes et aussi d'agrandir un fond pour remplir une zone de façon plus précise.

Ce qui suit est un exemple simple de redimentionnement du logo de "Design Shack" dans le coin supérieur gauche d'un élément div :

.backgroundsize
{
background: url(logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}

Fonds multiples

La nouvelle possibilité d'utiliser des fonds multiples est un énorme gain de temps, permettant de réaliser des effets qui précédemment exigeaient plus d'une div. S'il est possible de combiner ça avec la propriété background-size, ce sera un point intéressant.

L'exemple ci-dessous utilise un fond pour la bordure supérieure, un qui se répète verticalement pour les bordures gauches et droites et un troisième pour le bas.

.multiplebackgrounds
{
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background:
url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

L'origine du fond

Le CSS3 permet de spécifier comment la position du fond est calculée. La propriété background-origin peut être utilisée pour positionner soit le border, soit le padding, ou encore le content. Ceci permet une plus grande flexibilité en termes de placement d'une image de fond.

En conclusion

Il y a tout un ensemble de nouvelles options relatives au fond disponibles avec CSS3. Comme avec toutes les autres propriétés présentées dans cette série introductive, cela amène à une plus grande flexibilité et facilite beaucoup le développement d'effets auparavant complexes. Bien que ces propriétés ne soient pas encore supportées par la plupart des navigateurs, ça ne devrait plus être trop long avant que vous puissiez créer de renversantes interfaces utilisateurs avec ces nouvelles possibilités.

Nous espérons vraiment que vous avez apprécié cette série et nous vous tiendrons au courant de tous les derniers développements CSS3 qui sortiront dans les mois à venir. C'est avec impatience que nous attendons la prochaine génération des feuilles de style !

Remerciements

Tous mes remerciements à 12monkeys et à Bovino pour leur relecture.

Articles de cette série

- Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?

- Introduction au CSS3 - Partie 2 : Les bordures

- Introduction au CSS3 - Partie 3 : Les effets de texte

- Introduction au CSS3 - Partie 4: L'interface utilisateur

- Introduction au CSS3 - Partie 5: Les multiples colonnes

- Introduction au CSS3 - Partie 6 : Les arrière-plans