Technology change design style designers need to understand front-end knowledge

Source: Internet
Author: User

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. Browsers can be set to ignore Web page fonts, using user-set fonts (IE: Tool->internet options-> 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.

Second, how the front end is Chettu

First step Puzzle

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

The second step is to save to the web format

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.

Third, page layout related

Effect of element overlay

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.

The effect of a fixed screen

Some special scenes are used (such as the "back top" of the above figure) 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!

Author: Dong

Article Source: alibaba-ued

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.