CSS-Aktualisierungen: Rahmen

German (Deutsch) translation by Valentina (you can also view the original English article)

Sicher, wir alle kennen Rahmen. Gibt es etwas Neues, das möglicherweise eingeführt werden könnte? Ich wette, in diesem Artikel gibt es einige Dinge, von denen Sie nie etwas gewusst haben!

Mit CSS3 können nicht nur abgerundete Ecken erstellt werden, sondern mit einfachem CSS können auch benutzerdefinierte Formen angezeigt werden. Das stimmt; In der Vergangenheit, bevor diese Techniken entdeckt wurden, haben wir möglicherweise auf absolut positionierte Hintergrundbilder zurückgegriffen, um Kreise oder Pfeile anzuzeigen. Zum Glück ist dies nicht mehr der Fall, da wir uns fröhlich noch einen Schritt von Photoshop entfernen.

Die Grundlagen

Sie sind wahrscheinlich mit der grundlegendsten Verwendung von Rahmen vertraut.

1	border: 1px solid black;

Mit dem obigen Code wird ein 1px-Rand auf ein Element angewendet. Schlicht und einfach; Wir können aber auch die Syntax etwas ändern.

1	border-width: thick;
2	border-style: solid;
3	border-color: black;

Zusätzlich zur Übergabe eines bestimmten Werts an border-width können alternativ drei Schlüsselwörter verwendet werden: thin, medium und thick.

Während es zunächst unnötig erscheint, jemals das Langhand-Formular zu verwenden, gibt es eine Handvoll Fälle, in denen dies vorteilhaft ist, z. B. wenn Sie einen Aspekt eines Rahmens aktualisieren müssen, wenn ein bestimmtes Ereignis eintritt.

Möglicherweise müssen Sie die Farbe eines Rahmens ändern, wenn der Benutzer mit der Maus über ein bestimmtes Element fährt. Die Verwendung der Kurzform erfordert, dass Sie die Pixelwerte wiederholen.

.box {
    border: 1px solid red;   
}

.box:hover {
    border: 1px solid green;
}

Ein eleganterer und trockener Ansatz wäre die gezielte Aktualisierung der border-color-Eigenschaft.

.box {
    border: 1px solid red;   
}

.box:hover {
    border-color: green;
}

Wie Sie in Kürze feststellen werden, ist diese Langhand-Technik außerdem hilfreich, wenn Sie benutzerdefinierte Formen mit CSS erstellen.

Randradius (border-radius)

border-radius ist das goldene Kind von CSS3 - die erste neue Eigenschaft, die in der Community weit verbreitet ist. Dies bedeutet, dass mit Ausnahme von Internet Explorer 8 und darunter alle Browser abgerundete Ecken anzeigen können.

Bisher mussten Herstellerpräfixe sowohl für Webkit als auch für Mozilla verwendet werden, damit das Styling korrekt angewendet wurde.

1	-webkit-border-radius: 10px;
2	-moz-border-radius: 10px;
3	border-radius: 10px;

Heutzutage können wir jedoch die Herstellerversionen ohne Sorgen abschneiden und uns einfach an das offizielle Formular halten: border-radius.

Wie zu erwarten, können wir auch benutzerdefinierte Werte für jede Seite einer Box angeben.

1	border-top-left-radius: 20px;
2	border-top-right-radius: 0;
3	border-bottom-right-radius: 30px;
4	border-bottom-left-radius: 0;

Im obigen Code wäre es überflüssig, border-top-right-radius und border-bottom-left-radius auf Null zu setzen, es sei denn, das Element erbt Werte, die zurückgesetzt werden müssen.

Ähnlich wie bei margin oder bei padding können diese Einstellungen bei Bedarf zu einer einzigen Eigenschaft zusammengefasst werden.

1	/* top left, top right, bottom right, bottom left */
2	border-radius: 20px 0 30px 0;

Beispielsweise (und wie Webdesigner dies häufig tun) kann die Form einer Zitrone mit CSS und der border-radius-Eigenschaft wie folgt reproduziert werden:

.lemon {
   width: 200px; height: 200px; 

   background: #F5F240;
   border: 1px solid #F0D900;      
   border-radius: 10px 150px 30px 150px;
}

