So erstellen Sie CSS-Diagramme mit interessanten Formen, Glyphen und Emojis

Avatar of Preethi
Preethi am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Lassen Sie die üblichen Kreise und Balken, die wir normalerweise in Diagrammen sehen, beiseite und verwenden Sie exzentrischere Formen. Da Online-Präsentationen heute immer häufiger vorkommen, ist eine schnelle Möglichkeit, Ihre Web-Folien aufzupeppen und sie hervorzuheben, ihnen ein formschönes Makeover zu geben 🪄

Ich zeige Ihnen, wie Sie mit minimalem Aufwand Diagramme mit interessanten Formen mithilfe von Glyphen, CSS-Formen und Emojis erstellen können.

Beginnen wir mit einem einfachen Beispiel.

Verwendung von Glyphen

<div id="chart">
  <div id="chart-shape">⬠</div>
  <div id="chart-value"></div> 
</div>
#chart {
  width: 300px; 
  height: 300px;
  display: grid;
  background: white;
}
#chart * {
  height: inherit;
  grid-area: 1 / 1;
}

Wir geben dem Diagramm zunächst einige Dimensionen und stapeln die beiden darin enthaltenen Divs, indem wir sie derselben Gitterzelle zuweisen. Sie können auch auf andere Weise gestapelt werden – zum Beispiel mit der position-Eigenschaft.

Betrachten Sie den obigen HTML-Code noch einmal. Eines der Divs enthält ein Fünfecksymbol – die gewünschte Diagrammform. Ich habe dieses Symbol über die Tastatur „Emoji und Symbole“ hinzugefügt, obwohl es auch mit dem HTML-Entitätswert für Fünfeck, &#x2B20;, innerhalb des Divs erfolgen kann.

Das Div mit dem Symbol wird dann mit CSS-Schrifteigenschaften sowie einer gewünschten Diagrammfarbe gestylt. Es ist groß genug und zentriert.

#chart-shape {
  font: 300px/300px serif;
  text-align: center; 
  color: limegreen;
}

Das zweite Div im HTML enthält ein konisches Gradienten-Hintergrundbild. Der Prozentsatz des Farbverlaufs repräsentiert den **visuellen Wert** des Diagramms. Dasselbe Div hat auch mix-blend-mode: screen;.

#chart-value {
  background: conic-gradient(transparent 75%, darkseagreen 75%);
  mix-blend-mode: screen;
}

Die mix-blend-mode-Eigenschaft mischt Farben innerhalb eines Elements mit seinem Hintergrund. Der Wert screen des Mischmodus führt zu einer helleren Mischung. Ein helleres Grün scheint durch den Teil, in dem der darkseagreen-farbene Teil des konischen Farbverlaufs mit dem limegreen-farbenen Fünfeck überlappt, während der Rest des darskseagreen-Farbverlaufs vor dem weißen Hintergrund des Diagramms verschwindet.

Eine Alternative zum Hinzufügen der Diagrammform im HTML ist, sie als weitere Hintergrundebene in CSS hinzuzufügen und background-blend-mode anstelle von mix-blend-mode zu verwenden. Der Code für eine Diagrammform innerhalb von CSS kann jedoch bei flüchtigem Blick weniger lesbar sein. Es liegt also an Ihnen zu entscheiden, wo es für Sie einfacher ist, die Diagrammform hinzuzufügen: HTML oder CSS. Sie haben beide Optionen.

#chart {
  width: 300px; 
  height: 300px;
  background:
  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='100%'><div xmlns='http://www.w3.org/1999/xhtml' style='font:300px/300px serif;color:limegreen;text-align: center;background:white'>⬠</div></foreignObject></svg>"),
  conic-gradient(transparent 75%, darkseagreen 75%);
  background-blend-mode: screen;
}

Das Fünfecksymbol wird zusätzlich zum konischen Farbverlauf als Hintergrundbild hinzugefügt. Dann schlägt schließlich das Schlüssel-Wert-Paar background-blend-mode: screen; zu und das Ergebnis sieht genauso aus wie in der vorherigen Demo.

Das Fünfeck-Hintergrundbild wird erstellt, indem das HTML mit dem Fünfecksymbol (⬠) in ein SVG eingebettet wird, das in eine Data-URL eingebettet ist.

