Geisterknöpfe mit Richtungsbewusstsein in CSS

Sie haben vielleicht Geisterknöpfe gesehen? Sie sind durch transparente Hintergründe gekennzeichnet und der Hintergrund ist mit fester Farbe gefüllt, wenn die Maus schwebt. Das Smashing Magazine hat einen Artikel zu diesem Thema. Dieser Artikel erstellt eine Geisterknopf, aber dieser Teil ist relativ einfach. Interessanterweise und schwierig werden wir die Füllanimation des Ghost -Knopfes am Maus -Schwebedruck beginnen.

Hier ist ein grundlegender Ghost -Button -Beispiel:

In den meisten Fällen wechselt die Hintergrundfarbe in die feste Farbe. Einige Designs füllen die Tasten von links nach rechts, von oben nach unten usw., um den visuellen Effekt zu erhöhen. Füllen Sie beispielsweise von links nach rechts:

Hier ist ein kleines Problem der Benutzererfahrung. Wenn sich die Maus über den Rand des gefüllten Bereichs schwebt, wird sie das Gefühl haben, dass etwas nicht stimmt. Betrachten Sie dieses Beispiel, die Taste füllt links, während Sie von rechts schweben.

Es ist am besten, dass die Taste aus dem anfänglichen Schwebepunkt aus füllt.

Wie geben wir die Wahrnehmung der Knopf Richtung ? Ihre anfängliche Intuition könnte sein, JavaScript zu verwenden, aber wir können dies mit CSS und einigen zusätzlichen Tags tun.

Für diejenigen, die einen kurzen Blick auf die Ergebnisse werfen möchten, finden Sie hier einige richtungsbewusste Geistertasten, die in reinem CSS implementiert sind!

Lassen Sie es uns Schritt für Schritt erstellen. Alle Code finden Sie in dieser Codepen -Sammlung.

Erstellen Sie eine Basis

Beginnen wir mit den Grundlagen des Erstellens der Ghost -Taste. Die Markierung ist einfach.

 <button>Boo!</button>

Unsere CSS -Implementierung verwendet CSS -benutzerdefinierte Eigenschaften. Dies erleichtert die Wartung und erleichtert die Anpassung durch Inline -Eigenschaften.

 Taste {
  --Größenweite: 5;
  -BoxShadowDepth: 8;
  -ButtonColor: #f00;
  -montieren: 3;
  -HorizontalPadding: 16;
  --verticalPadding: 8;

  Hintergrund: transparent;
  Rand: Calc (var (-Grenze) * 1px) Solid var (-buttonColor);
  Box-Shadow: Calc (var (-boxShadowDepth) * 1px) calc (var (-boxShadowDepth) * 1px) 0 #888;
  Farbe: var (-buttonColor);
  Cursor: Zeiger;
  Schriftgröße: calc (var (-fontsize) * 1rem);
  Schriftgewicht: fett;
  Umriss: transparent;
  Polsterung: Calc (var (-VerticalPadding) * 1px) Calc (var (-HorizontalPadding) * 1px);
  Übergang: Box-Shadow 0,15s Leichtigkeit;
}

Taste: Hover {
  Box-Shadow: Calc (var (-boxShadowDepth) / 2 * 1px) calc (var (-boxShadowDepth) / 2 * 1px) 0 #888;
}

Taste: aktiv {
  Box-Shadow: 0 0 0 #888;
}

Setzen Sie es zusammen und wir bekommen:

sehr gut! Wir haben einen Knopf und einen Schwebeffekt, aber es gibt noch keinen Fülleffekt. Als nächstes fügen wir den Filleffekt hinzu.

Füllung hinzufügen

Dazu erstellen wir einige Elemente, um den Füllstand der Ghost -Taste anzuzeigen. Der Trick besteht darin, clip-path zu verwenden, um diese Elemente zu erregen und sie zu verbergen. Wir können sie im Schwebedruck anzeigen, indem wir clip-path konvertieren.

Sie müssen auf die übergeordnete Taste ausgerichtet sein . Unsere CSS -Variablen werden hier von großer Hilfe sein.

