Carbon Panel-UI-Kit — Panels mit Eckwinkeln und Buttons

Derselbe fünfstufige Glanzverlauf und dasselbe gebürstete Linienmuster wie in der neutralen Stahlfamilie, über einer viel dunkleren Palette und mit einem Körper, der zu Eckwinkeln geöffnet ist. Genau diese letzte Änderung macht aus einem Panel eine Instrumentenblende: Ein geschlossener Rand liest sich als Fenster, vier Winkel lesen sich als etwas, das an ein Armaturenbrett geschraubt ist. Die Nieten bleiben, denn ein Cockpit-Panel, das an nichts befestigt ist, ist ein Rendering.

Zwei Nine-Slice-Panels — ein eckwinkliger Fensterrahmen mit 10 px Ecken und ein vertiefter Innenrahmen mit 8 px Ecken — decken fast jede Box ab, die ein Menü braucht: Dialoge, Inventarraster, Listenhintergründe, Tooltips und Statuspanels. Es gibt gar keinen durchgehenden Rand — vier Eckwinkel markieren die Grenzen, der Rest bleibt offen, das Panel rahmt Inhalt also ein, ohne ihn einzusperren. Beide dehnen sich sauber auf jede Größe, weil die Ecken nie skalieren und die Mitte eine flache Füllung ist.

Auf den Panels sitzen vier abgeschrägte Button-Zustände: Standard, Hover, gedrückt und deaktiviert. Sie sind auf derselben 152×44-Basis mit 4 px Ecken gezeichnet, du tauschst also die Textur an einem einzigen Button-Widget und bekommst die ganze Interaktionsschleife, ohne ein Rechteck zu verschieben. Der gedrückte Zustand senkt seine Fläche um zwei Pixel und nimmt das obere Highlight weg, statt nur abzudunkeln — das lässt einen Button geklickt wirken statt bloß umgefärbt.

Alles kommt doppelt. Die SVG-Quellen sind die Dateien, in denen das Kit gezeichnet wurde — öffne sie, ändere die sechs Töne in Fastschwarz oder den einzelnen Akzent in Warnbernstein und exportiere neu. Die PNG-Exporte sind flach, transparent und in 1x, 2x und 4x vorskaliert, für Engines, die Bitmaps wollen — ohne vormultipliziertes Alpha und ohne eingebrannten Schatten außerhalb der Sprite-Grenzen.

Creative Commons Namensnennung 4.0 — Kostenlos für kommerzielle Nutzung. Namensnennung erforderlich. Vollständige Bedingungen · Was das in der Praxis heißt