Text Effekte mit CSS (und ein kleiner contenteditable-Trick)

Mandy Michael hat mit der reinen Kraft von CSS einige unglaubliche Texteffekte kreiert. Sie nutzt jeden Trick, den sie kennt: Farbverläufe, Transformationen, Pseudo-Elemente, Schatten und Clipping-Pfade, um nur einige zu nennen. Es handelt sich dabei um _echten_ Webtext. Typischerweise benutzerdefinierte Schriftarten, aber keine Bilder, Canvas, SVG oder Ähnliches.

Schauen Sie sich diesen wunderschönen Effekt an

Sehen Sie den Pen CSS-only 3D-Papierfalt-Texteffekt von Mandy Michael (@mandymichael) auf CodePen.

Die Tatsache, dass es sich um echten Text handelt, macht ihn zugänglich, durchsuchbar und natürlich auswählbar

Demos sind ein großartiger Ort, um das Attribut contenteditable zu verwenden, das jedes Textelement in eine Art textarea oder input verwandelt, sodass jeder direkt hineinklicken und den Text ändern kann.

<h1 contenteditable>Cool Title</h1>

Da jedoch viele von Mandys Demos Pseudo-Elemente mit Text verwenden, der mit dem Text im Element selbst übereinstimmen muss, kann der Text aus dem Gleichgewicht geraten

Keine Sorge! Es sind nur ein paar Zeilen JavaScript erforderlich, um diese Textteile synchron zu halten

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-heading", this.innerText);
});

Das `input`-Ereignis ist sehr praktisch, da es jede Änderung des Wertes eines Elements abdeckt, auch bei contenteditable-Elementen. Es hat eine gute Browserunterstützung, nur kein IE (Edge ist in Ordnung). Wenn Sie dies unbedingt für IE benötigen, könnten Sie es immer noch erreichen, indem Sie Ereignisse wie keyup, paste und blur kombinieren. Aber für eine Kleinigkeit wie diese benötigen Sie es wahrscheinlich nicht.

Jetzt sind wir bestens vorbereitet

Aber bevor wir gehen, wollen wir uns noch mehr von Mandys Kreationen ansehen

Sehen Sie den Pen Linien- und Schicht-CSS-Texteffekte von Mandy Michael (@mandymichael) auf CodePen.

Sehen Sie den Pen Gestreifter Regenbogen-Texteffekt von Mandy Michael (@mandymichael) auf CodePen.

Sehen Sie den Pen 3D-Texteffekt mit mehreren Farben und einem einzigen Element von Mandy Michael (@mandymichael) auf CodePen.

Sehen Sie den Pen Gesplitteter, fragmentierter Text von Mandy Michael (@mandymichael) auf CodePen.