Zuerst könnten wir in Betracht ziehen, Pseudoelemente zu verwenden. Für jede Richtung reicht die Anzahl der Pseudoelemente jedoch nicht aus. Sie beeinflussen auch die Zugänglichkeit… dazu später mehr.

Beginnen wir zunächst eine grundlegende Polsterung von links nach rechts. Lassen Sie uns zunächst einen hinzufügen<span></span> Element. Sollen<span></span> Das Element muss den gleichen Textinhalt wie die Schaltfläche haben.

<button>
  <span>Boo!</span>
  Boo!
</button>

Jetzt müssen wir<span></span> Elemente sind mit Tasten ausgerichtet. Unsere CSS -Variablen erledigen den größten Teil der Arbeit.

 Tastespanne {
  Hintergrund: var (-buttonColor);
  Rand: Calc (var (-Grenze) * 1px) Solid var (-buttonColor);
  unten: calc (var (-Grenzbreite) * -1px);
  Farbe: var (-BG, #fafafa);
  Links: Calc (var (-Grenzbreite) * -1px);
  Polsterung: Calc (var (-VerticalPadding) * 1px) Calc (var (-HorizontalPadding) * 1px);
  Position: absolut;
  Rechts: Calc (var (-Grenzbreite) * -1px);
  Oben: Calc (var (-Grenzbreite) * -1px);
}

Schließlich werden wir<span></span> Das Element ist außerhalb der Ansicht zugeschnitten und fügt eine Regel hinzu, um sie durch Aktualisierung der Ernte in Schwebebe anzuzeigen. Durch die Definition eines Übergangs wird der Kuchen erhöht.

 Tastespanne {
  --Clip: Einschub (0 100% 0 0);
  -Webkit-Clip-Pfad: var (-Clip);
  Clip-Pfad: var (-Clip);
  Übergang: Clip-Pfad 0,25s Leichtigkeit, -Webkit-Clip-Path 0,25s Leichtigkeit;
  / * ... verbleibende Div -Stile *//
}

Taste: Hover Span {
  --Clip: Einschub (0 0 0 0);
}

Richtungsbewusstsein hinzufügen

Wie können wir also Richtungsbewusstsein hinzufügen? Wir brauchen vier Elemente. Jedes Element ist dafür verantwortlich, den Schweber -Einstiegspunkt zu erkennen. Mit clip-path können wir den Knopfbereich in vier Teile unterteilen.

Fügen wir der Taste vier hinzu<span></span> Elemente und positionieren Sie sie, um die Tasten zu füllen.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Boo!
</button>

Tastespanne {
  Hintergrund: var (-BG);
  unten: calc (var (-Grenzbreite) * -1px);
  -Webkit-Clip-Pfad: var (-Clip);
  Clip-Pfad: var (-Clip);
  Links: Calc (var (-Grenzbreite) * -1px);
  Deckkraft: 0,5;
  Position: absolut;
  Rechts: Calc (var (-Grenzbreite) * -1px);
  Oben: Calc (var (-Grenzbreite) * -1px);
  Z-Index: 1;
}

Wir können jedes Element lokalisieren und Pflanzen und Farben mit CSS -Variablen zuweisen.

 Tastespannung: Nth-of-Typ (1) {
  --BG: #00f;
  -Clip: Polygon (0 0, 100% 0, 50% 50%, 50% 50%);
}
Tastespannung: Nth-of-Typ (2) {
  --BG: #f00;
  -Clip: Polygon (100% 0, 100% 100%, 50% 50%);
}
Tastespannung: Nth-of-Typ (3) {
  -BG: #008000;
  -Clip: Polygon (0 100%, 100%100%, 50%50%);
}
Tastespannung: Nth-of-Typ (4) {
  -BG: #800080;
  -Clip: Polygon (0 0, 0 100%, 50%50%);
}

Sehr cool. Um dies zu testen, ändern wir die Opazität, während wir schweben.

 Knopfspanne: N-ten vom Typ (1): schweben,
Knopfspannung: N-ten vom Typ (2): schweben,
Knopfspannung: N-ten vom Typ (3): schweben,
Schaltfläche Span: N-ten-vom-Typ (4): Hover {
  Deckkraft: 1;
}

Oh, hier gibt es eine Frage. Wenn wir hineingehen und über einen Abschnitt schweben und dann über einen anderen schweben, ändert sich die Füllrichtung. Das scheint nicht richtig zu sein. Um dieses Problem zu lösen, können wir z-index und clip-path auf Schwebeplätze einstellen, damit ein Teil des Raums gefüllt ist.

 Knopfspanne: N-ten vom Typ (1): schweben,
Knopfspannung: N-ten vom Typ (2): schweben,
Knopfspannung: N-ten vom Typ (3): schweben,
Schaltfläche Span: N-ten-vom-Typ (4): Hover {
  -Clip: Polygon (0 0, 100% 0, 100% 100%, 0 100%);
  Deckkraft: 1;
  Z-Index: 2;
}

Kombinieren

Wir wissen, wie man Füllanimationen erstellt, und wir wissen, wie man Anweisungen erkennt. Wie kombinieren wir die beiden? Verwenden Sie eine Kombination auf dem gleichen Niveau!

Wenn wir ein Segment schweben, können wir ein bestimmtes Füllelement anzeigen.

Lassen Sie uns zunächst das Tag aktualisieren.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  Boo!
</button>

Jetzt können wir das CSS aktualisieren. In Bezug auf unsere Polsterung von links nach rechts können wir Stile wiederverwenden. Wir müssen nur einen bestimmten clip-path für jedes Element festlegen. Ich habe es in der gleichen Reihenfolge wie einige Attributwerte behandelt. Das erste untergeordnete Element ist das Oberteil, das zweite ist das Recht und so weiter.

 Taste B: N-ten vom Typ (1) {
  --Clip: Einschub (0 0 100% 0);
}
Taste B: N-ten vom Typ (2) {
  -Clip: Einschub (0 0 0 100%);
}
Taste B: N-vom-Typ (3) {
  --Clip: Einschub (100% 0 0 0);
}
Taste B: N-vom-Typ (4) {
  --Clip: Einschub (0 100% 0 0);
}

Der letzte Schritt besteht darin, clip-path des relevanten Elements beim Überschweben des Paarungssegments zu aktualisieren.

 Tastespannung: Nth-of-Typ (1): Hover ~ B: N-ten vom Typ (1),
Knopfspanne: N-ten vom Typ (2): Hover ~ B: N-ten vom Typ (2),
Knopfspanne: N-ten vom Typ (3): Hover ~ B: N-ten vom Typ (3),
Knopfspanne: N-ten vom Typ (4): Hover ~ B: n-vom-Typ (4) {{
  --Clip: Einschub (0 0 0 0);
}

In Ordnung! Wir erhalten einen reinen CSS -Ghost -Knopf mit Richtungsbewusstsein.

Zugänglichkeit

Im aktuellen Zustand ist die Taste unzugänglich.

Diese zusätzlichen Elemente helfen nicht viel, da der Bildschirmleser den Inhalt viermal wiederholt. Wir müssen diese Elemente vor dem Bildschirmleser verbergen.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  Boo!
</button>

Kein doppelter Inhalt mehr.

Das ist alles!

Mit nur einigen zusätzlichen Markierungen und einigen CSS -Tricks können wir Geisterknöpfe mit Richtbewusstsein erstellen. Wenn Sie einen Präprozessor verwenden oder eine Komponente in Ihrer Anwendung kombinieren, müssen Sie nicht alle HTML ausschreiben.

Dies ist eine Demonstration der Verwendung von Inline -CSS -Variablen zur Steuerung der Schaltfläche.

Diese überarbeitete Ausgabe behält das Originalbild bei und verwendet präzise und abwechslungsreichere Phrasierung, während die Kernbedeutung des Originaltextes erhalten bleibt. Es befasst sich auch mit dem im Originalartikel genannten Zugangsproblem.

Das obige ist der detaillierte Inhalt vonGeisterknöpfe mit Richtungsbewusstsein in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!