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

Original link

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.

First on the code:

head-htmlCommon&head-css

Codepen Effect: Http://codepen.io/bee0060/pen/bEwRNG

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----------------------- ---------------------------------------------------

--------------------------------------------------------------------------2015.12.27 Start--------------------- -----------------------------------------------------

Today's update does not say the function, just say the picture of the CSS specifications and strategies.

This painting as far as possible follow the advice of oocss: http://www.w3cplus.com/css/oocss-concept

Reading the code of the students may feel that a lot of HTML objects are used a large number of classes, but the careful may find that some class selectors appear several times.

The purpose of my writing is to minimize CSS Property code with the same name and value in the different selectors of CSS.

In HTML, you can refer to the various required selectors as components to achieve the effect.

This allows the CSS to be as short as possible and not repetitive. Although the class attribute of an HTML object is long, you can combine the desired effect with a more flexible transformation like a component.

In this painting, only the class selector is used.

Class selector is divided into 4 main types:

1. Components-Used to describe the various components of Doraemon, such as the head (. Head), face (. eyes), and so on, which contain the following 3 kinds of CSS properties are not included, in fact, those who do not know how to put in the following three kinds of selectors in the CSS properties.

2. Shape-Used to describe the shape of an object, such as a positive circle line, temporarily only. Circle class, where there is only one attribute: border-radius:50%;

3. Location-This does not include the left, top and other directly described location, because the specific location of the components are basically not reusable. The locations described here are: position, float, and special classes that are centered vertically, such as margin.

4. Style-such as background color class, Border color class, Border width class, etc. For example, look at the original image can be seen, the painting is actually mainly so 3, 4 colors, so I took out the color, there is no need to write in a lot of class duplicate color CSS.

Name of class selector:

I use the editor is sublime Text 2, there is a very useful and very common component is emmet,emmet one of the features is can play very few characters to enter the CSS, so my class selector, if it only set a property, In general, this property and value in the Emmet in the shorthand to express, but also some with the name of the property name and the corresponding value of the names, with a link to express the bar. Such as:

1/* 2   left for shorthand in Emmet, CSS property for the right of  3   pos ==> position 4   BAC ==> background-color  5   So I like the following class selector: 6 */7  8. pos-a {9     position:absolute;10}11. bacc-white {     background-color:white;15}

When using selectors in HTML, also follow the order of selector categories: component, Shape-----style, as follows:

1 <div class= "Eye eye-left Circle Pos-a bacc-white" > 2 </div>

It is possible for a component to have a relationship between an extension and a subassembly, arranged according to the component selector's generation from front to back.

Well, my HTML and CSS writing specifications are done. The next update should at least draw a scarf (or collar).

Thank you for watching.

--------------------------------------------------------------------------2015.12.27 End----------------------- ---------------------------------------------------

--------------------------------------------------------------------------2016.01.04 End----------------------- ---------------------------------------------------

After a few days of intermittent efforts, finally put this painting to completion. After mastering the basic skills, the difficulty of finishing the painting is much lower. The most basic techniques are:

· Rounded Corners

· Cover

· Overflow hidden

· Tilt

This update is complete with a lot of content, including the following:

1. Collars-implemented with a wider ellipse, showing only the majority of the lower half-circle, using the container to hide unwanted parts. The curve in the bell is also implemented using a circle that will exceed the container's two-up and down side

2. Body-implemented with irregular ellipses

3. Treasure Bag-use two irregular ellipse to achieve top and bottom

4. Hands-use an ellipse and tilt to achieve the arm, then cover the unwanted part with a rounded palm

5. Two feet-with two irregular ellipse to achieve the left and right legs, with a white bottom black edge of the ellipse to achieve the crotch (~. ~), and cover between the legs to achieve the final effect. Use an ellipse and tilt to achieve your feet.

By and large, the details still look different, but I am personally satisfied with the effect. It may only take a little time to fine-tune the details later.

So, this painting ends here. Thank you for watching.

--------------------------------------------------------------------------2016.01.04 End----------------------- ---------------------------------------------------

Finish.....

Final effect: Demo

Code Pen Effect: Http://codepen.io/bee0060/pen/rxjKxP

Key HTML:

View Code

Full CSS:

View Code

(Send a demo link here again, hoping to save you the time you scroll back to the top of this article)

(As for what to do with this, now there are a few ideas that can be done, and maybe something else to do with it, whatever you want.)

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 Format (vii)-Doraemon

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