10 Zeichendesigns, die vollständig mit HTML und CSS erstellt wurden

Ich bin immer wieder überrascht, wie viel man mit CSS machen kann. Webentwickler wissen, dass Sie mit CSS einige unglaubliche Seitenlayouts und benutzerdefinierte Animationseffekte erstellen können.

Aber Sie können es auch für viele lustige Projekte verwenden. Wie zum Beispiel das Erstellen von Charakterdesigns nur mit CSS. Klingt komisch oder?

Nun, das ist es definitiv. Und ich habe einige der seltsamsten (aber coolsten) Charakterdesigns gesammelt, die alle aus 100 % reinem HTML- und CSS-Code bestehen.

1. Wütende Vögel

Wer liebt Angry Birds nicht? Sie begannen als Spiel und bekamen irgendwie ihren eigenen Film, nachdem sie die Popkultur durchbohrt hatten.

Und dieser Stift von Rachel Bull beweist, dass die Angry Birds sogar in CSS Einzug halten können.

Ironischerweise gibt es auf dieser Seite ein Bild, das verwendet wird, um den benutzerdefinierten Typ ganz oben einzubetten. Alle anderen Elemente, von den Kurven dieser Vögel bis zu den benutzerdefinierten Farbverläufen, laufen alle auf reinem CSS.

Vielleicht nicht das praktischste Code-Snippet, aber sicherlich eine Inspiration.

2. Frankenstein

Mary Shelleys Frankenstein ist weithin als die wiederbelebte grünhäutige Kreatur bekannt. Obwohl es technisch Frankeinsteins Monster ist, rollt das nicht so gut von der Zunge.

Und obwohl diese Frankenstein-Kreatur vielleicht etwas falsch betitelt ist, ist sie dennoch eines der besten Charakterdesigns, die ich je gesehen habe.

Es funktioniert mit nur 40 Zeilen HTML und die Entwicklerin Victoria Ninni Bergquist hat sogar etwas CSS hinzugefügt, um dem Monster beim Blinken zu helfen. Ziemlich ordentlich!

3. Toy Story-Alien

Pixars Toy Story hat so viele denkwürdige Charaktere und diese verrückten Außerirdischen gehören sicherlich dazu.

Sunyoung Park baute diesen Stift als Demo für CSS und um die Grenzen der Frontend-Programmierung zu testen. Es sollte in allen gängigen Browsern und sogar einigen älteren Browsern korrekt gerendert werden. Obwohl es sich ziemlich auf die Eigenschaft "rotate()" stützt.

Glücklicherweise ist dies Teil der CSS-Transformationsfunktion, die Browser ab IE9+ unterstützt. Dieser kleine grüne Alien kann also den größten Teil der mit dem Internet verbundenen Welt erfreuen.

4. AkuAku

Wenn Sie eine PlayStation hatten, kennen Sie wahrscheinlich Crash Bandicoot. Nun, dieser verrückte Typ namens Aku Aku ist eine perfekte Nachbildung der Maske … Kreatur … Sache.

Jedes Element hat sein eigenes div mit einer relevanten Klasse, die dieses Merkmal definiert (z. B. Auge, Nasenlippe).

Ich würde sagen, der schwierigste Teil dieses ganzen Designs ist die Federkrone auf seinem Kopf. Plus die coolen Animationen, die Spieler dazu ermutigen könnten, ihre alten Crash-Spiele aufzugreifen.

5. Babyschiggy

Hier ist ein weiteres großartiges Beispiel für Animation gemischt mit CSS-Zeichendesign.

Josh Bader hat diese Squirtle-Figur mit reinem CSS und nur 15 Zeilen HTML codiert. Beeindruckend!

Um den Laufeffekt zu erzielen, fügte Josh die :after -Pseudoklasse mit einer sich wiederholenden Animation an jedes Element an. Eine überraschend einfache Leistung, sobald Sie unter die Haube schauen, und es ist noch überraschender, wie wenig Code erforderlich ist, um Charaktere wie diese zu erstellen.

6. Rick ohne einen Morty

