CSS - Formen: Ein Anfängerleitfaden für die Gestaltung des Inhaltsflusses

Hallo da draußen, angehende Webdesigner! Heute tauchen wir ein in die aufregende Welt der CSS-Formen. Als dein freundlicher Nachbarschafts-EDV-Lehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – wir beginnen von ganz unten und arbeiten uns hoch. Also hole dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und los geht's!

Was sind CSS-Formen?

Bevor wir ins Detail gehen, lassen wir uns erst einmal anschauen, was CSS-Formen überhaupt sind. Stell dir vor, du räumst Möbel in einem Raum ein. Du würdest nicht wollen, dass alles in perfekten Rechtecken ist, oder? Genau hier kommen CSS-Formen ins Spiel – sie erlauben es uns, interessante Layouts zu erstellen, indem wir Bereiche definieren, um die sich der Text fließen kann.

Das shape-outside-Eigenschaft

Im Herzen der CSS-Formen steht die shape-outside-Eigenschaft. Diese magische Eigenschaft ermöglicht es uns, eine Form zu definieren, um die sich der Text fließen kann. Es ist, als würde dein Text sagen: "Hey, hier ist eine unsichtbare Form. Kollidiere nicht damit!"

Syntax

Die grundlegende Syntax für shape-outside ist recht einfach:

.element {
shape-outside: value;
}

Einfach, oder? Aber die richtige Freude beginnt, wenn wir mit verschiedenen Werten spielen!

Mögliche Werte für shape-outside

Nun schauen wir uns die verschiedenen Formen an, die wir erstellen können. Ich habe eine praktische Tabelle für dich vorbereitet:

Wert	Beschreibung
margin-box	Verwendet die Randbox des Elements als Form
content-box	Verwendet die Inhaltsbox des Elements als Form
padding-box	Verwendet die Polsterbox des Elements als Form
border-box	Verwendet die Randbox des Elements als Form
circle()	Erstellt eine kreisförmige Form
ellipse()	Erstellt eine椭圆形 Form
url()	Verwendet ein Bild, um die Form zu definieren
polygon()	Erstellt eine Polygonsform
inset()	Erstellt eine eingerückte Rectanglesform
path()	Definiert eine Form mit einem SVG-Pfad
linear-gradient()	Verwendet einen linearen Gradienten, um die Form zu definieren

Wow, das ist eine lange Liste! Keine Sorge, wir werden jeden dieser Werte mit Beispielen durchgehen.

Gültig für

Bevor wir eintauchen, ist es wichtig zu beachten, dass shape-outside nur für schwebende Elemente gilt. Also stelle sicher, dass dein Element eine float-Eigenschaft hat!

Lasst uns Formen gestalten!

CSS shape-outside - margin-box

.shape {
float: left;
width: 100px;
height: 100px;
background: rot;
shape-outside: margin-box;
margin: 20px;
}

In diesem Beispiel fließt der Text um die Randbox unseres roten Quadrats herum. Es ist, als würde deine Form ein bisschen persönlichen Raum beanspruchen!

CSS shape-outside - content-box

.shape {
float: left;
width: 100px;
height: 100px;
background: blau;
shape-outside: content-box;
padding: 20px;
}

Hier fließt der Text eng um die Inhaltsbox herum, ignoriert dabei aber die Polsterung. Es ist perfekt für den Fall, dass du möchtest, dass dein Text deinem Formular sehr nahe kommt!

CSS shape-outside - padding-box

.shape {
float: left;
width: 100px;
height: 100px;
background: grün;
shape-outside: padding-box;
padding: 20px;
}

Mit padding-box respektiert der Text die Polsterung, ignoriert aber den Rand. Es ist wie ein höflicher Gast, der nicht zu sehr eindringen möchte!

CSS shape-outside - border-box

.shape {
float: left;
width: 100px;
height: 100px;
background: gelb;
shape-outside: border-box;
border: 20px solid schwarz;
}

Der border-box-Wert bezieht den Rand in die Form ein. Es ist großartig für den Fall, dass du möchtest, dass dein Text das gesamte Element, einschließlich Rand, umfließt.

