CSS Shapes für interessante Benutzersteuerelemente und Navigation verwenden

Geradeaus oder nach unten, das ist die sprichwörtliche Reihenfolge für Benutzersteuerelemente auf einem Bildschirm. Wie eine Liste von Menüpunkten. Aber was wäre, wenn wir das in ein flüssigeres Layout mit Kurven, Bögen und Nischen ändern würden? Wir können das mit wenigen Codezeilen schaffen. Im Zeitalter moderner minimalistischer Designs verleihen geschwungene Layouts für Benutzersteuerelemente dem Webdesign genau die richtige Prise Pep.

Und die Programmierung ist dank CSS Shapes einfacher denn je.

CSS Shapes (insbesondere die shape-outside Eigenschaft) ist ein Standard, der Floating-Elementen geometrische Formen zuweist. Der Inhalt wird dann entlang der Grenzen dieser Formen um das gefloatete Element gewickelt.

Die Anwendungsfälle für diesen Standard werden normalerweise als Designs für textliche, redaktionelle Inhalte präsentiert – wo einfacher Text entlang der seitlich schwebenden Formen fließt. In diesem Beitrag verwenden wir jedoch anstelle von einfachem Text Benutzersteuerelemente, um zu sehen, wie diese Formen ihren Layouts flüssige Silhouetten verleihen können.

Für die erste Demo hier ist ein Design, das auf Produktseiten verwendet werden kann, bei dem produktbezogene Aktionssteuerelemente entlang der Form des Produkts selbst ausgerichtet werden können.

<form>
  <img src="./img/bottle.png" alt="A tall refreshing and unopened bottle of Coca-Cola, complete with red bottle cap and the classic Coke logo in white.">
    <div>
      <input type="radio" id="one" name="coke" checked>
      <label for="one">One Bottle</label>
    </div>
    <div>
      <input type="radio" id="six" name="coke">
      <label for="six">Six Pack</label>
    </div>
    <div>
      <input type="radio" id="twelve" name="coke">
      <label for="twelve">Twelve Pack</label>
    </div>
    <div>
      <input type="radio" id="crate" name="coke">
      <label for="crate">Entire Crate</label>
    </div>
  </form>

img {
  height: 600px;
  float: left;
  shape-outside: url("bottle.png");
  filter: brightness(1.5);
}
input {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  margin-left: 20px;
  box-sizing: content-box;
  border: 10px solid #231714;
  border-radius: 50%;
  background: linear-gradient(45deg, pink, beige);
  cursor: pointer;
}

Das Bild der Flasche wird nach links gefloatet und erhält eine Formgrenze mit der shape-outside Eigenschaft. Das Bild selbst wird für die Form referenziert.

Hinweis: Nur Bilder mit transparentem Hintergrund können Formen gemäß den Silhouetten der Bilder erzeugen.

Der Standardstil der Radiobuttons wird durch einen benutzerdefinierten Stil ersetzt. Sobald der Browser die Form auf das gefloatete Bild anwendet, richten sich die Radiobuttons automatisch entlang der Form der Flasche aus.

Auf diese Weise müssen wir uns nicht darum kümmern, jedem Radiobutton einzeln eine Position zuzuweisen, um ein solches Design zu erstellen. Später hinzugefügte Schaltflächen werden automatisch mit den vorherigen Schaltflächen gemäß der Form der Flasche ausgerichtet.

Hier ist ein weiteres Beispiel, inspiriert von der Wikipedia-Startseite. Dies ist ein perfektes Beispiel für die Art von unkonventionellen Hauptmenü-Layouts, die wir uns ansehen.

Es ist nicht zu verrückt, um es mit shape-outside zu erstellen

<div>
  <img src="earth.png">
  <div class="left">
    <a href="#">Formation</a><br>
    <a href="#">Atmosphere</a><br>
    <a href="#">Heat</a><br>
    <a href="#">Gravitation</a>
  </div>
</div>
<div>
  <img src="earth.png">
  <div class="right">
    <a href="#">Moon</a><br>
    <a href="#">Climate</a><br>
    <a href="#">Rotation</a><br>
    <a href="#">Orbit</a>
  </div>
</div>

img {
  height: 250px;
  float: left;
  shape-outside: circle(40%);
}

/* stack both sets of menus on the same grid cell */
main > div { grid-area: 1/1; } 

/* one set of menus is flipped and moved sideways over the other */
.right { transform: rotatey(180deg) translatex(250px); }

/* links inside the flipped set of menus are rotated back */
.right > a { 
  display: inline-block; 
  transform: rotateY(180deg) translateX(-40px); 
}

