CSS-Ing-Süßigkeiten-Geisterknöpfe

Vor kurzem habe ich Coding Inspiration gesucht und mangelndes 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!

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

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

Erstes Setup

Ein einfaches Tastenelement bildet die Basis und enthält ein data-ico -Attribut für die Emoji-Einfügung und eine benutzerdefinierte CSS-Eigenschaft, --slist , für die Stoppliste im Style-Attribut.

 <code>boo!</code>

Nach der Kartikelabschluss entdeckte ich Safaris signifikante Einschränkungen des Ausschnitts zu den Text. Es scheitert Schaltflächenelemente, display: flex (und möglicherweise Raster-) Elemente und Kinderelementtext. Folglich sind die hier beschriebenen Techniken safari-inkompatibel. Die Problemumgehung beinhaltet die Nistung a<span></span> In der Schaltfläche alle Schaltflächenstile auf die antragen<span></span> und sicherstellen, dass es die Grenzbox des Elternteils abdeckt. Für Linux -Benutzer, bei denen der Zugriff auf den physischen Apple -Gerät fehlt, empfehle ich Epiphany (danke, Brian!).

Das CSS verwendet ein ::after Pseudoelement für das Symbol und ein Gitterlayout für die Ausrichtung der Text-/Symbolausrichtung. Grenze, Polsterung, --slist , Stop-Liste für den diagonalen Gradienten und Schriftstyling werden ebenfalls angewendet.

 <code>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) } }</code>

Klarstellung zum obigen Code: background-origin und background-clip werden auf border-box eingestellt. background-origin positioniert den 0,0-Punkt der background-position am oberen links der angegebenen Box und bestimmt die Referenz für background-size . border-box stellt sicher, dass der Gradient die gesamte Grenzbox umfasst. Die padding-box würde dazu führen, dass der Gradient nur den Polsterbereich abdeckt.

Chromspezifische Lösung (Nicht-Standard)

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 Schichten: eine vollständig undurchsichtige Schicht, die die Grenzkiste (Alpha = 1 überall) und eine zweite, ebenfalls vollständig undurchsichtige Ebene, die auf die Polsterung beschränkt ist (Alpha = 1 innerhalb der Polsterkasten, 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) bestimmt.

Diese Ebenen werden mit dem exclude (oder xor in Webkit) zusammengesetzt. Das Ergebnis: Alpha = 0 innerhalb der Polsterkiste (beide Schichten haben Alpha = 1) und Alpha = 1 in der Grenzfläche (erste Schicht Alpha = 1, zweite Schicht alpha = 0).

Der Code:

 <code>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); }</code>

Details: Für Kürze werden rote Gradienten verwendet. Für beide Schichten werden Gradienten aufgrund von Einschränkungen des Hintergrund-Clip-Einschränkungen verwendet. Der Standard- mask-composite ist enthalten, wobei die nicht standardmäßige Version überschrieben ist.

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 aufgrund des nicht standardmäßigen text für mask-clip verchromtspezifisch. Ein @supports -Block sorgt für die Kompatibilität des Cross-Browsers (ohne Textmaskierung in nicht unterstützenden Browsern).

 <code>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; } }</code>

Dies ist ein einfacher Ansatz, aber sein Vertrauen in nicht standardmäßige Funktionen begrenzt seine Browserkompatibilität. Lassen Sie uns alternative, breit unterstützte Methoden untersuchen.

Alternative Ansätze: Pseudoelement- und Grenzbildlösungen

Die zusätzliche Pseudo-Element-Lösung vermeidet die Maskierung, indem der Hintergrund in den Textbereich abgeschnitten und einen Gradientenrand mit einem absolut positionierten ::before Pseudo-Element hinzugefügt wird. Die Grenzmateriallösung hat zwar einfacher, hat jedoch Einschränkungen bei 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 Unterstützung des Cross-Browser-Supports und der spezifischen Entwurfsanforderungen.

Das obige ist der detaillierte Inhalt vonCSS-Ing-Süßigkeiten-Geisterknöpfe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!