CSS shape-outside - circle()

.shape {
float: left;
width: 100px;
height: 100px;
background: lila;
shape-outside: circle(50%);
border-radius: 50%;
}

Dies erstellt einen perfekten Kreis, um den sich der Text fließen kann. Es ist, als würde dein Layout eine Runde Applaus erhalten!

CSS shape-outside - ellipse()

.shape {
float: left;
width: 150px;
height: 100px;
background: orange;
shape-outside: ellipse(40% 50%);
border-radius: 50%;
}

Mit ellipse() können wir ovale Formen erstellen. Es ist perfekt für den Fall, dass du einen Hauch von Ei-zellulär in dein Design bringen möchtest! (Entschuldigung, ich konnte den Papa-Witz nicht widerstehen.)

CSS shape-outside - url()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
background: url('star.png') no-repeat;
background-size: contain;
}

Dies ermöglicht es dir, ein Bild zur Definition deiner Form zu verwenden. Stelle sicher, dass dein Bild an den Stellen transparent ist, wo du möchtest, dass der Text fließt!

CSS shape-outside - polygon()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
background: rosa;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

Mit polygon() kannst du jede Form erstellen, die du möchtest, indem du ihre Punkte definierst. In diesem Beispiel haben wir eine Sternform erstellt. Es ist, als würdest du ein geometrischer Zauberer sein!

CSS shape-outside - inset()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: inset(20px 30px 40px 10px round 10px);
background: hellblau;
clip-path: inset(20px 30px 40px 10px round 10px);
}

inset() ermöglicht es dir, ein Rechteck mit abgerundeten Ecken zu erstellen. Es ist perfekt für die Erstellung von Sprechblasen oder benutzerdefinierten Schaltflächen.

CSS shape-outside - path()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
background: hellgrün;
clip-path: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
}

Die path()-Funktion ermöglicht es dir, komplexe Formen mit SVG-Pfad-Daten zu erstellen. Es ist, als würdest du ein digitaler Künstler sein!

CSS shape-outside - linear-gradient()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: linear-gradient(45deg, transparent 50%, schwarz 50%);
background: linear-gradient(45deg, transparent 50%, schwarz 50%);
}

Dieser clevere Trick verwendet einen Gradienten, um eine diagonale Form zu erstellen. Es ist eine großartige Möglichkeit, deinem Design einige Winkel hinzuzufügen!

CSS shape-outside - Verwandte Eigenschaften

Um das Beste aus shape-outside herauszuholen, wirst du oft diese verwandten Eigenschaften verwenden:

• shape-image-threshold: Definiert den Alpha-Kanal-Schwellenwert zur Extraktion einer Form aus einem Bild.
• shape-margin: Fügt einen Rand zur Form hinzu.

Hier ist ein schneller Beispiel:

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
shape-image-threshold: 0.5;
shape-margin: 20px;
background: url('star.png') no-repeat;
background-size: contain;
}

Dieser Code erstellt eine Sternform aus einem Bild, mit einem Schwellenwert von 0.5 und einem Rand von 20px um die Form.

Abschluss

Und da hast du es, Leute! Wir haben die Welt der CSS-Formen durchquert, von einfachen Kästen bis hin zu komplexen Pfaden. Denke daran, der Schlüssel zum Meistern von CSS-Formen ist das Experimentieren. Habe keine Angst, verschiedene Werte auszuprobieren und zu sehen, was passiert.

Als wir uns abschließen, erinnere ich mich an eine Schülerin, die mir einmal sagte: "CSS-Formen sind wie Magie – sie machen das Unmögliche möglich!" Und sie hatte absolut recht. Mit CSS-Formen kannst du langweilige, kastenartige Layouts in Kunstwerke verwandeln.

Also, los geht's und gestalte deine Webdesigns! Und denke daran, in der Welt von CSS gibt es keine Fehler, nur glückliche kleine Unfälle (wie Bob Ross sagen würde). Frohes Coden!

Credits: Image by storyset