/* hide one of the images */
main > div:nth-of-type(2) img { visibility: hidden; }

Ein Element wird immer nach links oder rechts gefloatet. Es gibt kein zentriertes Floating-Element, um das der Inhalt auf beiden Seiten fließt. Um das Design zu erreichen, bei dem Links auf beiden Seiten des Bildes umbrechen, habe ich zwei Linksets erstellt und eines der Sets horizontal gespiegelt. Ich habe dasselbe Bild mit einem circle() CSS Shape-Wert in beiden Sets verwendet, damit die Formen auch nach der Drehung übereinstimmen. Der Text der Links des gespiegelten Sets erscheint auf dem Kopf stehend seitlich, daher wird er zurückgedreht.

Obwohl beide Bilder übereinander liegen können, ohne dass es zu sichtbaren Überlappungen kommt, ist es am besten, eines davon mit der Opacity- oder Visibility-Eigenschaft auszublenden.

Das dritte Beispiel ist dank der Verwendung eines der dynamischen HTML-Elemente, <details>, etwas lebendiger. Diese Demo ist ein gutes Beispiel für Designs, um zusätzliche Informationen zu Produkten usw. anzuzeigen, die standardmäßig für die Benutzer verborgen sind.

<img src="diamond.png">
<details>
  <summary>Click to know more!</summary>
  <ul>
    <li>The diamond is now known as the Sancy
    <li>It comprises two back-to-back crowns
    <li>It's likely of Indian origin
  </ul>
</details>

img {
  height: 200px;
  float: left;
  shape-outside: url("diamond.png");
  shape-margin: 20px;
}
summary {
  background: red;
  color: white;
  cursor: pointer;
  font-weight: bold;
  width: 80%; 
  height: 30px;
  line-height: 30px;
}

Das Bild wird nach links gefloatet und erhält eine CSS-Form, die der des Bildes entspricht. Die shape-margin Eigenschaft fügt Randabstand um die dem Floating-Element zugewiesene Form hinzu. Wenn auf das <summary> Element geklickt wird, gibt das übergeordnete <details> Element seinen Inhalt preis, der sich automatisch entlang der Form des gefloateten Diamantbildes wickelt.

Der Inhalt des <details> Elements muss nicht unbedingt eine Liste sein, wie in der Demo. Jeder Inline-Inhalt würde sich entlang der Form des gefloateten Bildes wickeln.

Das letzte Beispiel funktioniert mit einer Polygonform anstelle von Bildern oder einfachen Formen wie Kreis und Ellipse. Polygone bieten uns kantigere geometrische Formen, die leicht durch Hinzufügen einer weiteren Koordinate in der Form gebogen werden können.

<img src="nasa.png">
<div><!-- triangle --></div>
<ul>
  <li><a href="#">Home</a>
  <li><a href="#">Projects</a>
  <li><a href="#">Shop</a>
  <li><a href="#">Contact</a>
  <li><a href="#">Media</a>
</ul>

div {
  width: 0;
  height: 0;
  --d:  200px;
  /* red triangle */
  border-right: var(--d) solid transparent;
  border-bottom: var(--d) solid transparent;
  border-left: var(--d) solid red;
  float: left;
  /* triangle CSS shape */
  shape-outside: polygon(0 0, var(--d) 0, 0 var(--d));
}
ul {
  list-style: none;
  padding-top: 25px;
}

Ein links gefloatetes rotes Dreieck wird mit Hilfe von Border-Eigenschaften erstellt. Um eine dreieckige CSS-Form zu erstellen, die dem roten Dreieck entspricht, verwenden wir die Polygonfunktion als Wert für die shape-outside Eigenschaft. Der Wert für die polygon() Funktion sind die drei Koordinaten des Dreiecks, getrennt durch Kommas. Die Links richten sich automatisch um das gefloatete Dreieck aus und bilden ein schräges Menülayout entlang der Hypotenuse des Dreiecks.

Wie Sie sehen können, machen CSS Shapes selbst für ein einfaches diagonales Layout von Benutzersteuerelementen eine gute Figur und verleihen einem Design etwas Pfiff. Die Verwendung von CSS Shapes ist eine viel bessere Option als das Drehen einer Reihe von Benutzersteuerelementen – die Ausrichtung der einzelnen Steuerelemente und des Textes dreht sich ebenfalls, was zu seltsamen Layouts führt. Im Gegensatz dazu legt ein CSS Shape einfach die einzelnen Steuerelemente entlang der Begrenzung der bereitgestellten Form aus.