<!-- Unwrapped SVG code from the Data URL -->
<svg xmlns='http://www.w3.org/2000/svg'>
  <foreignObject width='300px' height='100%'>
    <div xmlns='http://www.w3.org/1999/xhtml' 
         style='
          font:300px/300px serif;
          color:limegreen;
          text-align: center;
          background:white;'>
          ⬠
    </div>
  </foreignObject>
</svg>

Was in CSS so aussieht

background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='100%'><div xmlns='http://www.w3.org/1999/xhtml' style='font:300px/300px serif;color:limegreen;text-align: center;background:white'>⬠</div></foreignObject></svg>");

Verwendung von CSS-Formen

Als nächstes verwenden wir CSS-Formen anstelle von Symbolen. CSS-Formen werden hauptsächlich mit Hilfe von Rand-Eigenschaften erstellt. Wir haben eine Sammlung von CSS-Formen in unserem Archiv für Sie zur Referenz.

Hier ist eine Reihe von Eigenschaften, die eine einfache Dreiecksform in einem Element erstellen können, das wir später zum SVG hinzufügen werden, um das Symbol zu ersetzen.

border: 150px solid white; 
border-bottom: 300px solid lime; 
border-top: unset;

In Kombination mit dem konischen Farbverlauf und der Hintergrundmischung ergibt sich Folgendes:

<div id="chart"></div>
#chart {
  width: 300px;
  height: 300px;
  background:
  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='100%'><html xmlns='http://www.w3.org/1999/xhtml'><div style='border:150px solid white; border-bottom:300px solid lime; border-top:unset'></div><div style='border:150px solid transparent; border-bottom:300px solid white; border-top:unset; transform:scale(0.8) translateY(-360px);'></div></html></foreignObject></svg>"),
  conic-gradient(transparent 75%, darkseagreen 75%);
  background-blend-mode: screen;
}

Um das Design auf den Rand zu beschränken, wurde ein kleineres weißes Dreieck zum Design hinzugefügt.

<!-- Unwrapped SVG code from the Data URL -->
<svg xmlns='http://www.w3.org/2000/svg'>
  <foreignObject width='300px' height='100%'>
   <html xmlns='http://www.w3.org/1999/xhtml'>
    /* green triangle */
    <div style='
         border: 150px solid white; 
         border-bottom: 300px solid lime; 
         border-top: unset'></div>
    /* smaller white triangle */
    <div style='
         border: 150px solid transparent; 
         border-bottom: 300px solid white; 
         border-top: unset; 
         transform: scale(0.8) translateY(-360px);'></div>
   </html>
  </foreignObject>
</svg>

Was wiederum in CSS so aussieht

background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='100%'><html xmlns='http://www.w3.org/1999/xhtml'><div style='border:150px solid white; border-bottom:300px solid lime; border-top:unset'></div><div style='border:150px solid transparent; border-bottom:300px solid white; border-top:unset; transform:scale(0.8) translateY(-360px);'></div></html></foreignObject></svg>");

Verwendung von Emojis

Werden Emojis mit diesem Ansatz für Diagramme funktionieren? Aber sicher! 🥳

Ein vollfarbiges Emoji wird auf die gleiche Weise wie die HTML-Symbole in das SVG-Bild eingespeist. Die Vollfarbe des Emojis wird erstellt, indem ihm ein transparenter color-Wert zugewiesen wird, gefolgt von der Hinzufügung einer gewünschten Farbe als text-shadow. Diese Technik habe ich in einem anderen Beitrag behandelt.

<div id="chart"></div>
#chart {
  width: 300px; 
  height: 300px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='300px'><body style='margin:0;text-align:center;color:transparent;' xmlns='http://www.w3.org/1999/xhtml'><div style='text-shadow: 0 0 limegreen;font:200px/300px serif;background:white;'>🍏</div><div style='text-shadow:0 0 white;font:170px/300px serif;position:relative;top:-300px;'>🍏</div></body></foreignObject></svg>"),
  conic-gradient(transparent 64%, darkseagreen 64%);
  background-blend-mode: screen;
}

Wie bei der letzten Demo wird eine kleinere weiße Apfelform in der Mitte hinzugefügt, um das Randdesign zu erstellen.

