Bordure à motif pour un bloc fluide avec multiples backgrounds

Inspiré par l’étiquette au look rétro d’une bouteille de Kalhua, dont le contour est découpé en forme de vague, je décidais d’appliquer cet effet à un bloc texte dans une page que j’étais en train de réaliser. En gros, un rectangle dont le contour serait constitué d’un motif ondulé, relativement facile à réaliser en vectoriel.

Il y a peu, j’aurais choisi de placer une seule image, celle du rectangle ainsi obtenu, en arrière-plan de mon texte.
Problème: il m’aurait fallu définir une largeur et une hauteur fixe pour mon bloc, afin que le contenu de ce dernier ne déborde pas au delà de l’image d’arrière plan. Or, j’ai bien l’intention de faire en sorte que mon bloc s’adapte non seulement en largeur mais aussi en hauteur, car l’ensemble de mon design devra être fluide, ou responsive, c’est à dire que son contenu pourra être redimensionné en fonction de résolutions bien différentes (écran d’ordinateur de bureau, netbook, tablette, smartphones, etc).
Heureusement, une nouvelle fonctionnalité apportée par CSS3 va nous permettre d’arriver à un résultat similaire: la possibilité d’ajouter plusieurs images à l’intérieur de la propriété background, ou multiple backgrounds.

Certes, on aurait pu s’intéresser à la propriété border-image, laquelle permet, comme son nom l’indique, d’utiliser une image pour générer la bordure d’un élément.Dans la mesure où j’ai trouvé mon bonheur autrement, je laisse cette dernière propriété de côté. En outre, ma solution m’a paru plus simple à mettre en œuvre, là où border-image semble relativement compliquée à utiliser (plein d’exemples à cette adresse). Bien sûr, j’invite tous ceux qui arrivent au même, voire à un meilleur résultat avec cette autre propriété à nous présenter leur travail dans les commentaires.

OK, voilà le principe: notre rectangle doit comporter une couleur de fond, et chacun de ses côtés sera décoré via la répétition d’un motif ondulé de la même couleur. A chaque côté son motif: en haut, un motif horizontal, dont la partie basse est de la même couleur que le fond du rectangle, et dont la partie haute est de la même couleur que le fond de la page. A droite, un motif vertical, dont la partie gauche est de la même couleur que le fond du rectangle, et la partie droite de la même couleur que le fond de la page. Etc, etc.

Première étape: dessin des motifs avec Inkscape

Vous ne connaissez pas Inkscape? Pas de problème. Il s’agit d’un logiciel libre et gratuit que vous pourrez télécharger à cette adresse: http://inkscape.org. Les étapes ci-dessous sont suffisamment détaillées pour convenir à un débutant de la première heure.
Vous détestez Inkscape, vous utilisez un autre logiciel? Pas de problème. Débrouillez vous pour créer une forme similaire à celle décrite ci-dessous, et rendez-vous directement à la partie consacrée à l’intégration CSS.

Création du motif

Avec l’outil «Créer des rectangles ou des carrés», dessiner un rectangle horizontal (dont la largeur est plus grande que la hauteur).

Cet objet rectangle doit maintenant être transformé en chemin («Chemin > Objet en chemin») pour que nous puissions intervenir sur les nœuds qui le composent.

Choisir l’outil «Édition de nœuds» et cliquer sur le rectangle (ou double-cliquez sur le rectangle avec l’outil de sélection classique). Sélectionner les deux nœuds supérieurs du rectangle.


La manipulation des nœuds s’effectue toujours avec l’outil «Édition de nœuds», bien sûr. Quand cet outil est actif, vous verrez apparaître un menu contextuel horizontal sous le menu principal, lequel comporte toutes les actions ayant trait à la manipulation des nœuds: création, suppression, fusion de nœuds, adoucissement, etc.

On va ajouter un nœud supplémentaire à mi-chemin entre les deux nœuds sélectionnés: cliquez sur «Ajouter un nœud» dans le menu contextuel du haut.

