レイアウト、フロントエンド開発、およびWebデザインに興味がある人は、過去数か月間、HTMLとCSSを使用して作成されたアニメーション画像がWeb上でますます登場し始めていることに気付いているでしょう。 この記事では、この傾向がどこから来たのか、チップが何であるのか、なぜレイアウトデザイナーの間で人気が出たのかを説明しようとします（そして、誰かが聞いたことがないかもしれませんが、このタイプのアクティビティに精通することは興味深いかもしれません）。
どのようにすべてが始まりましたか？
2016年6月、Stela Seldanoから、ある種のクエストに参加するという申し出がありました。 アイデアは、HTMLとCSSを使用している参加者がペンギンの写真を作成し、それをパブリックディスプレイに配置し、ニンジン（好きなもの、ニンジンだけのようなもの）の形で評価があり、クエストの終了後にソースが開き、誰が見えるかを確認することでした彼が問題の解決にどのようにアプローチしたか。 この瞬間まで、私は会ったことのないそのようなクエストに加えて、多くの自由時間があったので、試してみることにしました。 このプロセスは非常にエキサイティングでした。 以前に同じサイトレイアウトを多かれ少なかれ作成した場合、すべてが異なっていました。 さまざまなCSS機能を使用して、実際にこのペンギンを描く必要がありました。 それはかなりいものになりましたが、他の開発者からいくつかの注目を集め、彼らは競争し始めました-誰がより良くなるでしょう。 誰もそのような写真を作成しようとしませんでしたが、物事は前進しました。 それから、 ねずみ 、 たき火 、 ダンスサボテンさえありました。
クエストの参加者はcodepenとtwitterのアクティブユーザーであったため、写真を作成するトピックにさらに多くの人々を引き付けました。 そこで、デイリーCSSイメージのクエストが登場しましたが、今日では人気が高まっています。
なぜこれを行うのですか？
これはおそらく最もよくある質問です。 同じAdobe IllustratorでSVGを使用してこれを実行し、JavaScriptでアニメーション化する方が簡単だと多くの人が言います。 そして、この質問に対する最も一般的な答えは、私たちができるからだということです。 これは競争です。 これはゲームです。 これは脳のためのトレーニングです。 これは独特の芸術形態であり、仕事の過程に喜びをもたらすだけでなく、何か新しいものを開発し、常に学ぶことを可能にします。
CSSについて何か新しいことを学ぶ
すべてのCSSプロパティのリストを見たことがありますか？ たくさんあります。 そして、それらの何パーセントを日常生活/仕事で使用していますか？ そして、複雑な（デザイン、アニメーションの）インターフェースで作業するときに、どれだけそれらを適用しようとしましたか？ トースターまたはStackOverflowで尋ねられる質問を見ると、多くのタイプセッターがCSSのそのような深い知識を持っていないことに気付くでしょう。 そして、これは簡単に説明できます。日常生活では、私たちのほとんどは単に新しいことを学ぼうとしません。結局、すべてのタスクは古い実証済みの方法で解決されます。 CSSを使用した描画は、日常生活ではほとんど必要のない言語の分野に精通する絶好の機会であり、将来、突然必要になったときに、それらを使用した経験があります。
作業の速度に注目する価値があります。 まれなプロパティを思い出すためにドキュメントに目を向けることはほとんどなく、さまざまなプロパティを記録するための簡易オプションを使用することを学び、また多くの場合タイプセットに時間がかかる複雑なタスクの既製のソリューションのコレクションを収集します。
マークアップを簡素化する
あなたは正しく聞いた。 このタイプのアクティビティに関連する興味深い瞬間の1つは、1つの要素の1つを作成することです。 1つのdivが取得され、それに基づいて複雑な図が作成されます。 良い例は陰陽です：
レイアウト設計者がCSSについて学習すればするほど、複数の要素コンテナーの必要性は小さくなります。 プロジェクトのHTML構造は、よりシンプルになり、読みやすく、保守しやすくなっています。
経験を共有する
Codepenは、あなたがしたことを他の人と共有する絶好の機会を提供します。 これは見る機会であるだけでなく、学ぶ機会でもあります。 初心者の開発者は、より経験豊富なコードを見て、彼にとって珍しいものを使用した経験から学ぶことができます。または、特定のCSSプロパティの使用例を見てください。
残念ながら、このアプローチはロシア語を話すインターネットではあまり人気がなく、人々は本を読んだりビデオを見たりする傾向がありますが、トレーニングのこのオプションに注意を払う必要があります。 CSSを学ぶには、大規模なプロジェクトを取り、理解する必要があるという意見をよく耳にします。 しかし、これは常に機能するとは限りません-大規模なプロジェクト->大量のコード->複雑なビルドシステム、初心者にはあまりフレンドリーではありません。 その結果、言語の基本を学ぶのではなく、複雑なツールの構造を理解するために多大な労力が費やされています。 これは別の状況であることが判明しました-HTMLが少しあり、CSSが少しあります。何が原因であるかを理解するのは非常に簡単です。
誰がこの恩恵を受けることができますか？
初心者タイプセッター-初心者タイプセッターにとって、CSSで画像を作成することは、CSSの珍しい（そして珍しいだけではない）プロパティを遊び心のある方法で学ぶ機会です。
初心者ではない-頭を伸ばして、毎日の仕事から数時間離れてみませんか？
HR-これらの標準的なテストタスク（todoリストの作成、チャットの作成、全員が既に1,000回リツイートしたレイアウトの作成）にうんざりしていませんか？ イマジネーションをオンにします - デザイナーに小さな動物を描いてもらい、候補者がそれを補います！ これにより、CSSの知識だけでなく、枠を超えて考える能力もテストされます。 そして、彼があなたに合わない場合、彼は他の場所で見せることを恥ずかしくない面白い作品を持っています。
何を見る？
→ CSSクエスト -これはすべてこれから始まりました。今は落ち着きがありますが、多くの人が競争が戻ってくることを望んでいます
→ 毎日のCSS画像
→CodePenのサーシャ
→ 彼女はまた 、これらの写真の作り方に関するビデオも撮影しています（ファンがビデオを見るために）。 これらはレッスンではありませんが、誰かが興味があるかもしれません。