Mehr als die Grundlagen

Viele Designer halten gerne an dem Wissen fest, das bisher in diesem Kapitel beschrieben wurde. Es gibt jedoch einige Möglichkeiten, wie wir es weiter vorantreiben können!

Mehrere Rahmen

Es gibt eine Vielzahl von Techniken, auf die wir verweisen können, wenn wir mehrere Rahmen auf ein Element anwenden sollen.

Rahmenstil

solid, dashed und dotted Werte sind die häufigsten Werte für die border-style-Eigenschaft. Es gibt jedoch auch einige andere Werte, die wir verwenden können, einschließlich groove und ridge.

1	border: 20px groove #e3e3e3;

Oder mit der Langhandform:

1	border-color: #e3e3e3;
2	border-width: 20px;
3	border-style: groove;

Dies ist sicherlich hilfreich, aber ein Ridge- oder Groove-Effekt besteht nicht aus mehreren Rahmen.

Gliederung

Die beliebteste Technik zum Erstellen von zwei Rahmen besteht darin, die outline-Eigenschaft zu nutzen.

1	.box {
2	border: 5px solid #292929;
3	outline: 5px solid #e3e3e3;
4	}

Diese Methode funktioniert wunderbar, ist jedoch auf zwei Rahmen beschränkt. Wenn Sie einen geschichteten, gradientenartigen Effekt erstellen müssen, ist ein anderer Ansatz erforderlich.

Pseudoelemente

Wenn die outline-Technik nicht ausreicht, besteht ein alternativer Ansatz darin, die Pseudoelemente :before und :after zu nutzen und alle erforderlichen zusätzlichen Rahmen auf den generierten Inhalt anzuwenden.

.box {
  width: 200px; height: 200px;
  background: #e3e3e3;
  position: relative;

  border: 10px solid green;  
}

/* Create two boxes with the same width of the container */
.box:after, .box:before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.box:after {
  border: 5px solid red;
  outline: 5px solid yellow;
}

.box:before {
  border: 10px solid blue;
}

Dies ist vielleicht nicht der eleganteste Ansatz, aber es wird auf jeden Fall den Job bekommen. Eine Einschränkung ist, dass es leicht ist, die Reihenfolge zu verwechseln, in der die Rahmenfarben angewendet werden. Oft ist ein gewisses Maß an „Raten und Prüfen“ erforderlich, um die richtige Reihenfolge anzuwenden.

Box Schatten

Die coole Möglichkeit für Kinder, eine unendliche Anzahl von Rahmen zu erstellen, besteht darin, den spread-Parameter in der CSS3-Eigenschaft von box-shadow zu nutzen.

.box {
    border: 5px solid red;
     box-shadow: 
       0 0 0 5px green, 
       0 0 0 10px yellow,
       0 0 0 15px orange;
}

In diesem Fall sind wir klug und verwenden box-shadow auf eine Weise, die möglicherweise nicht unbedingt beabsichtigt war, als die Spezifikation ursprünglich geschrieben wurde.

Wenn Sie die Komponenten x, y und blur auf 0 setzen, können Sie stattdessen den spread-Wert verwenden, um an den gewünschten Stellen durchgezogene Rahmen zu erstellen. Da box-shadows mithilfe eines Kommas gestapelt werden können, ist die Anzahl der möglichen Ebenen unendlich.

Diese Technik verschlechtert sich anmutig sehr gut. In älteren Browsern, die die box-shadow-Eigenschaft nicht erkennen, wird einfach der einzelne rote 5px-Rand gerendert.

Denken Sie daran: Designs müssen nicht in allen Browsern identisch sein. Schreiben Sie Ihr CSS für die modernsten Browser und stellen Sie dann entsprechende Fallbacks bereit.

Winkel ändern

Zusätzlich zur Übergabe eines einzelnen Werts an border-radius können wir alternativ zwei - durch ein / - getrennte Werte angeben, um eindeutige Werte sowohl für den horizontalen als auch für den vertikalen Radius anzugeben.

Beispielsweise…

