Trackin
Arrière-plan avec CSS 3
Tutoriel par SIMON-K (Infographiste, Concepteur - Designer Graphique et Multimédia, Strasbourg)
Sommaire
2. Background-clip
3. Background-origin
4. Plusieurs images dans un Background
5. Un dégradé en CSS
Depuis que les feuilles de style existent, la gestion des images d'arrière-plan est prévue : les célèbres propriétés background-color, background-image, background-position, background-repeat et background-attachment naissent avec CSS1, même si malheureusement leur compatibilité n'est pas encore totale.
Ces propriétés connues de tout bon webdesigner permettent de contrôler l'apparence de l'arrière plan d'une boîte. Un des modules de CSS3 étend ce contrôle de façon à répondre à des besoins plus actuels et évolués, notamment via le redimensionnement et la superposition des images.
Background-size
La Syntaxe
x-background-size: [ pourcentage | longueur | auto ]
Où x représente l'extension propriétaire : -moz ou -o ou -webkit selon les navigateurs
Définition
Background-size spécifie la taille de l'image dans l'arrière plan.
La première valeur détermine la largeur (ou proportion) horizontale, la deuxième la largeur verticale. Si une des valeurs n'est pas précisée elle sera automatiquement remplacée par "auto" avec le ratio de l'image.
- Pourcentage : redimensionne l'image suivant la zone de position du background(déterminé par -moz-background-origin)
- Longueur : redimensionne l'image selon la valeur définie
Illustration
Prenons un élément de type bloc (<div> en l'occurence) que nous allons triturer pour nos expériences. Commençons avec une simple couleur d'arrière plan :
div {
padding: 20px;
width: 500px;
height: 200px;
border: 5px dotted #0e6c6f;
background-color: #5fc9cd;
}
Ajoutons à notre élément une image en fond répétée par défaut
div {
border: 5px dotted #0e6c6f;
background-color: #5fc9cd;
background-image: url("alsa-beige.jpg");
}
A présent, appliquons un background-size à 100% afin que l'image d'arrière-plan occupe tout l'espace de l'élément :
div {
border: 5px dotted #0e6c6f;
background-color: #5fc9cd;
background-image: url("alsa-beige.jpg");
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
Autre variante (nous nous limiterons dorénavant à l'extrension propriétaire -webkit-):
div {
background-color: #5fc9cd;
background-image: url("alsa-beige.jpg");
-webkit-background-size: 25% 25%;
}
Implémentation sur les navigateurs actuels
Comme l'on peut s'en douter, ces propriétés CSS3 sont encore à l'état de brouillon et les différents navigateurs ne sont pas tenus de les prendre en charge... ce dont Internet Explorer ne se prive pas (même IE8).
- Sous IE : impossible
- Sous Opera : fonctionne dès la version 9.5 à l'aide -o-background-size
- FireFox : fonctionne sous FF3.6 avec -moz-background-size
- Safari : fonctionne depuis Safari v3.0 avec -webkit-background-size
Background-clip
La Syntaxe
x-background-clip: border | padding | content (uniquement avec safari)
x = -moz ou -o ou -webkit selon les navigateurs
Définition
Permet de définir les limites de l'arrière-plan à l'intérieur de la boîte représentée par l'élément.
- border : L'arrière plan s'étend jusqu'a l'extrême limite de la bordure
- padding : Aucun arrière-plan sera présent en-dessous de la bordure : l'extrême limite sera celle du padding
- content : L'arrière plan se limite au contenu
Illustration
Le fond se limite au contenu :
div {
...
background-image: url("alsa-vert.jpg");
-webkit-background-clip: content;
}
Le fond se limite aux marges internes (padding) :
div {
...
background-image: url("alsa-vert.jpg");
-webkit-background-clip: padding;
}
Le fond est présent même sous les bordures :
div {
...
background-image: url("alsa-vert.jpg");
-webkit-background-clip: border;
}
Background-origin
La Syntaxe
x-background-origin: border | padding | content
x = -moz ou -o ou -webkit selon les navigateurs
Définition
Positionne la zone de l'arrière plan.(l'origine de l'image d'arrière plan)
- border : La position de l'arrière plan est relative au bord : l'image peut donc aller derrière les bords
- padding : La position de l'arrière plan est relative au padding
- content : La position de l'arrière plan est relative au contenu
Illustration
div {
padding: 30px;
width: 500px;
height: 200px;
border: 5px dotted #0e6c6f;
background-color: #5fc9cd;
background-image: url("alsa-beige.jpg");
-webkit-background-origin: content;
background-repeat: no-repeat;
}
div{
...
-webkit-background-origin:padding;
}
div{
...
-webkit-background-origin:border;
}
Implémentation sur les navigateurs actuels
- Sous IE : impossible*
- Sous Opera : impossible
- FireFox : -moz-background-origin (v1.0)
- Safari : -webkit-background-origin (v3.0)
* Jusqu'à IE7, la valeur par défaut est background-origin: border. A partir de IE8 la valeur est background-origin: padding.
Plusieurs images dans un Background
CSS 3 rend possible l'affichage de plusieurs images dans un même arrière plan en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat.
Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété sera l'image du premier plan.
Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan.
L'ordre de déclaration est important : dans l'exemple ci-après, la position "left top" s'applique uniquement à la première image et "right bottom" s'applique uniquement à la deuxième image. Si une seule propriété est spécifiée, elle sera appliquée à l'ensemble des images.
div {
...
background-color: #5fc9cd;
background-image: url("alsa-beige.jpg"),url("alsa-vert.jpg");
background-position: left top,right bottom;
background-repeat: no-repeat,no-repeat;
}
Le code suivant affiche exactement le même résultat que précédemment.
div {
...
background-color:#5fc9cd;
background-image: url("alsa-beige.jpg"),url("alsa-vert.jpg");
background-position: left top,right bottom;
background-repeat: no-repeat;
}Illustrons le système de calque et de chevauchement :
div {
border: 5px dotted #0e6c6f;
background-color: #5fc9cd;
background-image: url("alsa-beige.jpg"),url("alsa-vert.jpg");
background-position: left top,45px 30px;
background-repeat: no-repeat;
}
En inversant simplement l'ordre des images :
div {
border: 5px dotted #0e6c6f;
background-color: #5fc9cd;
background-image: url("alsa-vert.jpg"),url("alsa-beige.jpg");
background-position: left top,45px 30px;
background-repeat: no-repeat;
}
Compatibilité navigateur
- Firefox 3.6
- Chrome 2
- Safari 3
Un dégradé en CSS
De nouvelles propriétés permettent de réaliser et gérer des arrière-plans de teintes dégradées. Ces propriétés CSS3 sont déjà prises en charge dans la version 3.6 de Firefox -moz-radial-gradient et –moz-linear-gradient, et -webkit-gradient dans Safari.
Créons un fond avec un dégradé de type radial.
Voici le code pour FireFox :
div {
width: 500px;
height: 200px;
background-image: -moz-radial-gradient(center,10px,center,500px,from(#aedae5),to(white));
background-repeat: no-repeat;
position: relative;
}La valeur des propriétés, center + pixels, correspond au départ et à la fin du dégradé.
La valeur des propriétés, from() + to(), correspond à la couleur de départ et à la couleur de fin.
Voici le code pour Safari :
div {
width: 500px;
height: 200px;
background-image: -webkit-gradient(radial,center center,10,center center,480,from(#aedae5),to(white));
background-repeat: no-repeat;
position: relative;
}On définit : le type de dégradé,les coordonnées (position) de début et de fin, le rayon (si dégradé radial) et on termine avec les couleurs de début et de fin.
Conclusion
Ces ébauches de propriétés développées dans la troisième mouture de CSS ont tout pour plaire et pour élargir les horizons des webdesigners. Un bon nombre de limites de CSS2 devraient être levées, même si l'on peut se mettre à rêver de fonctionnalités encore plus folles telles que la rotation des images d'arrière-plan.
Meilleurs partenaires Trackin VIP