Le nœud que vous venez de créer doit maintenant être aligné sur le côté inférieur du rectangle. Pour y parvenir, nous allons avoir besoin d’afficher la boîte «Aligner et distribuer» («Objet > Aligner et distribuer»). Sélectionnez les 3 nœuds que vous voulez aligner, en l’occurence le nœud nouvellement créé et les deux nœuds inférieurs du rectangle, et choisissez «Aligner les nœuds sélectionnés selon une ligne horizontale» dans la boîte «Aligner et distribuer».


Nous pourrions nous contenter de ce résultat si nous voulions créer un rectangle dont la bordure est en dent de scie. Ce motif s’y prêterait parfaitement. Cependant, et pour coller avec notre modèle (l’étiquette de la bouteille de Kalhua), nous allons devoir arrondir les angles.

Sélectionnez le point nouvellement créé, lequel est maintenant situé sur la ligne inférieure du rectangle, et transformez-le en cliquant sur «Rendre symétrique les nœuds sélectionnés» dans le menu contextuel.

Reste à arrondir les deux nœuds du haut, pour que notre motif, se répétant, offre la vision d’une vague. Il va falloir arrondir chaque nœud séparément: l’outil «Éditer les nœuds» activé et le rectangle sélectionné, maintenez la touche «Maj» enfoncée et tirez avec le bouton gauche de votre souris sur le nœud de gauche vers le côté droit du rectangle. Vous êtes en train de manipuler une des poignées de contôle du chemin qui fait suite au nœud sélectionné, en donnant à ce chemin une forme courbe.
Pour être certain que le départ de cette courbe est parfaitement parallèle au côté supérieur du rectangle, maintenez enfoncée, en plus de la touche «Maj», la touche «Ctrl». Ainsi, l’arrondi de la demi-courbe aura pour sommet l’extrémité supérieure du rectangle et s’alignera parfaitement avec l’autre demi-courbe du motif suivant lors de sa répétition horizontale.

Quand vous avez terminé de façonner votre courbe, relâchez le bouton de la souris et répétez l’opération sur le nœud de droite, en tirant cette fois-ci la poignée de contrôle de la courbe vers la gauche, pour obtenir une courbe symétrique à celle que vous venez de dessiner.

Votre motif est terminé.
Choisissez sa couleur de fond: votre forme sélectionnée, faites un clic gauche sur une des couleurs du nuancier. Appliquez un contour transparent à votre forme: clic-droit sur la case «Aucune couleur» du nuancier.

Vous n’avez plus qu’à adapter sa taille à vos besoins. Dans l’exemple ci-dessus, notre forme on a été aplatie. Si possible, déformez votre motif en vous aidant de la grille («Affichage > grille»): zoomez jusqu’au niveau d’affichage le plus précis de la grille (c’est à dire au pixel près) et alignez votre forme sur cette grille de façons à ce que la largeur et la hauteur de votre forme correspondent à un nombre exact de pixels, et pas des valeurs avec virgule. Un pixel est un pixel, n’est ce pas?
Pour redimensionner votre forme, tirez sur les poignées qui s’affichent, l’outil de sélection classique activé, au premier clic effectué sur votre forme pour la sélectionner.

Si vous négligez cette étape, ce n’est pas grave, car Inkscape arrondira les valeurs de largeur et de hauteur pendant l’exportation pour générer une image dont les dimensions offrent un nombre rond de pixels.
Mais de cette façon, au moins, vous avez le contrôle sur vos mesures.

