HTMLとCSSで完全に作成された10のキャラクターデザイン

CSSでどれだけのことができるのか、私はいつも驚いています。 Web開発者は、CSSを使用すると驚くべきページレイアウトとカスタムアニメーション効果を作成できることを知っています。

しかし、あなたはそれをたくさんの楽しいプロジェクトにも使うことができます。 たとえば、CSSだけでキャラクターデザインを作成するようなものです。 変に聞こえますよね？

まあそれは間違いなくそうです。 そして、私はいくつかの最も奇妙な（しかし最もクールな）キャラクターデザインを集めました。それらはすべて100％純粋なHTMLとCSSコードから作られています。

1.アングリーバード

Angry Birdsを愛していないのは誰ですか？ 彼らはゲームとして始まり、ポップカルチャーに穴をあけた後、どういうわけか彼ら自身の映画を手に入れました。

そして、レイチェル・ブルによるこのペンは、AngryBirdsがCSSへの道を見つけることさえできることを証明しています。

皮肉なことに、このページには1つの画像があり、それは一番上にカスタムタイプを埋め込むために使用されます。 それらの鳥の曲線からカスタムグラデーションまで、他のすべての要素はすべて純粋なCSSで実行されます。

おそらく最も実用的なコードスニペットではありませんが、確かにインスピレーションです。

2.フランケンシュタイン

メアリーシェリーのフランケンシュタインは、復活した緑の肌の生き物として広く知られています。 技術的にはフランケインスタインの怪物ですが、それは舌からうまく転がりません。

そして、このフランケンシュタインの生き物は多少誤ったタイトルが付けられているかもしれませんが、それでも私が見た中で最高のキャラクターデザインの1つです。

わずか40行のHTMLで動作し、開発者のVictoria Ninni Bergquistは、モンスターの瞬きを助けるためにCSSを追加しました。 かなりきちんと！

3.トイストーリーエイリアン

ピクサーのトイストーリーには非常に多くの記憶に残るキャラクターがいて、これらの奇抜なエイリアンの男は確かにそのキャストの一部です。

Sunyoung Parkは、CSSのデモとして、またフロントエンドコーディングの境界をテストするためにこのペンを作成しました。 すべての主要なブラウザ、さらには一部の古いブラウザでも正しくレンダリングされるはずです。 それはrotate（）プロパティにかなり依存していますが。

幸いなことに、これはIE9+にまでさかのぼるブラウザーをサポートするCSS変換機能の一部として提供されます。 したがって、この小さな緑のエイリアンは、インターネットに接続された世界のほとんどを喜ばせることができます。

4.アクアク

あなたがプレイステーションを持っていたなら、あなたはおそらくクラッシュバンディクーについて知っているでしょう。 さて、アク・アクという名前のこの狂った男は、マスク…生き物…ものの完璧なレプリカです。

各要素には、その機能（つまり、目、鼻唇）を定義する関連クラスを持つ独自のdivがあります。

このデザイン全体の中で最も難しい部分は、彼の頭の羽の冠です。 さらに、ゲーマーが古いクラッシュゲームを手に入れるように促すかもしれないクールなアニメーション。

5.赤ちゃんゼニガメ

これは、CSSキャラクターデザインと混合されたアニメーションのもう1つの優れた例です。

Josh Baderは、純粋なCSSとわずか15行のHTMLを使用してこのSquirtle文字をコーディングしました。 印象的！

歩行効果を得るために、Joshは：after疑似クラスを各要素に繰り返しアニメーションで追加しました。 内部を見ると驚くほど単純な偉業であり、このようなキャラクターを構築するためにこのような小さなコードがどのように必要であるかはさらに驚くべきことです。

6.モーティのないリック

このペンには、純粋なCSSでちびキャラのリックを作成した開発者のジェームズギルモアの奇抜な作品があります。

デザインは実際にいくつかの素晴らしいCSSドロップシャドウを使用して奥行きを作成し、このキャラクターに生命を与えています。 デザインとの相性も抜群の繰り返しアニメーションは言うまでもありません。

これはSassでも実行され、いじくり回したい場合は、コードにカスタム変数があることに注意してください。 それは非常によくフォーマットされているので、これはSassを学ぶために勉強するための素晴らしいスニペットになるでしょう。

7.ブライアン・グリフィン

これはレイチェルブルによる別のキャラクターデザインで、これはファミリーガイのブライアングリフィンをフィーチャーしています。

純粋なCSSだけでどれだけ詳細を取得できるかは驚くべきことです。 ブライアンの全体のスタイルはショーのアートスタイルと密接に一致しており、信じられないほどリアルに感じるドロップシャドウを使用しています。

これは150行以上のCSSを備えたかなり技術的なものですが、起動にはCompassライブラリを使用しています。

8.エメット

レゴムービーから、それは彼の栄光のすべてのエメットです。 Rachelは、CSSとHamlを使用して、このスニペットを最初から作成しました。これは、最新のHTMLを作成するための簡略化された方法です。

これらの要素のいくつかは、CSSだけで実行するのに非常に印象的です。 特に、旋毛は本当にプラスチックのレゴのピースのように見えます。 これさえ可能であることに夢中！

CSSには素晴らしいSassロジックがたくさんあります。開発者であれば、このペンをいじって楽しむことができます。 コードと結果の両方が素晴らしいです。

9.CSSイーブイ

ポケモンGO現象を中心に構築されているのは、DavidKhourshidによって作成されたこの純粋なCSSEeveeです。

純粋なCSSでポケモン全体を再作成しながら、アプリケーションと同様の背景とページスタイルを使用します。 少しのテクスチャリングといくつかのインテリジェントなレイヤリングにより、Davidはこのイーブイを実際に3Dに見せました！

アニメーションもいい感じで、全体がよりリアルに感じられます。 あなたがポケモンのファンであるか、ゲームに触れたことがないかどうかにかかわらず、これは良い仕事であることを認めなければなりません。

10.ミッキーマウス

このミッキーマウスの頭は少しシンプルですが、それもかなりの偉業です。 静的であるため管理が簡単だと思うかもしれませんが、ペンは450行以上のSassを押します。

最も技術的な部分は、すべての形状を順番に取得し、要素を再配置して互いに適切に位置合わせすることです。

それでも結果は素晴らしく、初期のミッキーの漫画に似ていることがわかります。

11.ゼルダ姫

私はこのゼルダのキャラクターデザインで最後まで最善を尽くしました。 彼女は足が少し短いですが、全体的にスタイルは正確です。

開発者のCharlieMarcotteは、SassとカスタムCSS変換を使用して、すべての要素を配置します。 さらに、生のHTMLは、Pugプリプロセッサのおかげでかなり単純化されています。

CSSの知識の限界を押し広げようとしているのなら、同様のプロジェクトに参加してみませんか？ それはあなたのスキルをテストするための素晴らしい方法であり、あなたが構築したものは何でも以下のコメントでいつでも共有することができます。