【css】cssを使って絵を描きたい (7)

前回の【css】に続いて、cssで絵を描いていきます(6) 今日のお絵かきは、私たちが子供の頃に呼んだ名前は、実はティンカー・ベル・ドラえもんについてです。

(追記: 今回やろうとしていることは多くの人によって行われています。これはイノベーションではありません。私はただ学び、その学習プロセスを記録しているだけです)

CSS の基本については話しません。今回の物件コンセプト。 私の絵を描くプロセスについて話しましょう。さて、本題に入りましょう。

前回のブラインド描画とは異なり、今回は存在するものを描いているためです。コピーは比較的簡単だと思います。 まず、コピーしたいオブジェクトをオンラインで検索し、次のような最もまともな写真を見つけました。

これは私にとって単純なタスクではありません。単純ではないタスクに対処するための私の解決策は、それを分解することです。そして、問題が分解できなくなり、解決できるようになるまで、もう一度分解します。

分割結果は以下の通りです:

1. 頭

1.1 目

1.2 顔の輪郭

1.3 鼻

1.4 ひげ

1.5 唇

1.6 口

1.6.1 口腔

1.6.2 舌

2. 胴体

2.1 首輪

2.2 ベル

2.3 胴体

2.4 腹

2.5 宝袋

2.6 手

2.6.1 腕

2.6.2 拳

2.7 足

2.7.1 脚

2.7.2 足の裏

このペイントは一度では完成できません。最新のエフェクトはこちらでご覧いただけます: Demo

コードはこちら: https://github.com /bee0060/Css -ペイント

(キーワード carton と doraemon に従って対応するファイルを見つけてください)

このペイントは順次更新し、進捗状況は後ほどこのブログに記録します。

---------------------------------------------- ----------------------------------- 2015.12.24スタート ----------- ------ -------------------------------------------- ------ ------

ここまででティンカーベルの頭が完成しました。 エフェクトを見ると、顎の部分が間違っていることがわかりますが、スカーフを追加した後は、この間違った部分を隠すことができます。

この絵を完成させるのにほぼ 1 か月かかりました。主に怠惰のせいで、釣りに 3 日、網を乾かすのに 2 日を費やしました。次に、途中でいくつかの困難に遭遇し、そのせいで諦めそうになりました。 。

最も難しい部分は唇と唇の両側の半円（私は「唇の左側」と「唇の右側」と呼んでいます）で、曲線、半円、傾斜、カバーが必要です。完了。一番苦労したのは曲線で、曲線の問題を解くとその後の図面は比較的スムーズに完成しました。

唇の左側: ここでは、それを実現するために、一定の傾きを持った半円が使用されています。ただし、実装当初は半円がヒゲ部分にはみ出してしまうため、ヒゲコンテナの背景色を白にして、ヒゲ部分にはみ出している唇の左側を覆います。

唇: 唇は最初に下に凸、次に上に、そして再び下に凸の曲線であるため、このような曲線に3つの丸い角をつなぎ合わせます。 ここで遭遇する問題と、最も長い時間がかかります。その解決策については、以下で詳しく説明します。

唇の右側: ここでも唇の左側と同じ方法を実行します。 フィレットの角度が違うだけです。

曲線: 曲線を実現するために角を丸くしています。多くの人がこのようにしていると思います。ただし、角丸には問題があり、片側（たとえば左側）にのみ境界線があり、角丸を設定すると、端に向かうにつれて境界線が徐々に細くなり、レンダリング効果に影響します。

私の解決策は、コンテナのレイヤーを追加し、コンテナにoverflow:noneを設定し、実際に丸い境界線を持つオブジェクトがコンテナ内にあり、コンテナと丸いオブジェクトのサイズを調整して、枠線の細い部分を超えると、先細りの部分を簡単に隠すことができます。

この絵を描くプロセスは、数学的手段によって各オブジェクトの位置、各丸い角の円弧、各傾斜の角度をエレガントに計算することはまったくできません。 私は最も低いレベルの方法を使用し、クロムで要素を選択し、さまざまな CSS プロパティを絶えず調整して、最終的に現在の効果を実現しました。 したがって、これは非常に非効率的です。 何か良いツールや方法がありましたら、ぜひ教えてください。 前もって感謝します。

まだ、頭部のみ完成していますが、完成まで磨き上げていく(はず)です。

ご覧いただきありがとうございます。あと、メリークリスマス。

------------------------------------------------ ------------------------ 2015.12.24終了 ------------------------ ------ -------------------------------------------- ------ ----

つづく...

ご質問やご意見がございましたら、お気軽にご連絡ください。

この記事に問題（タイプミスなど）を見つけた場合は、お気軽にお知らせください。ありがとうございます。