Rand CSS-Vorlagen

Flexible Rahmen-CSS-Vorlagen für Panels, Karten und Raster

Wenn jedes Panel auf einer Seite denselben dunklen Umriss hat, zeigen Rahmen den Besuchern nicht mehr, worauf es ankommt. Rahmen-CSS-Vorlagen lösen das von Grund auf, da jede Linie ihre Werte für border-width, border-style und border-color aus ihrer jeweiligen Rolle ableitet. Einmal definiert und wiederverwendet, verleihen diese Werte Ihren Inhalten ein stimmiges Randsystem.

Jeder Kante ihre Aufgabe zuweisen

Visuelles Gewicht entsteht ebenso durch Kontrast und Platzierung wie durch die Linienstärke. Gut aufgebaute Rahmensets teilen die Aufgaben wie folgt auf:

1. ein kräftiger Vollrahmen für das Hauptpanel, gelegentlich mit einem dezenten border-radius;
2. hellere Umrisse für wiederkehrende Karten, bei denen ein blasserer border-color oft mehr bewirkt als eine dünnere Linie;
3. seitenspezifische Trennlinien wie ein einzelnes border-bottom oder border-inline-start anstelle von vier Kanten an jedem Element;
4. eine Akzentkante, die bestimmten Zuständen wie einem ausgewählten Tarif vorbehalten ist, damit die Hervorhebung stets eine Bedeutung trägt.

Ein mit voller Stärke umrahmtes Panel, das verschachtelte Karten mit ebenso dunklen Kanten enthält, bietet dem Auge keinen Ruhepunkt. Das Aufhellen des inneren border-color oder das Ersetzen innerer Umrisse durch eine zarte Hintergrundtönung schafft meist Abhilfe. Auch Abrundungen erfordern Zurückhaltung, da ein Raster, in dem jede Zelle abgerundet ist, schnell wie eine Blisterpackung wirkt.

Wo benachbarte Karten aufeinandertreffen

Vollständig umrahmte Karten, die in einer Grid- oder Flexbox-Zeile Kante an Kante liegen, verdoppeln ihre inneren Linien, sodass die Mitte doppelt so schwer wirkt wie der Außenrahmen. Vorlagen beheben dies auf eine der folgenden Arten:

1. ein Abstand (gap) zwischen den Karten, sodass jede ihren eigenen, vollständigen Rahmen behält;
2. Rahmen nur an der rechten und unteren Seite jeder Karte, während der Container die oberen und linken Kanten bereitstellt;
3. ein einzelner Umriss um den Container zusammen mit internen Trennlinien, was wie eine zusammenhängende Tabelle wirkt.

Die zweite Methode erfordert bei Breakpoints besondere Sorgfalt. Eine vertikale Trennlinie zwischen zwei Spalten hat nichts mehr zu trennen, sobald die Karten untereinander umbrechen, wodurch eine überflüssige Linie an jeder Karte verbleibt. Sorgfältig gestaltete Vorlagen setzen seitenspezifische Rahmen in ihren Media Queries zurück und wandeln vertikale Trennlinien in horizontale um.

Gemeinsame Werte und Statusänderungen

Wiederverwendbare Vorlagen speichern Rahmenwerte in benutzerdefinierten Eigenschaften (Custom Properties). So erfordert ein dunkleres Branding nur eine einzige Anpassung an Farbe, Breite oder Radius, und jede Karte aktualisiert sich automatisch. Hover- und Focus-Zustände gehören ebenfalls zu diesem System, sodass eine farbige Kante beim Daraufzeigen denselben Akzent wiederverwenden sollte, der für ausgewählte Elemente reserviert ist.

Eine Aktionskarte kann eine eigene Ausnahme bilden, doch sobald sich individuelle Rahmendeklarationen Karte für Karte anhäufen, wird jede spätere Änderung zum Flickwerk. In Nicepage decken die visuellen Bedienelemente die meisten Rahmeneinstellungen ab, und Custom CSS Code übernimmt den Rest. Eine Rahmen-CSS-Vorlage ist bereit für Ihre Marke, sobald sich eine einzige Änderung der Hauptlinienfarbe auf jede Komponente überträgt, die ihr folgen soll.