Ich habe kürzlich mit einem Kollegen über die Vorzüge und die verschiedenen Merkmale von CSS-Präprozessoren gesprochen. Wir haben alle Grundlagen besprochen: Wie toll Variablen sind und wie Sie mit Mixins unglaublich viel Codierzeit sparen können. Als sich das Gespräch auf einige obskurere Funktionen konzentrierte, wurden die Dinge interessant. Als ich die verschiedenen Farboperationen ansprach, erklärte mein Kollege mutig, dass es sich nicht um "echte Designer" handelt. könnte jemals eine legitime Entschuldigung dafür finden, dieses Feature zu verwenden und seine eigenen Farben nicht manuell auszuwählen.
In den Worten von Barney Stinson "Herausforderung angenommen!" Heute werden wir mit reinem CSS einen fantastischen faux 3D-Texteffekt erzeugen und dann sehen, warum es mit den Farboperationen in Sass oder LESS viel einfacher ist.
Lassen Sie uns etwas 3D-Text erstellen
Es gibt nicht wirklich eine großartig So können Sie einen 3D-Effekt mit CSS anwenden. Es gibt keine Textextrakte? Eigentum, obwohl das in der Tat ziemlich fantastisch wäre. Stattdessen müssen wir es fälschen. Eine der populärsten Methoden, dies zu tun, besteht darin, einen ganzen Haufen Textschatten aufzustellen (Effekt, den Mark Otto hier zeigt). Wie bei CSS-Hintergründen können Text-Schatten wiederholt gestapelt werden, um wirklich interessante Ergebnisse zu erzielen.
Spitze: IE hasst Webdesigner, sodass er nichts Cooles wie Text-Schatten unterstützt. Verwenden Sie Modernizr zum Ausgleich.
Die Grundlage
Beginnen wir langsam und erstellen Sie die grundlegende HTML- und CSS-Grundlage, die wir zum Erstellen eines schönen großen Textobjekts benötigen, mit dem Sie arbeiten können. Alles, was wir für den HTML-Code benötigen, ist ein h2 mit etwas Text und einer einzelnen Klasse.
Nun zu etwas CSS. Für den Moment zielen Sie einfach auf h2 und wenden Sie einige grundlegende Stile an. Ich wandelte den Text in Großbuchstaben um und verwendete einige Abkürzungen, um eine Reihe von Schrifteigenschaften auf einmal anzuwenden: Schriftgröße Schriftgröße / Zeilenhöhe.
Damit sollten Sie einen einfachen Textblock haben, der in jeder Hinsicht ziemlich unscheinbar ist. Fürchte dich nicht, wir werden es mit den nächsten Schritten atemberaubend cool machen!
Einen Text-Schatten anwenden
Um den 3D-Verifizierungsprozess zu starten, wählen Sie eine Farbe aus, die Sie mögen, und wenden Sie sie auf die Dreibettzimmer-Klasse an. Wenden Sie dann einen etwas dunkleren Farbton als Textschatten an. Ich habe angegeben, wie die Syntax mit einem Kommentar funktioniert. Beachten Sie, dass sowohl der horizontale Versatz als auch die Unschärfe auf Null gesetzt sind. Wir wollen einen harten Schatten, der südlich unseres Textes liegt.
Wenn Sie einen guten und schnellen Weg benötigen, um verschiedene Nuancen einer bestimmten Farbe zu finden, besuchen Sie 0to255, eine super praktische, kostenlose Web-App, die ich ständig verwende.
Nach diesem Schritt können Sie die Auswirkungen des Textschattens deutlich sehen. Wie Sie sehen, schneidet ein Schatten es nicht ganz. Wir nähern uns einem 3D-Effekt, aber im Moment sieht es wirklich aus wie ein Schatten. Wir müssen diese Lücken füllen.
3D gehen
Um die Lücken zu füllen, müssen wir nur noch einige Textschatten hinzufügen. Es wird nicht wirklich einen nahtlosen Übergang schaffen, aber Ihre Augen sind faul und neigen dazu, die separaten Schatten als eine einzige Entität wahrzunehmen, wenn Sie nicht genau hinschauen.
Um mehrere Schatten anzuwenden, trennen Sie diese einfach durch ein Komma. Stellen Sie sicher, dass jeder etwas mehr Versatz als der letzte ist, sodass wir diesen schönen Extrusionseffekt erzielen.
Danach sollten Sie einen wirklich schönen 3D-Effekt haben, der Gestalt annimmt. Die Buchstaben sehen wirklich extrudiert aus!
Beachten Sie, dass alle meine Schatten die gleiche Farbe haben. Dies führt zu einem sehr flachen, kartonierten 3D-Effekt. Wenn es das ist, was Sie wollen, großartig, aber wir wollen etwas mit einem bisschen mehr Realismus. Um dies zu erreichen, können wir jeden nachfolgenden Schatten etwas dunkler machen.
Hier gibt es einen kleinen Kompromiss. Es ist viel einfacher, die einzelnen Schatten auf diese Weise zu sehen, aber ich mag den Verdunkelungseffekt lieber als den flachen Look.
Feinschliff
Wir sind immer noch nicht ganz auf der realistischen Bühne. Das Problem, das ich jetzt sehe, ist, dass der dreidimensionale Text den Hintergrund nicht beeinflusst. Beheben wir dies mit ein paar weiteren Schatten, diesmal mit etwas Unschärfe und Transparenz.
Damit sind wir alle fertig! Es ist keineswegs so scharf wie das, was wir mit Photoshop erreichen könnten, und eine Stunde zum Töten, aber angesichts des reinen CSS ist das ziemlich beeindruckend!
Das Problem mit dieser Methode
Das Hauptproblem, das ich mit dieser Methode habe, ist, dass sie nicht sehr flexibel ist. Da wir insgesamt fünf verschiedene Variationen einer Farbe verwenden, bedeutet dies, dass das Ändern der Farbe des 3D-Texts ein echter Schmerz ist!
Angenommen, ich wollte den Text in blau ändern. Ich muss nicht nur mein primäres Blau auswählen, sondern auch jeden der Schatten anwenden, während das Blau allmählich dunkler wird.
Sicher, es ist nicht die schwierigste Sache der Welt, aber nachdem ich mich mit ein paar Farbvariationen für diesen Artikel beschäftigt habe, kann ich definitiv sagen, dass es eine zeitraubende Aufgabe ist. Ich hasse es, dass meine gesamte Arbeit nicht wiederverwendbar ist.Ich wünschte, ich könnte einfach den 3D-Effekt anwenden, eine einzelne Farbe auswählen und den Rest automatisch erledigen lassen.
Sass zur Rettung
Wie Sie zweifellos schon vermuten, ist dies eine Situation, in der sich die Sass-Farboperationen als äußerst hilfreich erweisen würden. Ja, ich bin ein echter Designer. Ja, ich ziehe es vor, Farbschemata manuell auszuwählen. Dieser Prozess ist jedoch keine Raketenwissenschaft und fühlt sich wirklich so an, als müsste er automatisiert werden. Solange ich die Startfarbe wählen kann, macht es mir nichts aus, dass Sass sich um den Rest kümmert.
Mixin erstellen
Hier werden die Dinge ziemlich schick. Wenn Sie also Ihre Hausaufgaben nicht bei Sass gemacht haben, empfehle ich Ihnen, das offizielle Tutorial zu lesen.
Wir werden diesen gesamten 3D-Prozess in ein schönes kleines Mixin umwandeln, das mit sehr wenig Aufwand angewendet werden kann. Um dies zu tun, verwenden wir das? @Mixin? Syntax, dann nennen Sie unser Mixin. Hier ist die Struktur des Startcodeblocks:
Übergabe von Parametern
Da wir möchten, dass dies etwas ist, das wir spontan initiieren können, müssen wir in der Lage sein, eine Farbe zu übergeben. Dazu erstellen wir eine Variable und platzieren sie in den Klammern. Beachten Sie, dass Sass-Variablen mit dem Dollarzeichen beginnen.
Hauptfarbe einstellen
Jetzt ist es Zeit, dieses Mixin zum Laufen zu bringen. Wir möchten, dass die übergebene Farbe auf die Farbeigenschaft angewendet wird. Dies geschieht genau wie bei normalem CSS, nur verwenden wir unsere Variable, anstatt tatsächlich einen Farbcode einzugeben.
Farbe verdunkeln
Bevor wir den Schatten erzeugen, müssen wir lernen, wie eine Farboperation von Sass funktioniert. Wie wir oben gesehen haben, muss unser Schatten mit jeder Implementierung schrittweise dunkler werden. Sass kann das mit der Abdunkelungsoperation leicht für uns erledigen.
Hier habe ich die Abdunkelungsoperation initiiert, die zuvor eingestellte Variable übergeben und ihr einen Wert von 10% gegeben. Dadurch wird eine Farbe zurückgegeben, die um 10% dunkler als alles andere ist $ farbe ist eingestellt auf.
Die Schatten erzeugen
Nun, da wir wissen, wie alles funktioniert, ist es Zeit, es zusammenzusetzen und unsere Textschatten zu erstellen. Hier ist das vollständige Mixin-Snippet. Wir erstellen das Mixin, übergeben eine Variable, setzen die Textfarbe auf diese Variable und bauen dann unsere Schatten mit dunkleren Variationen dieser Variablen auf.
Das Mixin implementieren
Dieser kleine Ausschnitt oben erlaubt uns, mit fast jeder Arbeit fancy 3D-Text in beliebiger Farbe zu erstellen. Wir müssen lediglich den Include-Befehl ausführen, den Namen des Mixins angeben und in einer Farbe übergeben. Es ist eine schöne Sache.
Wie einfach ist das? Wenn wir uns jetzt für eine neue Farbe entscheiden, ist das Ändern schnell und schmerzlos.
Versuchen Sie, die Schriftart zu ändern
Beachten Sie, dass dies mit live auswählbarem / bearbeitbarem Text geschieht. Dies eröffnet viele tolle Möglichkeiten. Versuchen Sie es beispielsweise mit einem Google Web Font wie Medula One, um einen wirklich beeindruckenden Effekt zu erzielen.
Live Demo
Klicken Sie hier, um die Sass-Version unseres Drei-Personen-Mixins zu sehen.
Jetzt mit WENIGER
Ich war früher ein WENIGER, aber die Tiefe und Kraft von Sass hat mich überzeugt. Ich denke jedoch immer noch, dass LESS ein fantastisches Werkzeug ist und möchte Sie nicht davon abhalten, es in irgendeiner Weise zu verwenden. Beide Vorprozessoren haben ihre Vorzüge. Wenn Sie also weniger LESS mögen, verwenden Sie das stattdessen. Beide geben am Ende reines CSS aus, also liegt es an Ihnen, wie Sie dorthin gelangen.
Ich habe zufällig aus früheren Artikeln erfahren, dass einige unserer Leser LESS-Fans sind, also wollte ich nicht, dass jemand diesen fantastischen Effekt verpasst. LESS teilt tatsächlich die Sass-Farboperationen, sodass wir mit dieser Syntax leicht eine ähnliche Mischung erstellen können. Tatsächlich ist die LESS-Version tatsächlich übersichtlicher, da wir die @ mixin / @ include-Syntax, die Sass benötigt, ausrangieren können.
Wie Sie sehen, sind die beiden Versionen sehr ähnlich. Beachten Sie, dass Less das @ -Symbol für Variablen verwendet und dass Mixins Klassen tatsächlich in Form spiegeln, was sowohl praktisch als auch etwas verwirrend ist.
Fazit
Letztendlich stimme ich zu, dass Sie sich nicht an einen CSS-Präprozessor wenden sollten, um Ihre Designarbeit für Sie zu erledigen. Farbpaletten sollten nach dem Abwägen verschiedener Faktoren sorgfältig erstellt werden. Das bedeutet jedoch nicht, dass automatische Farboperationen unbrauchbar sind. Ich hoffe, dass ich ein klares Beispiel gezeigt habe, bei dem durch die Abdunkelungsoperation in Kombination mit einem Mixin ein unendlich besserer Workflow für einen hervorragenden 3D-CSS-Effekt entsteht. Ich würde gerne Ihre Gedanken zu anderen Möglichkeiten hören, wie Sie Farboperationen in einem recht nützlichen Arbeitsablauf verwenden können.
Wenn Sie 3D-Text in eines Ihrer Projekte implementieren möchten, sollten Sie Design Curate, unsere großartige Download-Site, im Auge behalten. In Kürze werden wir dort einige wirklich großartige Ressourcen veröffentlichen, die auf diesem Tutorial basieren.