Good design promotes front-end technology: A method of realizing visual effects

Article Description: 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, the visual effect is only a skin, the front-end code is to support the skin of the bone, understand how the skeleton is long, help to design more reasonable and efficient pages.

How to realize the common visual effect

About text effects

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 of the more special text effects, still can only be achieved through the picture.

Talk about spacing between words

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.

About fonts

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.

About background

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.

About gradients, rounded corners, projections

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 the browser does not support, 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.

About aligning

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 critical place, and it's the advice that goes with it.

[1] [2] Next page