Designers also need to understand some of the front-end knowledge

There is a saying in Chinese painting, "draw the tiger to draw the bone first". corresponding to the Web page, http://www.aliyun.com/zixun/aggregation/8936.html "> Visual effect is just a skin, the front-end code is to support this skin bone, understand how the skeleton is long, help to design more reasonable and efficient pages."

Text properties related to the effect of CSS are the corresponding style, such as font size, row height, bold, tilt, underline, etc., but some special effects, mainly in the PS layer style in the effect of CSS is powerless. But CSS is also evolving, in the CSS3 has been added to the effect of text shadow, unfortunately IE6, 7, 8 are not supported. Therefore, some more special text effects, still can only be achieved through the picture.

In the CSS can actually control the spacing of text, but the reality is rarely used, on the one hand, many designers do not know that the CSS has the corresponding attributes, and need to use the text spacing of the scene is not much, on the other hand, the browser resolution of the way text spacing makes this attribute in some scenarios can not be used, For example, in the middle of the text, the actual center of the area is included in the text spacing (such as above), so that the visual effect of people can not accept, where the need to retain a certain space in the text (such as the two-word button), will be directly replaced by space.

But it's always good to know a way to achieve text spacing, although there are few scenarios at the moment, but it may come in handy one day. For example, the 12th black text will look very dense, but with a bit of text spacing, the reading effect will be much better.

Chinese text in the Web page is generally the font of the song, do not recommend the use of other fonts, but in fact, the font can be uploaded to the server, and then the page refers to the font, it solves the user's computer does not have the corresponding font problem. But very few people would do that. 1. The browser can be set to ignore the font of the Web page, instead of the user settings font (IE: tool->internet option-> Accessibility). 2. The fonts on the server need to be loaded, and a font is generally a few megabytes, seriously affecting the page load speed. So for special fonts, it's usually made into pictures.

See how a button is usually spelled out.

The button of the product class we are generally like a design (the middle section is horizontal repeating pattern), not like B, because the Product class button is generally reused, you can use two paragraphs to spell out a button, and b this width is limited to death.

In the CSS3 finally realized the gradient, rounded corners and projections, but unfortunately IE6, 7, 8 are not supported, but already can be seen in more and more Web sites to see the application of new CSS, especially the button, a faint gradient, hover up a bit of a faint shadow, the effect is very good, for unsupported browsers, Set a color approximation background, see the monochrome, rectangular effect.

Note that the code can only be a linear gradient, from a uniform color gradient to another color, so the high light or something can only be discarded. There are also radial gradients in the CSS3, but there are few temporary applications.

The development of the Internet is very fast, large and small new technology, many and front-end communication bar.

Mainly in the form of text in the middle and bottom of the center alignment, in PS is very simple, but the realization is as shown above, it is difficult to see, to want to align, is really a troublesome thing, there is no good way. So it's not a particularly important place to go.

In order to speed up the page load, you will put more than one picture on a picture.

Pictures on the Web page, photos, banner classes are generally saved as JPG, others, usually save as png-8 or GIF (except for animated images need to use GIF, other scenes png-8 can replace GIF entirely). For pictures that are saved as png-8 or GIF, there are times when you see a picture showing a ribbon sensation (on the right side of the image below) and the distortion is serious.

There are two ways, one is to increase the number of colors, but the increase in the number will result in a larger picture, need to take a balance between the number of colors and the size of the picture, and if the color of the picture is too much, even if the number of colors to the maximum 256, there will still be a clear band feeling, Put a picture of a similar color on a map.

Through the external patch (margin), absolute positioning (position:absolute) can achieve multiple elements of the effect of superposition, so that the design is not limited by the layout.

Some special scenes are used (such as the "back Top" above) to solve the following problems.

Understanding front-end knowledge, not only in communication smoother, more reasonable design, for the design process also has some help, such as in the design of control, PS look hover style is always not intuitive, then you can realize the control, intuitive to feel, adjust your design draft until satisfied. Although the cost is relatively large, it is still worthwhile for the controls that need to be carefully scrutinized.

Someone once said that good technology can bring about a breakthrough in design, and good design can also promote the development of front-end technology. CSS3, infinite load, online editor avatar, a lot of technology has changed the way the design, go back a step more!

Source Address: http://www.aliued.cn/2012......e8%af%86.html