1	border-radius: 50px / 100px; /* horizontal radius, vertical radius */

…ist äquivalent zu:

1	border-top-left-radius: 50px 100px;
2	border-top-right-radius: 50px 100px;
3	border-bottom-right-radius: 50px 100px;
4	border-bottom-left-radius: 50px 100px;

Diese Technik ist besonders hilfreich, wenn Sie eine subtile, lange Kurve anstelle einer generischen abgerundeten Ecke nachahmen müssen. Mit dem folgenden Code können wir uns beispielsweise leicht von einer quadratischen Form lösen, was zu einem eher gewellten, papierähnlichen Effekt führt.

.box {
    width: 200px; height: 200px;
    background: #666;

    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;

}

CSS-Formen

Die vielleicht beste Verwendung von Rahmen ist, wenn sie geschickt auf Elemente angewendet werden, die eine Breite und Höhe von Null haben. Verwirrend, oder? Sehen wir uns eine Demonstration an.

Nehmen Sie für die nächsten Beispiele das folgende Markup an…

1	<div class="box"></div>

… Und das folgende Basis-Styling:

.box {
   width: 200px;
   height: 200px;
   background: black;
}

Das am häufigsten genannte Beispiel für die Demonstration der Verwendung von CSS-Formen in einem Projekt ist das Erstellen des obligatorischen Pfeils.

Der Schlüssel zum Verständnis, wie ein Pfeil mit CSS gebildet werden kann, besteht darin, für jede Seite eine eindeutige border-color festzulegen und dann sowohl die Werte für width als auch height für den Container auf 0 zu reduzieren.

Angenommen, ein div mit einer arrow-Klasse als Container:

.arrow {
  width: 0; height: 0;

  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;  
}

Wie zu Beginn dieses Kapitels gezeigt, besteht eine sauberere Syntax darin, nicht die umfassende Kurzhandversion zu verwenden:

.arrow {
  width: 0; height: 0;

  border: 100px solid;  
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

Wir können dies sogar weiter reduzieren, indem wir die Farbwerte gruppieren.

.arrow {
  width: 0; height: 0;

  border: 100px solid;
  border-color: red green blue yellow;
}

Interessant, oder? Es macht jedoch durchaus Sinn, wenn wir einen Schritt zurücktreten. Dies ist die einzig mögliche Möglichkeit, die Farben auszurichten, wenn für den Container eine width und height von Null angenommen wird. Was ist nun, wenn wir alle Randfarben bis auf die blaue Seite auf transparent setzen?

.arrow {
  width: 0; height: 0;

  border: 100px solid;
  border-bottom-color: blue;
}

Ausgezeichnet! Es scheint jedoch nicht zu semantisch, ein .arrow div zu erstellen, um der Seite einen Pfeil hinzuzufügen. Stattdessen können Pseudoelemente verwendet werden, um den Pfeil nach oder vor dem zugeordneten Element anzuwenden.

Erstellen einer Sprechblase

Um eine 100% CSS-Sprechblase zu erstellen, beginnen wir mit dem Markup.

1	<div class="speech-bubble">Hi there!</div>

Als nächstes sollte ein grundlegendes Styling angewendet werden.

.speech-bubble {
    position: relative;
    background-color: #292929;

    width: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */

    color: white;
    text-align: center;
}

Der Pfeil wird mit dem after-Pseudo-Element angewendet.

1	.speech-bubble:after {
2	content: '';
3	}

Die :before- und :after-Pseudo-Elemente können verwendet werden, um generierten Inhalt entweder vor oder nach dem Inhalt eines Elements einzufügen.

An diesem Punkt geht es einfach darum, den Pfeil zu reproduzieren und an der richtigen Stelle zu positionieren. Wir beginnen damit, den Inhalt absolut zu positionieren, die width und height zurückzusetzen und die Rahmenfarben anzuwenden.

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 10px solid;
  border-color: red green blue yellow;
}

Da wir wissen, dass der Pfeil nach unten zeigen soll, zeigt das obige Bild, dass alle außer dem roten (oder oberen) Rand entweder weggelassen oder auf transparent gesetzt werden sollten.

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 10px solid;
  border-top-color: red;
}

