Vor kurzem habe ich Coding Inspiration gesucht, ohne künstlerisches Talent. Mein Ansatz? Wiederholung visuell ansprechender Kreationen durch andere und konzentriert sich auf sauberen, prägnanten Code. Diese Bonbongeisterknöpfe fangen mir auf die Augen!

Sie schienen perfekt für ein schnelles Projekt zu sein. Innerhalb von fünfzehn Minuten habe ich dies in Chromium erreicht:

Diese Technik verdient das Teilen. Dieser Artikel beschreibt meinen Prozess und untersucht alternative Ansätze.

initial setup

Ein einfaches Button-Element bildet die Basis, in der ein data-ICO Attribut für die Emoji-Einfügung und eine benutzerdefinierte CSS-Eigenschaft, -Slist , für die Stop-Liste in der Stilattribut.

boo!

Nach dem Artikeln fand ich die signifikanten Einschränkungen von Safari entdeckt. Es schlägt bei Button -Elementen,

Anzeige: flex (und möglicherweise Grid) Elemente und ein untergeordnetes Elementtext. Folglich sind die hier beschriebenen Techniken safari-inkompatibel. Die Problemumgehung beinhaltet die Nestlung von im Schaltfläche, alle Schaltflächenstile auf die anwenden und sicherstellen, dass die Border-Box des Elternteils abdeckt. Für Linux -Benutzer, denen der Zugriff auf den physischen Apple -Gerät fehlt, empfehle ich Epiphany (danke, Brian!).

Das CSS verwendet eine

:: After pseudo-Element für das Symbol und ein Grid-Layout für Text/Symbolausrichtung. Grenze, Polsterung, Border-Radius, die -SLIST Stoppliste für den diagonalen Gradienten, und auch das Schriftstyling werden angewendet.

button {
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5em;
  border: solid .25em transparent;
  padding: 1em 1.5em;
  border-radius: 9em;
  background: 
    linear-gradient(to right bottom, var(--slist)) 
      border-box;
  font: 700 1.5em/ 1.25 ubuntu, sans-serif;
  text-transform: uppercase;

  &::after { content: attr(data-ico) }
}

Klarstellung auf dem obigen Code:

Hintergrund-Origin und Hintergrundclip sind auf border-Box eingestellt. Hintergrund-Origin positioniert die Hintergrund-position 's 0,0 Punkt auf die obere linde Links des angegebenen Feldes, wobei die Referenz für Hintergrundgröße ermittelt wird. border-Box sorgt dafür, dass der Gradient die gesamte Border-Box überspannt. Die Standard padding-box würde dazu führen, dass der Gradient nur den Polsterbereich abdeckt.

chromspezifische Lösung (nicht standardard)

Diese Methode verwendet drei Maskenschichten und Komposition. Eine Auffrischung zum Maskenkompositing finden Sie in [Link zum Absturzkurs]. Nur der Alpha -Kanal ist in CSS -Maskenschichten von Bedeutung; RGB -Kanäle wirken sich nicht auf das Ergebnis aus.

Wir beginnen mit zwei Ebenen: eine vollständig undurchsichtige Ebene, die die Border-Box (Alpha = 1 überall) bedeckt, und eine zweite, ebenfalls vollständig undurchsichtige Ebene, die auf die Padding-Box beschränkt ist (alpha = 1 innerhalb der Padding-Box, 0 außerhalb).

Visualisieren Sie Layoutboxen als verschachtelte Rechtecke. Die untere Schicht ist über die Grenzkasten vollständig undurchsichtig. Die obere Schicht ist in der Polsterkasten undurchsichtig und im Grenzbereich transparent. Die Eckrundung wird durch

border-radius (und border-width für die padding-box festgelegt. .

Diese Ebenen werden mit der

ausschließenden Operation (oder xor in webkit) komponiert. Das Ergebnis: alpha = 0 innerhalb der Polsterkiste (beide Ebenen haben Alpha = 1) und Alpha = 1 im Randbereich (erste Ebene Alpha = 1, zweite Schicht alpha = 0). der Code:

Taste { / * gleiche Basisstile *// -Full: Linear-Gradient (rot 0 0); -Webkit-Maske: var (-full) padding-box, var (-full); -Webkit-Masken-Komposit: XOR; Maske: var (-full) padding-box ausschließen, var (-voll); }

button {
  /* same base styles */
  --full: linear-gradient(red 0 0);
  -webkit-mask: var(--full) padding-box, var(--full);
  -webkit-mask-composite: xor;
  mask: var(--full) padding-box exclude, var(--full);
}

mask-composite

ist mit der nicht standardmäßigen Version überschrieben. Dies erzeugt einen Gradientengrenze, aber es fehlt Text. Hinzufügen einer dritten Maskenebene, die auf Text beschränkt ist (mit transparentem Text), und Xoring mit dem vorherigen Ergebnis fügt den Text zurück. Dies ist jedoch chromspezifisch aufgrund des nicht standardmäßigen

text

Wert für mask-clip . A @unterstützt block sorgt für die Kompatibilität des Cross-Browsers (ohne Textmaskierung in nicht unterstützenden Browsern). .

Taste { / * gleiche Basisstile *// @Supports (-Webkit-Maske-Clip: Text) { -Webkit-Text-Fill-Farben: transparent; -Full: Linear-Gradient (rot 0 0); -Webkit-Maske: var (-voll) Text, var (-full) padding-box, var (-full); -Webkit-Masken-Komposit: XOR; } }

button {
  /* same base styles */

  @supports (-webkit-mask-clip: text) {
    -webkit-text-fill-color: transparent;
    --full: linear-gradient(red 0 0);
    -webkit-mask: var(--full) text, var(--full) padding-box, var(--full);
    -webkit-mask-composite: xor;
  }
}

Alternative Ansätze: Pseudo-Element- und Border-Image-Lösungen

Die zusätzliche Pseudo-Element-Lösung vermeidet das Maskieren, indem der Hintergrund in den Textbereich abgeschnitten und einen Gradientenrand mit einer absolut positionierten

:: vor

pseudo-Element hinzugefügt wird. Die Border-Image-Lösung hat zwar einfacher, hat jedoch Einschränkungen mit Border-radius . Diese Methoden bieten eine bessere Cross-Browser-Kompatibilität als die chromspezifische Lösung. Weitere Details und Code -Beispiele für diese Methoden finden Sie im ursprünglichen Artikel. Die Mischlösung, die ebenfalls im ursprünglichen Artikel beschrieben wird, bietet einen anderen Ansatz, jedoch mit Einschränkungen hinsichtlich der Hintergrundinteraktion. Jede Methode hat ihre Stärken und Schwächen, abhängig von der gewünschten Ebene der Cross-Browser-Unterstützung und spezifischen Entwurfsanforderungen.