Das Textlogo hat einen durch den Text geschnittenen Schrägstrich. Sie legen zwei Kopien übereinander und beschneiden beide mit der Eigenschaft clip-path.
Was mich fasziniert, ist, wie viele coole Designeffekte mehrere Kopien eines Elements erfordern, um etwas Cooles zu machen. Um die zusätzliche Kopie zu erhalten, können wir bei Text manchmal ein Pseudoelement verwenden. Für aufwendigere Inhalte gibt es die element()-Funktion in CSS, aber diese ist in Firefox auf eine Präfix-Eigenschaft beschränkt. Dennoch ermöglicht sie fantastische Dinge, wie z.B. die Erstellung einer Mini-Karte langer Inhalte.
Sie können es mit einem Pseudoelement anders gestalten, was hier nützlich war. Es wäre cool, eines Tages eine Möglichkeit zu sehen, Elemente auf einer Seite zu klonen und Styling komplett über CSS anzuwenden...
Siehe den Pen
His Dark Materials TV series logo with CSS von Michelle Barker (@michellebarker)
auf CodePen.
Sehr cool! Sieht toll aus.
Ich weiß, dass Chris Bescheid weiß und dies kein Beitrag zur Barrierefreiheit ist, aber für alle, die sich für Barrierefreiheit interessieren: Fügen Sie
aria-label="His Dark Materials"hinzu, da die Pseudoelemente dazu führen würden, dass Screenreader dies dreimal vorlesen.Mein Fehler, ich sehe, dass es einen Link zu einem Artikel gibt, der die Überlegungen zur Barrierefreiheit enthält.
Zusätzlich dazu könnten Sie die CSS-Eigenschaft
contentaufattr(aria-label)setzen, um sowohl Barrierefreiheit als auch Pseudoinhalt in einem Attribut abzudecken.