Beim Erstellen von CSS-Formen sollte stattdessen die width-Eigenschaft verwendet werden, da mit der border-width-Eigenschaft nicht festgelegt werden kann, wie breit der Pfeil sein soll. In diesem Fall sollte der Pfeil etwas größer sein. So kann die border-width auf 15px erhöht werden. Wir positionieren den Pfeil auch unten und in der Mitte des Containers, indem wir die top und left Eigenschaften verwenden.

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
  border-top-color: red;

  top: 100%;
  left: 50%;
}

Fast dort; der letzte Schritt besteht darin, die Farbe des Pfeils so zu aktualisieren, dass sie dem Hintergrund des Containers entspricht. Die Positionierung muss ebenfalls geändert werden, um die Breite der Rahmen (15px) zu berücksichtigen. Während wir hier sind, wenden wir auch einen subtilen border-radius an, damit der Container blasenartiger erscheint.

.speech-bubble { 
   /* … other styles */
   border-radius: 10px;
}

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px; /* adjust for border width */
}

Nicht schlecht, ja? Wenn Sie diesen Code in einige wiederverwendbare Klassen abstrahieren, können Sie alle zukünftigen Projekte durchführen.

/* 
   Speech Bubbles
   Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION
   <div class="speech-bubble speech-bubble-top">Hi there</div>
*/

.speech-bubble {
  position: relative;
  background-color: #292929;

  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */

  color: white;
  text-align: center;
  border-radius: 10px;

  font-family: sans-serif;
}

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
}


/* Position the Arrow */

.speech-bubble-top:after {
  border-bottom-color: #292929;

  left: 50%;
  bottom: 100%;
  margin-left: -15px;   
}
.speech-bubble-right:after {
  border-left-color: #292929;

  left: 100%;
  top: 50%;
  margin-top: -15px;    
}

.speech-bubble-bottom:after {
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px;   
}

.speech-bubble-left:after {
  border-right-color: #292929;

  top: 50%;
  right: 100%;
  margin-top: -15px;    
}

Bonus: Bessere vertikale Zentrierung

Ein Nachteil bei der Verwendung der line-height zum vertikalen Zentrieren von Text besteht darin, dass Sie auf eine einzelne Zeile beschränkt sind. Sollte der Text zwei oder mehr Zeilen erfordern, ist jede Zeilenhöhe viel zu groß. Eine clevere Lösung besteht darin, der Sprechblase ein display von table und dem Absatz, der den Text umschließt, ein display von table-cell zuzuweisen. Dies erlaubt uns dann, den Text entsprechend mittig auszurichten.

1	<div class="speech-bubble speech-bubble-top">
2	<p>Text goes here.</p>
3	</div>

Als nächstes das modifizierte CSS.

.speech-bubble {
 /* other styles */

  display: table;
}

.speech-bubble p {
  display: table-cell;
  vertical-align: middle;
}

Machen Sie sich keine Sorgen, wenn Verweise auf display: table schreckliche Erinnerungen an altmodische, tischbasierte Layouts wecken. Diese Eigenschaften beziehen sich lediglich auf den Stil, in dem ein Element angezeigt werden soll.

Wir sind nicht auf Dreiecke beschränkt. CSS ist in der Lage, alle Arten von Formen zu produzieren - sogar Herzen und Biogefährdungszeichen!

.biohazard {
  width: 0; height: 0;

  border: 60px solid;
  border-radius: 50%;

  border-top-color: black;
  border-bottom-color: black;
  border-left-color: yellow;
  border-right-color: yellow;
}

Zusammenfassung

Obwohl es stimmt, dass der einfache border: 1px solid black-Syntax einen langen Weg zurücklegt, können wir, wenn wir klug sind, eine Vielzahl hilfreicher Effekte, Symbole und Formen erstellen. Wer hätte gedacht, dass Rahmen so mächtig sein könnten? Der Schlüssel ist, sich daran zu erinnern, dass das Styling für gängige Formen oder Sprechblasen nur einmal erstellt und dann für die zukünftige Verwendung in Dienstprogrammklassen abstrahiert werden sollte.