<!-- Unwrapped SVG code from the Data URL -->
<svg xmlns='http://www.w3.org/2000/svg'>
  <foreignObject width='300px' height='300px'>
    <body xmlns='http://www.w3.org/1999/xhtml' style='
          margin: 0;
          text-align: center;
          color:transparent;'>
       /* green apple shape */
       <div style='
            text-shadow: 0 0 limegreen; 
            font-size: 200px; 
            background: white;'>🍏</div>
       /* smaller white apple shape */
       <div style='
            text-shadow:0 0 white; 
            font-size: 170px; 
            position: relative; 
            top: -300px;'>🍏</div>
    </body>
  </foreignObject>
</svg>

Ich habe die beiden Divs innerhalb des <body>-Elements platziert, damit die wiederholten Stileigenschaften der Divs nur einmal im Body-Element deklariert werden. Die Divs erben dann automatisch diese Eigenschaften.

Chris hatte die Idee, den konischen Farbverlauf – insbesondere seinen Prozentwert – mithilfe der CSS-Regel @property (zum Zeitpunkt der Erstellung dieses Artikels in Chrome unterstützt) zu animieren, und das hat den schönsten Effekt auf das Design. @property ist eine CSS-At-Rule, die eine benutzerdefinierte CSS-Eigenschaft explizit definiert. In unterstützten Browsern kann eine benutzerdefinierte Eigenschaft, die mit @property definiert wurde, animiert werden.

@property --n {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 30%;
}
#chart {
  width: 300px; 
  height: 300px;
  --n: 30%;  /*declaration for browsers with no @property support */
  background: 
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='300px'><body style='margin:0;text-align:center;color:transparent;' xmlns='http://www.w3.org/1999/xhtml'><div style='text-shadow: 0 0 limegreen;font:200px/300px serif;background:white;'>🍏</div><div style='text-shadow:0 0 white;font:170px/300px serif;position:relative;top:-300px;'>🍏</div></body></foreignObject></svg>"),
    conic-gradient(transparent var(--n), darkseagreen var(--n));
  background-blend-mode: screen;
  transition: --n 2s ease-in-out	
}
#chart:hover { --n: 70%; }

Das obige Diagramm ändert seinen Wert beim Darüberfahren mit der Maus. In Chrome wird die Änderung animiert aussehen.

Und obwohl es nicht so flüssig wie CSS-Animation sein wird, können Sie auch versuchen, den Farbverlauf mit JavaScript zu animieren. Das folgende JavaScript erzeugt einen etwas ähnlichen animierten Effekt wie oben, wenn der Cursor über das Diagramm fährt.

const chart = document.querySelector('#chart')
chart.onpointerover = ()=>{
  var i = 30,
      timer = setInterval(()=> {
        if (i < 70)
          chart.style.setProperty('--n', i++ + '%')
        else clearInterval(timer)
      }, 10)
}
chart.onpointerout = ()=>{
  var i = 70,
      timer = setInterval(()=> {
        if (i >= 30) 
          chart.style.setProperty('--n', i-- + '%')
        else clearInterval(timer)
      }, 10)
}

Wenn Sie Ihre eigenen Designs ausprobieren, beachten Sie, wie die verschiedenen Mischmodi funktionieren. Ich habe den screen-Mischmodus in all meinen Demos verwendet, um die Dinge einfach zu halten. Aber mit verschiedenen Mischmodi und verschiedenen Hintergrundfarben erhalten Sie unterschiedliche Ergebnisse. Daher empfehle ich, sich tiefer in Mischmodi einzuarbeiten, falls Sie dies noch nicht getan haben.

Wenn Sie auch die Farbe eines Elements vom Endergebnis ausschließen möchten, versuchen Sie, isolation: isolate; auf dem Element anzuwenden – der Browser ignoriert diese Hintergrundfarbe beim Anwenden der Mischung.

Und obwohl es alle Arten von ungewöhnlichen und eigenartigen Formen gibt, die wir in beliebigen Farben verwenden können, sollten Sie immer auf die Lesbarkeit achten, indem Sie den Diagrammwert groß und klar genug machen, um ihn lesen zu können.

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Cssfaults
    Permalink zu Kommentar#

    Toller Artikel! Das sollte bekannter sein und mehr Kommentare haben. Hinweis: Das Hexagon-Zeichen wird jedoch nicht in Chrome Android unterstützt.

    Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

© .