Wie kann ich mit CSS Text um nicht rechteckige Bilder wickeln?

Text um nicht rechteckige Bilder umbrechen: Eine Anleitung

Kann Text um nicht rechteckige Bilder umbrochen werden? Um diesen Effekt zu erzielen, bei dem sich der Text nahtlos an die Form von Ländern oder anderen unregelmäßigen Formen anpasst, erkunden wir eine Methode, die Tory Lawson in einem Blogbeitrag vorgestellt hat.

Schritt 1: Legen Sie den Umbruchbereich fest

Identifizieren Sie zunächst den Bereich, in dem der Text umbrochen werden soll. Dies kann mit einer Bildbearbeitungssoftware wie Fireworks erfolgen. Richten Sie ein Raster mit entsprechendem Abstand ein und zeichnen Sie dann eine Grenzlinie, die die gewünschte Textendposition darstellt, und berücksichtigen Sie dabei einen leichten Abstand.

Schritt 2: Erstellen Sie eine Liste

Messen Sie die Breite dieser unregelmäßigen Form in vordefinierten Intervallen (z. B. 10 Pixel). Notieren Sie diese Messungen in einer Liste. Diese Liste dient als Leitfaden für die Erstellung von Divs im nächsten Schritt.

Schritt 3: Divs erstellen und CSS anwenden

Erstellen Sie Div-Elemente für jede Messung in der Liste und verschachteln Sie sie sie innerhalb eines Wrapper-Div. Schweben Sie diese Divs nach rechts und stellen Sie sicher, dass sie alle rechts schwebenden Elemente löschen. Legen Sie abschließend die Höhe und Breite des Wrapper-Div und das Hintergrundbild der unregelmäßigen Form fest.

Codebeispiel

Hier ist ein vereinfachtes Codebeispiel basierend auf der Methode von 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;
}

Indem Sie diese Schritte befolgen, können Sie Text effektiv um nicht rechteckige Bilder wickeln und so Text ermöglichen fließen auf natürliche Weise um die Konturen komplexer Formen. Obwohl diese Methode nicht so einfach ist wie eine dedizierte CSS-Option „Textumbruch“, bietet sie einen Workaround für die Erstellung beeindruckender visueller Effekte im Webdesign.