Designers also need to understand some of the 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 like a skin, and 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.

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.