Voilà le chapitre 2 du tutoriel fleuve sur le CSS3. Nous allons traiter les multiples backgrounds, le background-origin, la gestion de l’opacité, les multi-colonage, et la gestion d’images dans les bordures. Le chapitre 3 traitera des sélecteurs CSS, sujet suffisamment vaste pour faire l’objet d’un chapitre à part entière!
Pour rappel, dans le chapitre 1 nous avions vu :
- Border-radius
- Box-shadow
- Gradient
- Text-shadow
Le plan de ce chapitre 2 sera donc :
- Multiple backgrounds
- Le Background-origin
- Gestion de l’opacité
- Multi-colonage
- Des images dans les bordures
Multiple backgrounds
Non compatible avec IE, cette propriété permet de mettre plusieurs arrière-plan dans un même calque. Ainsi, considérons le code suivant :
background: url('1.png') 70px 20px no-repeat, url('2.png') 150px 20px no-repeat, url('3.png') 230px 20px no-repeat, url('4.png') 110px 90px no-repeat, url('5.png') 190px 90px no-repeat;
background-color: #eee;
qui est la version courte d’ailleurs de
background-image: url('1.png'), url('2.png'), url('3.png'),
url('4.png'), url('5.png') ;
background-position: 70px 20px, 150px 20px, 230px 20px,
110px 90px, 190px 90px;<br />background-repeat: no-repeat;<br />background-color: #eee
Ce qui donne:
A ce jour je ne suis pas parvenu à cumuler les multiples backgrounds et le fond dégradé, mais si quelqu’un a une solution il y a un module de commentaire tout en bas 😉
Le Background-origin
Incompatible avec IE pour le moment, il nous est possible de définir l’origine d’un arrière-plan. Je m’explique : Imaginons un cadre avec du texte. Ce cadre possède une bordure de 5px et du contenu avec un padding de 10px. Et bein on va pouvoir définir selon que l’image s’affiche à partir du contenu, de la bordure ou derrière cette bordure. Voici ces trois options avec les habituels -moz et -webkit :
/*A partir du contenu*/ -webkit-background-origin: content; -moz-background-origin: content; /*A partir de la bordure*/ -webkit-background-origin: padding; -moz-background-origin: padding; /*Derrière la bordure*/ -webkit-background-origin: border; -moz-background-origin: border;
Démonstration :
La gestion de l’opacité
Nous avions déjà le PNG et son opacité pour résoudre quelques problèmes et s’autoriser quelques folies… CSS3 officialise l’utilisation de l’opacité dans les styles. A savoir : opacity ! Cet attribut est en fait une variable allant de 0 à 1, 0.5 signifiant par exemple une opacité de 50%.
Malheureusement, opacity n’est pas compatible avec IE, alors nous afonx un « fix » pour chaque version de IE. IE7 pour commencer :
filter: alpha(opacity=60);
IE8 pour finir :
filter: "alpha(opacity=60)";
Il faudra donc utiliser les trois pour s’assurer une interopérabilité. S’applique aussi bien sur du texte que des calques ou des images…
Le multi-colonage
IE toujours mauvais élève à part, c’est une des nouvelles propriétés les plus intéressantes, surtout pour les éditeurs de contenus par exemple. En oubliant les -moz et -webkit nous avons ces trois propriétés :
- column-width : la largeur d’une colonne, divise le texte en autant de colonnes qu’il faut de la largeur définie
- column-gap : l’espace entre deux colonnes
On peut aussi organiser ses colonnes selon une autre logique :
- column-count : le nombre de colonnes, divise le texte en nombre de colonnes définies de la largeur qu’il faut
- column-rule : la séparation entre chaque colonne
Passons à la pratique. Imaginons que l’on aie un paragraphe et qu’on souhaite le diviser en colonnes. On définit une largeur de colonnes, un espacement et une séparation entre colonnes :
text-align: justify; -moz-column-width: 150px; -moz-column-gap: 20px; -moz-column-rule: 1px dashed #FF8000; -webkit-column-width: 150px; -webkit-column-gap: 20px; -webkit-column-rule: 1px dashed #FF8000;
Cela nous donnerai :
Maintenant, imaginons que l’on ne veuille pas s’embêter à calculer la largeur, le nombre de colonnes… On définit simplement que l’on veut 4 colonnes avec un espacement de 10px, à lui de calculer le reste et de faire rentrer cela dans le calque parent autant que possible :
text-align: justify; -moz-column-count: 4; -moz-column-gap: 10px; -moz-column-rule: 1px dashed #FF8000; -webkit-column-count: 4; -webkit-column-gap: 10px; -webkit-column-rule: 1px dashed #FF8000;
Ce qui nous donne cette fois ci :
Des images dans les bordures
le sujet est vaste, compliqué, et retord… Mais on va essayer d’y voir un peu plus clair! Il y a deux choses à retenir : la largeur de la bordure, et l’image qu’on veut y mettre. Encore que, parler d’image dans la bordure n’est pas tout à fait vrai… On aurait tendance à penser qu’il s’agit d’une image que l’on place dans la bordure et qui va se répéter… Ce n’est pas tout à fait ça. Si vous vous sentez le courage :
En fait, ce que l’on va faire c’est d’abord définir les largeurs des bords haut, droit, bas et gauche. Puis, on va définir le découpage d’une image en 9 parties :
Enfin, on indique au navigateur de quelle façon il va devoir traiter les cotés, sachant qu’il va plus ou moins laisser les coins tels quels, en les étirant pour les faire rentrer dans les largeurs. C’est flou? C’est normal… Voilà ce que ça donne :
border-width: 30px 20px 30px 20px;
border-image: url("image.png") 30% 16% repeat;
-moz-border-image: url("image.png") 30% 16% repeat;
-webkit-border-image: url("image.png") 30% 16% repeat;
Border-width définit la largeur de chaque bord, dans le sens des aiguilles d’une montre : haut droite bas gauche. Border-image, lui, va indiquer un découpage. Ici par exemple, 30% 16% est le raccourcis de 30% 16% 30% 16%. Ce qui signifie que si on prend l’image suivante
Et qu’on définit le découpage ci-dessus, on obtient :
En gros, les deux « boules » du hait vont se répéter dans le bord haut, et le navigateur va les redimensionner pour les faire tenir dans 30px puisque qu’on a défini une largeur de bordure haute de 30px. Idem avec les deux « boules » du bas, et les bords gauche et droits.
Ce dont il faut se rendre compte, c’est que les « chutes », c’est à dire les coins et le centre, vont bien devoir aller quelque part… Il vont se loger dans… les coins et le centre 🙂 Plus d’infos sur http://www.lrbabe.com/sdoms/borderImage/index.html.
Enfin, dernier ajustement, vous avez noté le « repeat ». Il peut également être remplacé par « round » ou « stretch » :
- round va quasiment avoir le même effet que repeat, à savoir répéter le motif dans les bordures et le centre
- stretch ne va rien répéter, mais va étirer. Pratique pour créer des onglets, comme vous pouvez le voir ici
Ce qui donne, une fois tout mis en place (s’affiche mieux sur Firefox) :
Voilà, c’est tout pour ce chapitre… Rendez-vous au prochain!