Some front-end knowledge that designers also need to know

There is a saying in Chinese Painting: "draw a tiger and draw a bone first ". Corresponding to the web page, the visual effect is like a skin, and the front endCodeIt is the bone that supports this skin, understanding how long the skeleton is, helps to design a more reasonable and efficient page.

I. How to achieve common visual effects

The effects related to the character attributes in CSS are all corresponding styles, such as font size, line height, bold, skewed, and underline. However, some special effects are shown, the main manifestation is the effect in the layer style in PS, CSS is powerless. However, CSS is also evolving, and the text shadow effect has been added to css3. Unfortunately, IE6, 7, and 8 are not supported. Therefore, some special text effects can only be achieved through images.

Text spacing

 

In CSS, text spacing can be controlled, but it is rarely used in reality. On the one hand, many designers do not know that CSS has the corresponding attributes, and there are not many scenarios where text spacing is required, on the other hand, the method by which the browser parses text spacing cannot be used in some scenarios. For example, when the text is centered, the actual center area contains text spacing (for example), which makes the visual effect unacceptable, when you need to retain a certain amount of space in the text (such as the two-word button), it will be replaced by spaces.

However, it is always good to know a method to achieve text spacing. Although there are few application scenarios, it may come in handy one day. For example, the text on the 12th may seem very dense, but the reading effect will be much better by adding a text gap.

About font

The font of Chinese text on the webpage is generally. It is not recommended to use other fonts, but the font can be uploaded to the server and then referenced on the page, it solves the problem that the user's computer does not have the corresponding font. But few do. Why? 1. You can set a browser to ignore the webpage font and use the font set by the user (ie: Tools-> Internet Options-> auxiliary functions ). 2. the font on the server needs to be loaded, and the font size is usually several megabytes, seriously affecting the page loading speed. Therefore, special fonts are usually made into images.

Background

See how a button is usually spelled out.

Product buttons are generally designed like a (the middle segment is a horizontal repeating pattern), rather than B, because product buttons are generally reused, you can use two segments to spell out a button, and the width of B is limited.

About gradient, rounded corner, projection

The gradient, rounded corner, and projection are finally implemented in css3. Unfortunately, IE6, 7, and 8 are not supported, but new CSS applications can be seen on more and more websites, in particular, the button, the faint gradient, and the hover have a slight shadow, and the effect is very good. For unsupported browsers, set a background with a similar color to see a monochrome, right angle effect.

It should be noted that the Code can only implement linear gradient, from a uniform color gradient to another color, so the highlight or anything can only be discarded. There is also a radial gradient in css3, but there are not many application scenarios currently.

The Internet is growing fast. There are a lot of new technologies, big and small. Please contact the front-end more.

About alignment

It is mainly because the text in the form is aligned up and down in the center. It is very simple in PS, but it is as shown in. It is difficult to align. There is no good way to solve this problem. So it is not especially critical. We recommend that you follow it.

2. The first step of cutting the front-end image

To speed up page loading, multiple images are attached to one image.

Step 2 save as the Web format

Pictures on the web page, pictures, banner class is generally saved as JPG, other, is usually saved as a png-8 or GIF (in addition to Dynamic Pictures need to use GIF, other scenarios png-8 can replace GIF), png-8 and GIF transparent is only transparent and full opacity, unlike the png-24 has translucent, IE6 does not support png-24, therefore, translucent images are generally stored as png-8 or GIF.
When saved as a png-8 or GIF, there will be a problem with the side, that is, the semi-transparent part of the image will be stored with the color of the mixed edge.

The color of the edge will select the background color of the image application scenario, while the product-type images, such as icons, will be applied in many scenarios, so only one general background color can be selected, for example, if the base is light-colored, the white color is used as the color of the complex edge.
When you encounter a dark background, the complex edge is obvious.

In this scenario, you can only re-save an image with a corresponding edge for the dark background.
For an image that is saved as a png-8 or GIF, sometimes the image is rendered as a band (such as the right side), and the distortion is very serious.

There are two ways: one is to increase the number of colors, but increasing the number will lead to larger images. We need to strike a balance between the number of colors and the size of the images, and if there are too many colors on the images, even if the number of colors increases to a maximum of 256, there will still be a significant sense of band. At this time, you can split the image and put the similar color on a picture.

3. Effect of overlapping elements on the page layout

Through the external patches (margin) and absolute positioning (position: absolute), multiple elements can be superimposed on each other, so that the design is not limited by the layout.

Fixed Screen Effect

In some special scenarios (such as "Back to Top"), the following problem is solved.

Understanding the front-end knowledge not only makes the communication smoother, but also makes the design more reasonable,It is helpful for the design process.For example, when designing a control, the hover style in PS is always not intuitive enough. In this case, you can implement the control, intuitively feel it, and adjust your design draft until you are satisfied. Although the cost is relatively large, it is worthwhile for controls that require careful scrutiny.

Someone once said that good technology can bring about breakthroughs in design, and good design can also promote the development of front-end technology. Css3: online avatar editing. Many technologies have changed the design method. Let's take one more step!

 

ArticleSource: http://www.aliued.cn/2012/03/31/%E8% AE %BE%E8% AE %A1%E5%B8%88%E4%B9%9F%E9%9C%80%E8%A6%81%E4%BA%86%E8%A7%A3%E7%9A%84%E4%B8%80%E4%BA%9B%E5%89%8D%E7% AB %AF%E7%9F%A5%E8%AF%86.html