In diesem Stift finden Sie die verrückte Arbeit des Entwicklers James Gilmore, der in reinem CSS einen Chibi-förmigen Rick geschaffen hat.

Das Design verwendet tatsächlich einige nette CSS-Schlagschatten, um Tiefe zu erzeugen und diesem Charakter etwas Leben einzuhauchen. Ganz zu schweigen von der sich wiederholenden Animation, die sich auch gut in das Design einfügt.

Beachten Sie, dass dies auch auf Sass läuft und wenn Sie daran basteln möchten, gibt es benutzerdefinierte Variablen im Code. Es ist sehr gut formatiert, daher wäre dies ein großartiger Ausschnitt zum Lernen von Sass.

7. Brian Griffin

Hier ist ein weiteres Charakterdesign von Rachel Bull, diesmal mit Brian Griffin von Family Guy.

Es ist überraschend, wie viele Details Sie mit reinem CSS erreichen können. Der gesamte Stil von Brian passt eng zum Kunststil der Show und verwendet Schlagschatten, die sich unglaublich realistisch anfühlen.

Obwohl dieser mit weit über 150 CSS-Zeilen ziemlich technisch ist und die Compass-Bibliothek zum Booten verwendet.

8. Emmett

Aus The Lego Movie ist es Emmet in all seiner Pracht. Rachel hat dieses Snippet wieder einmal von Grund auf neu erstellt und dabei CSS und Haml verwendet, die vereinfachte Art, modernes HTML zu schreiben.

Einige dieser Elemente sind wirklich beeindruckend, wenn sie nur auf CSS ausgeführt werden. Bemerkenswerterweise sehen die Haarwirbel wirklich wie Plastik-Lego-Teile aus. Wahnsinn, dass das überhaupt möglich ist!

Es gibt eine Menge großartiger Sass-Logik im CSS, und wenn Sie ein Entwickler-Nerd sind, werden Sie es genießen, in diesem Stift herumzustöbern. Sowohl der Code als auch das Ergebnis sind großartig.

9. CSS Evoli

Dieses reine CSS-Eevee von David Khourshid ist um das Pokemon Go-Phänomen herum aufgebaut.

Es verwendet einen ähnlichen Hintergrund und Seitenstil wie die Anwendung, während das gesamte Pokémon in reinem CSS neu erstellt wird. Mit ein wenig Texturierung und intelligenten Schichten hat David dieses Eevee tatsächlich in 3D aussehen lassen!

Die Animationen sind auch eine nette Geste und lassen das Ganze realistischer wirken. Egal, ob Sie ein Fan von Pokémon sind oder das Spiel noch nie berührt haben, Sie müssen zugeben, dass dies gute Arbeit ist.

10. Micky Maus

Dieser Mickey-Mouse-Kopf ist zwar etwas einfacher, aber auch eine ziemliche Leistung. Sie denken vielleicht, dass es einfacher zu handhaben wäre, weil es statisch ist, aber der Stift drückt über 450 Zeilen Sass.

Der technischste Teil besteht darin, alle Formen in Ordnung zu bringen und die Elemente neu anzuordnen, um sie richtig übereinander auszurichten.

Doch das Ergebnis ist fantastisch, und Sie können die Ähnlichkeit mit frühen Mickey-Cartoons erkennen.

11. Prinzessin Zelda

Mit diesem Zelda-Charakterdesign habe ich mir das Beste zum Schluss aufgehoben. Sie ist ein bisschen kurz in den Beinen, aber insgesamt ist der Stil akkurat.

Entwickler Charlie Marcotte verwendet Sass und benutzerdefinierte CSS-Transformationen, um alle Elemente anzuordnen. Außerdem wird das Roh-HTML dank des Pug-Präprozessors erheblich vereinfacht.

Wenn Sie versuchen, die Grenzen Ihres CSS-Wissens zu erweitern, warum nehmen Sie nicht ein ähnliches Projekt in Angriff? Es ist eine großartige Möglichkeit, Ihre Fähigkeiten zu testen, und Sie können jederzeit in den Kommentaren unten teilen, was Sie bauen.