Voilà pour le premier motif, celui du haut de notre bloc. Passons aux suivants.
Dupliquons notre forme (Ctrl+D) et faisons-la pivoter (avec l’outil de sélection classique, faire un premier clic gauche sur l’objet à modifier pour le sélectionner, puis un deuxième clic gauche pour faire apparaître les poignées de rotation. Renouveler trois fois l’opération, pour obtenir les autres motifs: droite, bas, gauche.

Exportation

Easy. Ici, pas de tranches, de trucs et de machins. Sélectionnez un de vos motifs avec l’outil de sélection classique, et dans la fenêtre d’exportation que vous aurez pris soin d’afficher («Fichier > Exporter en bitmap»), entrez l’emplacement du disque dur sous lequel vous allez enregistrer votre image ainsi que son nom. Un clic sur le bouton «Exporter», et c’est réglé.

Un détail supplémentaire, tout de même:
Si votre motif est posé directement sur le fond de votre document Inkscape, l’extérieur de la forme ondulée dans l’image exportée ne sera pas blanc comme le fond du document, mais transparent. Pour être sûr d’exporter votre motif sur fond blanc, dessinez un rectangle de cette couleur assez grand pour englober vos quatre motifs et positionnez-le en-dessous de ces derniers (rectangle sélectionné, puis «Objet > Descendre à l’arrière plan»). Inkscape tiendra compte de la présence de ce rectangle de fond lors de l’exportation (à moins que n’ayez expressément coché la case «Cacher tout sauf la sélection»).

Deuxième étape: intégration en CSS

Ouvrez votre éditeur de texte préféré.
Voilà à quoi pourrait ressembler votre markup:

<div class="decorated">
<h2>Un bloc au contour ondulé redimensionnable</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Et maintenant, le contenu de la CSS:

.decorated {
padding: 25px;
background:
url("images/decorated-top-border.png") top left repeat-x,
url("images/decorated-right-border.png") top right repeat-y,
url("images/decorated-bottom-border.png") bottom right repeat-x,
url("images/decorated-left-border.png") bottom left repeat-y,
#e6e6e6;
}

Même si vous n’êtes pas familiers des multiples backgrounds, il vous aura suffi de quelques secondes pour comprendre que ce n’était pas compliqué. Chaque déclaration d’arrière plan est ajoutée à l’intérieur de la propriété background, suivie d’une virgule, et on termine par un point virgule, pour clore la déclaration.
Entre temps, on a aussi défini la couleur de fond de notre bloc, à la suite des différentes images.
J’ai choisi de recourir à une syntaxe simplifiée (shorthand) pour définir les multiples backgrounds, mais on aurait pu l’écrire autrement:

.decorated {
padding: 25px;
background-image:
url("images/decorated-top-border.png"),
url("images/decorated-right-border.png");
url("images/decorated-bottom-border.png"),
url("images/decorated-left-border.png");
background-position:
top left,
top right;
bottom right,
bottom left;
background-repeat:
repeat-x,
repeat-y,
repeat-x,
repeat-y;
background-color: #e6e6e6;
}

Mais bon, franchement, lequel des deux vous paraît le plus élégant et le plus simple à maintenir?

L’ordre des images a son importance. Contrairement à ce qui arrive dans un flow normal en HTML, pour lequel les éléments déclarés en dernier sont au-dessus de la pile, ici c’est l’inverse: l’image déclarée en dernier est celle qui se retouvera sous la pile. Or, chacun de ces motifs va se répéter sur la largeur ou la hauteur de notre bloc, et forcément croiser le chemin de son voisin dans un angle.

Naturellement, j’ai déclaré les images d’arrière-plan comme je l’aurais fait pour n’importe quel shorthand CSS: en suivant le sens des aiguilles d’une montre, en commençant par le haut.
Cependant, raisonnons: puisque les motifs sont opaques, il suffit que l’un se superpose à l’autre pour le cacher entièrement. Prenons le motif du haut: se répétant à l’infini jusqu’au bord droite de notre bloc, et il y a de fortes chances pour que sa dernière répétition soit interrompue avant la fin, à moins que la somme de chaque répétition corresponde exactement à la largeur de notre bloc, ce qui est très improbable. Faisons donc en sorte que le motif suivant (pour le bord droit du bloc), que nous ferons démarrer en haut à droite, se retrouve en-dessous. Parfait, il suffit de le déclarer en deuxième dans la liste des images d’arrière plan, comme prévu. Quoiqu’il arrive, le motif du haut cachera le départ du motif de droite, et le raccord paraîtra inaperçu. Idem pour le troisième motif (pour le bord inférieur du bloc), déclaré en troisième position, dont le départ de l’angle bas-droite sera à son tour caché par le motif qui le précède (celui de droite, vous suivez, hein?).

Et puis là, crac: le quatrième motif, qui va se répéter verticalement depuis l’angle bas-gauche du bloc jusqu’à l’angle haut-gauche (si l’on suit le sens des aiguille d’une montre) finira fatalement sous le premier motif, mais là le raccord ne pourra être caché. Il y a toujours très peu de chance pour que la dernière répétition du motif de gauche tombe pile poil sous le premier motif du haut. Ainsi, selon la largeur ou la hauteur de votre bloc, la terminaison haut-gauche risque fort de ressembler à ceci:

Rusons: pourquoi ne pas ajouter une cinquième image d’arrière-plan, sans répétition, simplement calée en haut à gauche, laquelle viendrait masquer le raccord de gauche de façon à obtenir une terminaison plus satisfaisante?
Appelons-la « terminaison de motif ».

De retour dans Inkscape, on crée une forme qui correspond à la moitié d’un motif vertical. Dupliquez le motif vertical gauche (partie gauche: fond de la page ; partie droite: fond du rectangle) et coupez-le en deux, pour n’en conserver que la partie supérieure.
Pour celà, sélectionnez la forme ainsi dupliquée avec l’outil «Éditer les nœuds», sélectionnez le nœud du milieu, celui qui constitue le creux de la vague, ainsi qu’un des deux nœuds inférieurs de la forme.


Ensuite, cliquez sur «Supprimer un segment entre deux nœuds non terminaux» dans le menu contextuel, ce qui aura pour effet d’isoler le nœud du milieu de l’autre nœud sélectionné, rompant le chemin qui les liait.

Il ne vous reste plus qu’à supprimer les deux nœuds inférieurs, et vous vous retrouvez avec la moitié de la forme originale (bouton «Supprimer les nœuds sélectionnés»).

Notre « terminaison de motif » est prête.

Il reste à exporter le motif ainsi obtenu, en ayant soin, cette fois-ci, de cocher la case «Cacher tout sauf la sélection». Nous ne voulons pas que notre « terminaison de motif » comporte aussi  la couleur du fond de la page, mais seulement l’intérieur de la bordure. Pour que l’angle haut-gauche se termine par le sommet d’une ondulation, il faut que « terminaison de motif » se confonde avec la dernière occurence du motif de gauche, en superposant le petit bout de courbe qui pourrait manquer.

Voilà le résultat:

Dans la deuxième figure, la « terminaison de motif » est en rouge: on voit bien la position occupée par ce petit bout de courbe, lequel vient sauver les apparences.

Le code défintif:

.decorated {
padding: 25px;
background:
url("images/decorated-end-border.png") top left no-repeat,
url("images/decorated-top-border.png") top left repeat-x,
url("images/decorated-right-border.png") top right repeat-y,
url("images/decorated-bottom-border.png") bottom right repeat-x,
url("images/decorated-left-border.png") bottom left repeat-y,
#e6e6e6;
}

Conclusion

Voilà. Notre bloc façon étiquette rétro est tout à fait terminé et complètement responsive. La taille du bloc pourra évoluer, en fonction de la largeur de l’écran, de la disposition ou de la quantité de son contenu, que sa bordure s’adaptera de la même façon.

Vous trouverez certainement quantité d’autres motifs avec lesquels composer une bordure pour vos blocs selon cette méthode. J’attends avec impatience d’admirer le résultat de vos expérimentations…

Exemple de mise en pratique d’un tel bloc à contour ondulé :  http://india-pale-ale.fr

À lire ailleurs : Multiples backgrounds sur Alsacréations

Commentaires

  1. STPo

    Joli, mais ça coûte cher en requêtes HTTP pour un bloc (me dis-je). Non ?

  2. Pierre Pernix

    @STPo: Certes. Enfin, on a vu pire… Avec un sprite, ça pourrait le faire aussi, mais bonjour la prise de tête.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>