Erstellen Sie animierte CSS-Grafiken
Das Erstellen von CSS-Bildern ist eine unterhaltsame Möglichkeit, Ihre Fähigkeiten zu üben und ein ordentliches Kunstwerk zu erstellen. Es ist eine schöne Abwechslung vom alltäglichen Styling von Webkomponenten. Sie müssen lediglich ein leeres Dokument und eine CSS-Datei erstellen. Wir empfehlen die Verwendung von Sass, mit dem Sie Ihre Stile wiederverwenden und einfachere Selektoren schreiben können (siehe unsere Anleitung zu) Was ist Sass? um mehr über diesen Präprozessor zu erfahren).
Wir beginnen mit einigen Top-Tipps zum Beherrschen von CSS-Grafiken und zeigen Ihnen dann, wie Sie diesen animierten Ballon Pikachu nur mit CSS neu erstellen können (stellen Sie sicher, dass Ihre Dateien in angemessenem Maße sicher sind Cloud-Speicher ).
Weitere Inspirationen finden Sie in unserer Zusammenfassung der Erstaunlichen Beispiele für CSS-Animationen . Nach etwas grundlegenderem? Beginnen Sie mit dem Lernen Wie erstelle ich einen Eislutscher mit CSS? .
Oder, wenn Sie eine neue Site starten, lassen Sie die Komplexität mit einem Brillanten hinter sich Webseitenersteller und stellen Sie sicher, dass Sie Ihre bekommen Web-Hosting genau richtig.
Reduzieren Sie das Design auf einfache Formen
Beim Erstellen von CSS-Grafiken kann es hilfreich sein, einige Referenzbilder als Inspiration zu betrachten und dann im Laufe der Zeit eine vereinfachte Cartoon-Variante zu erstellen, bei der das Motiv anhand primitiver Formen vorgestellt wird, die besser werden CSS-Formen .
Verwenden Sie einen hellen Hintergrund, um die Positionierung zu erleichtern
Wenn sich Formen ähnlicher Farben überlappen, ist es schwierig zu erkennen, wo sie platziert werden oder wie sie aussehen. Es ist nützlich, die Form, an der Sie arbeiten, hervorzuheben, indem Sie die ändern Hintergrundfarbe zu etwas Hellem und Fröhlichem wie Magenta. Auf diese Weise können Sie die genaue Position und Form Ihres Elements leicht erkennen.
Verwenden Sie Flüssigkeitsgrößen
Wenn Sie einen px-Wert für Eigenschaften definieren möchten, empfehlen wir die Verwendung der rem-Einheit. Für den Fall, dass Sie entscheiden, dass Ihr Gesamtstück größer oder kleiner sein soll, müssen Sie durch die Verwendung von Rem-Einheiten nur die Basis ändern html {Schriftgröße:… px} in Ihrem Sass, um das gesamte Kunstwerk nach oben oder unten zu skalieren.
Bei der Definition der Höhen und Breiten von untergeordneten Elementen, die eine relative Größe zum übergeordneten Element haben sollten, sind Prozentsätze hilfreich. Da diese Werte immer relativ zu ihrem übergeordneten Wert sind, sollten sie auch mit dem skaliert werden HTML-Schriftgröße .
01. Beginnen Sie mit Containern
Ein Verpackungsbehälter für die Kunstwerke ist ein guter Anfang. Innerhalb des Behälters können wir drei innere Behälter platzieren - den Kopf, den Körper und die Luftballons.
Der Behälter sollte normalerweise sein Position: relativ damit andere Elemente mit relativ dazu platziert werden können Position: absolut und haben eine genau definierte Höhe und Breite, sonst wird das Positionieren von untergeordneten Elementen schwierig.
Fügen Sie in Ihren Stilen Ihre Grundfarben als Sass-Variablen hinzu, um die Wiederverwendbarkeit zu gewährleisten. Der Sass erleichtern() und verdunkeln() Funktionen erzeugen Farbtöne und Schattierungen Ihrer Farben, die als Glanzlichter oder Schatten für Ihren Charakter verwendet werden können.
02. Stylen Sie den Kopf
Nachdem die Struktur herausgefunden wurde, stylen wir den Kopf zuerst. In diesem Fall bildet der Kopf einen schönen Mittelpunkt für das Bildmaterial. Anstatt seine Position auf absolut zu setzen, kann er auf relativ gesetzt werden. Dies ermöglicht es dem Container, ein stabiles Element in sich zu haben, wodurch die anderen schwebenden absoluten Elemente einen Ankerpunkt erhalten und somit mehr Kontrolle über ihre Position haben.
Die Gesichtszüge benötigen einen Behälter zum Positionieren. Erstellen Sie also einen im Kopfbehälter für die gelbe Form mit Breite, Höhe und Hintergrundfarbe - lassen Sie dieses Rechteck nun eher wie eine Kopfform aussehen. Eine der häufigsten und nützlichsten Eigenschaften in der CSS-Kunst ist die Randradius Eigenschaft, die die Kurve des X oder Y der Ecken eines Felds ändert und zum Erstellen organischerer Formen verwendet werden kann.
Mit dieser Technik mit einer Kombination aus Rem und Prozentsatz können Sie blobartige Formen erstellen und nicht nur einfache Ellipsen, die sich auf natürliche Weise mit der skalieren lassen html {Schriftgröße:… px} ::
.face { border-top-left-radius: 50% 4.5rem; border-top-right-radius: 50% 4.5rem; border-bottom-left-radius: 50% 3rem; border-bottom-right-radius: 50% 3rem; ... }Nach der Perfektionierung des Kopfes Randradius Positionieren Sie den Rest der Gesichtszüge als untergeordnete Elemente des Kopfes, wie Augen, Wangen, Nase und Ohren. Wie der Kopf, der Randradius Trick wird sich seitdem als nützlich erweisen Randradius: 50% sieht vielleicht nicht ansprechend aus.
03. Gehen Sie weiter zum Körper
Ein Körper kann innerhalb des Körperbehälters hinter dem Kopf platziert und mit diesem geformt werden Randradius Technik sowie die Arme, Beine und Schwanz. Um eine ordnungsgemäße Überlappung zu ermöglichen, sollte der eigentliche Körper ein eigenes Element sein, da bestimmte innere Elemente wie die hinteren Streifen abgeschnitten werden müssen Überlauf versteckt . Um dem Körper mehr Tiefe zu geben, wird der transformieren: skew () Eigentum kann den Körper leicht scheren.
Der Blitzschwanz kann aus drei separaten Rechtecken aufgebaut werden, anstatt zu versuchen, diese Form aus einem Element zu formen. Die Rechtecke können gedreht und übereinander positioniert werden, um einen Bolzen zu bilden. Die Arme und Beine können die dunklere Grundfarbe verwenden, die wir mit Sass erstellt haben verdunkeln() so fallen sie auf.
04. Luftballons hinzufügen
Nachdem die elektrische Maus fertig ist, binden wir Luftballons an den Rücken. Fügen Sie einige hinzu s mit gemeinsam genutzten Stilen mit einer untergeordneten Zeichenfolge und positioniere sie gebündelt über dem Kopf. Die Zeichenfolge ist bis auf a unsichtbar Rand links , die dazu beitragen, dass es eher wie eine Saite aussieht.
Um die Schnur um die Taille des Charakters zu binden, a kann im Körper platziert werden, um eine korrekte Positionierung zu ermöglichen. Die Saite braucht eine leichte Krümmung, um so auszusehen, als ob sie um den Körper gebunden wäre, damit sie eine kleine Höhe haben kann. Rand unten und ein Rand unten linker und rechter Radius, wodurch eine dünne gekrümmte Linie entsteht:
.string { height: 1rem; width: 9rem; border-right: solid 1px $white; border-left: solid 1px $white; border-bottom: solid 1px $white; border-bottom-left-radius: 50% 1rem; border-bottom-right-radius: 50% 1rem; }05. Animieren Sie das CSS
Wir können dem Charakter Leben geben, indem wir hinzufügen @keyframes Animationen. Die Arme, Beine, Ohren und der Schwanz können mit animiert werden transformieren: drehen () . Sicherstellen, dass die Transformationsursprung wird auf das „Gelenk“ (d. h. die obere Mitte für ein Bein) eingestellt und die Drehung eingestellt. Dieser Animationstyp kann in einem Sass-Mixin mehrmals verwendet werden:
@mixin animateRotate($name, $start, $end) { @keyframes #{$name} { 0%, 100% { transform: rotate(#{$start}deg) } 50% { transform: rotate(#{$end}deg) } } }Zum Schluss eine langsame 5s hinzufügen transformieren: translateY () Die Keyframe-Animation animiert den Charakter auf und ab, als ob er schwebend wäre. Für einen Hauch von Realismus eine blinkende Animation mit transformieren: scaleY (0.1) Eigenschaft kann verwendet werden, um es so erscheinen zu lassen, als ob sich die Augen schließen.
Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Netz . Ausgabe 283 kaufen oder abonnieren .
Weiterlesen:
- 5 Dinge, die Sie nie über CSS wussten
- Fügen Sie SVG-Filter mit CSS hinzu
- So codieren Sie intelligente Texteffekte mit CSS
