Comment puis-je envelopper du texte autour d'images non rectangulaires à l'aide de CSS ?

Enroulement de texte autour d'images non rectangulaires : un guide

Le texte peut-il être enroulé autour d'images qui ne sont pas rectangulaires ? Pour obtenir cet effet, où le texte épouse parfaitement la forme des pays ou d'autres formes irrégulières, explorons une méthode partagée par Tory Lawson dans un article de blog.

Étape 1 : Établir la zone d'enveloppement

Commencez par identifier la zone où le texte doit être renvoyé. Cela peut être fait à l'aide d'un logiciel de retouche d'image comme Fireworks. Configurez une grille avec un espacement approprié, puis tracez une ligne de démarcation représentant la position de fin de texte souhaitée, en tenant compte d'un léger remplissage.

Étape 2 : Créer une liste

Mesurez la largeur de cette forme irrégulière à intervalles prédéfinis (par exemple 10 pixels). Enregistrez ces mesures dans une liste. Cette liste guidera la création de divs à l'étape suivante.

Étape 3 : Créer des divs et appliquer du CSS

Créer des éléments div pour chaque mesure dans la liste et imbriquer les dans un wrapper div. Faites flotter ces divs vers la droite et assurez-vous qu'ils suppriment tous les éléments flottants à droite. Enfin, définissez la hauteur et la largeur du div wrapper et l'image d'arrière-plan de la forme irrégulière.

Exemple de code

Voici un exemple de code simplifié basé sur la méthode de Tory Lawson. :

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}
.spacer {
  display: block;
  float: right;
  clear: right;
}
p {
  display: inline;
  color: #FFF;
}

En suivant ces étapes, vous pouvez efficacement envelopper du texte autour d'images non rectangulaires, permettant ainsi au texte de couler naturellement autour des contours de formes complexes. Bien qu'elle ne soit pas aussi simple qu'une option CSS dédiée « text-wrap », cette méthode fournit une solution de contournement pour créer des effets visuels percutants dans la conception Web.