[CSS] I want to use CSS Format (vii)-Doraemon

then the previous [CSS] I want to use CSS format painting (vi), the painting is different today, the picture is Doraemon, we were young to his name is actually Doraemon Doraemon.

(PS: This time I want to do things, many people have done, this is not an innovation, I am just learning and documenting the process of learning)

This time, we don't say much about the basic concept of CSS properties. Talk about the process of my painting, OK, get to the point.

Because it is different from the previous blind painting, this time is painting the existing things. I think copying is relatively simple. I first searched the Internet to copy the object, found a most popular picture, as follows:

This is not a simple task for me, and the solution to my simple task is to split it up and split it until the problem can no longer be dismantled and resolved.

The results of the split are as follows:

1. Head

1.1 Eyes

1.2 Face Silhouette

1.3 Nose

1.4 Beard

1.5 Lips

1.6 Mouth

1.6.1 Oral

1.6.2 Tongue

2. Body

2.1 Collars

2.2 Bells

2.3 Torso

2.4 Dudou

250 Treasure Bag

2.6 Hands

2.6.1 Arm

2.6.2 Fist

2.7 Pair of feet

2.7.1 Legs

2.7.2 Foot Palm

I can't finish this painting at once, the latest effect can be seen here: Demo

Code in this: Https://github.com/bee0060/Css-Paint

(Please find the corresponding file according to the keyword carton, Doraemon)

I will update this painting in succession, and some progress will be recorded in this blog post.

--------------------------------------------------------------------------2015.12.24 Start--------------------- -----------------------------------------------------

So far, had finished Tinker's head. Look at the effect will find that the chin looks wrong, it doesn't matter, when I add his scarf, it will be able to cover the wrong place.

This painting for almost one months, only to finish the head, mainly because of lazy, three days fishing two days, followed by a few difficulties in the middle, almost because of these difficulties to give up.

One of the hardest things to do is to count the two halves of the lips and lips (I call them "left lip" and "right Lip"), which need to be curved, semicircular, tilted, covered to complete. One of the most difficult to deal with is the curve, solve the curve problem, it is more smoothly completed the follow-up painting.

Lip to the left: here is a semi-circle plus a certain tilt implementation. But at the beginning of the implementation, the semicircle would protrude into the beard area, and I would give the beard a white background color that would protrude to the left part of the lip of the beard area.

Lips: Because the lips are first downward convex, then upward, and downward curve, here by 3 rounded corners to splice into such a curve, the time to do the curve is the longest, the problems encountered and solutions in the following elaborate.

Lips to the right: here and on the left side of the lip to take the same method. Just the angle of the fillet is not the same.

Curve: I use rounded corners to achieve the curve, I believe a lot of people are dealing with this. But there is a problem with the fillet, if only one side has a border (for example, left), and a rounded corner, the border will slowly become thinner at the end, which will affect the rendering effect.

My solution is to add a layer of containers, then set Overflow:none to the container, and then actually have the rounded border of the object inside the container, then resize the container and rounded object so that the portion of the border is thinner than it is easy to hide the thinner part.

The process of painting this painting is not elegant at all, and I cannot mathematically gracefully calculate the position of each object, the radian of each fillet, and the angle of each tilt. I use the lowest-level method, in Chrome, select the elements and constantly adjust the various CSS properties, and finally achieve the current effect. So this is very inefficient. If you have any good tools or methods, please do not hesitate to enlighten. Thank you first.

So far, only the head has been completed, and then (should) be perfected until completed.

Thank you for watching. In addition, Merry Christmas.

--------------------------------------------------------------------------2015.12.24 End----------------------- ---------------------------------------------------

To be Continued ...

Have any questions or comments, welcome to Exchange.

If you find any problems with this article (such as typos), please do not hesitate to inform, thank you.

Reprint please specify the source: [CSS] I want to use CSS frame painting (vi)

[CSS] I want to use CSS Format (vii)-Doraemon