How to combine design with build

Design and Construction: the trend and status of construction. CSS3 new features: A two-part, new attribute and instance section

1. The difference between the effect chart and the page:

1 Core Knowledge sharing

Mainstream kernel:

Trident kernel: ie,maxthon,tt,the world,360, Sogou browser, etc.

Gecko Kernel: Netscape6 and above, Ff,mozillasuite/seamonkey, etc.

Presto Core: Opera7 and above

WebKit kernel: safari,chrome

The 1 Trident kernel is disconnected from the standard of the consortium, and security issues such as a large number of bugs in the Trident kernel are not resolved.

2 Gecko: This is Firefox and Flock

The kernel, which has the advantage of being powerful and rich, can support many complex Web page effects and browser extension interfaces, but the cost is also obvious is to consume a lot of resources, such as memory.

3 Presto:opera is the Presto kernel, the Presto kernel is known as the most fast browsing of the Web, the fastest kernel, thanks to its natural advantage in the development, in the processing of JS scripts and other scripting languages, faster than the other kernel is about 3 times times, The disadvantage is that you lose some Web compatibility to achieve a fast speed.

4 Webkit:webkit is the kernel of safari, but Safari is the browser under the Apple system (although there is also a Windows version, but relatively few), so just briefly introduce the advantages and disadvantages of this kernel, the advantage is that the Web browsing faster, although less than Presto But also better than Gecko and Trident, the disadvantage is that the code for the Web page fault tolerance is not high, that is, the compatibility of the Web page code is low, will make some non-standard pages can not be properly displayed.

5 Dual core Now many domestic browsers using dual-core (ie+ Webkit), such as roaming, 360

Summary: This is one of the reasons why the difference between the page and the effect chart is due to the different cores. Below we look at the effect of the page difference between the simple method of processing.

2 difference between the effect chart and the page

1 Guide Layer Why do you have rough edges?

The left image is: IE7 8 9 10 and Firefox Google browser output of the transparent picture, the right image of IE6 transparent map

The way we use it:

Method One: In addition to IE6 outside the use of PNG24 bitmap, to IE6 to do a GIF or PNG8, so that the lack of processing is to ensure that other browsers, but the IE6 a bit of burrs

Method Two: We use IE6 to do a filter with a PNG24, other browsers are also PNG24, the advantage of this processing is no burrs but the filter is very memory, generally do not use

Method Three: Make a simple change in the effect diagram as shown:

The left image is IE6 the other browser, add a bottom figure transparent, flash problem is hidden, it is difficult to distinguish the naked eye

2 Icon Placement Tips

The left is the original image contrast adjusted figure, made a simple adjustment to see the first icon (mobile phone), if not red box out, it is difficult to distinguish,

Without affecting the effect of the case, we made a simple change, the icon moved to the left two pixels, so that a set of code, do not have to separate the two pixel definition style, the icon to achieve the center effect.

3 Pitch grid

See figure, Spacing 30px 18px 16px 13px

When we do the spacing screenshots, we usually use the 10px 15px 20px 25px 30px Such rules to deal with the spacing, to a certain standard, but does not affect the effect

4 Dashed Bullet

The above is designed, the following is the system itself, but we generally use the following, can use code to write out the code, because the file is small and flexible, such as: A picture general dozens of K, but the code, perhaps a few k. The embodiment of flexibility: for example, can quickly turn the dotted line into solid lines

Not special emphasis on the effect, we can do so, such as the above code closure, very flexible, you can zoom in at any time, reduce, change color, etc.

5 regularity of the background diagram

Background map can be paved, tiled, longitudinal regularity

As shown above, the original image, and the 10,5 pixel in the back of the graph contrast. How to take the value can not find the tile point, then we have to help designers, to a tiled point. ~ ~ O (∩_∩) o

6 fonts

Common fonts: XXFarEastFont-Arial to later bold, Microsoft Ya-Black

Text size: XXFarEastFont-Arial, CI recommended the use of the 12th + 14th font mix and match, Microsoft ya black usually with singular

General principles: Improve the identification of text and the readability of the page

7 Spacing

When the word spacing appears, such as the red box above, we generally do not use the above figures, CSS in the word spacing and PS line distance is not the same, the general use of automatic typesetting

In the PS panel, we will notice the above sections, font size pixel, line spacing, font, font is bold, the best way to set the spacing, so as to facilitate the construction of the value of the production

8 Text fields

Text processing to distinguish between field interception, management, or automatic line wrapping

The shortcomings of the CSS management: such as figure, location of the point, the size of the different

New characteristics of 2.CSS3: CSS3 new characteristics, CSS3 application in reality

Summarize the following new features of the design-related CSS3

1 do not rely on the visual effects of the picture

CSS3 contains a number of new features that you can use to create visuals that were previously available only through pictures (or scripts), such as rounded corners, shadows, translucent backgrounds, gradients, and picture borders. Of these new features, most belong to the "background and border (backgrounds and Borders) modules, while the rest belong to the" colors and images "(Colors and Image Values) modules.

Application in the project:

In the red box callout, the figure used to CSS3 rounded corners, the following figure used to CSS3 border, the effect of the same as the original, you do not have to cut into the picture, greatly saving space.

2 box Container deformation

CSS3 also has a visual effect that allows us to manipulate the position and shape of the box container in 2D or 3D space, such as rotating, zooming, or moving. These effects are called variants and are covered in 2D variants (2D Transforms) and 3D variant (3D Transforms) modules.

, but can intuitively see the CSS3 in different browsers.

3 Unique Fonts

The font module introduces the @font-face rule, with the CSS3 of the font style, the Chinese web page in the Font-face especially the Web App in the new application scene, it is to use Icon Font instead of the picture on the page.

That is to say, the CSS3 font reference is divided into two parts: An introduction @font-face is a definition font, an introduction is a @font-face definition graphic

1. CSS3 can introduce @font-face is defined font, but because the Chinese font strokes too much irregular, generally do not use this method

And the English font fixed 24 characters, the definition of good library, use more flexible

2. Introduction with CSS3 is @font-face defining graphics, such as icons

The icon defined by the http://ux.etao.com/fonts/on the Internet @font-face

Http://weiba.weibo.com/?topnav=1&wvr=5 Weibo has also been used in the project @font-face

The advantage of this is that the file is small, the icon is easy to manage, you can change color at any time, change the size, changing location, and so on. The disadvantage is that the current support for solid color is better, do a gradient only pc-side Webikit kernel browser support. Mobile end WebKit does not support this property, and testing in Android4.0 is not supported.

Here is the design to note that: the icon to make vector graphics

4 Transition and animation

The CSS3 Transition (transitions) is described in a module with the same name. It is a simple animation effect that can gently render the style changes of an element. For example, when a user hovers the mouse over a button, it changes its color gradually and smoothly. The more complex Css3″ animation (animation) feature is also described in a module with the same name, which enables more complex style changes and element displacements without the need for flash or JavaScript.

Http://www.wheattime.com/common-css3-animation.html CSS Animation (we were sorted out by our classmates)

Http://css3lib.alloyteam.com/css3u

3. Construction and Design: trends and Status quo

First, the goal of refactoring: to achieve code reuse, page performance, maintainability, flexibility, and the corresponding

Secondly, the existing development of CSS3 (immature)

These effects are not visible on the Internet explorer:46% Internet, so do not use these items for important designs. At the same time, there are alternative designs available where these effects do not work.

Browser usage Now: (Focus on IE)

http://tongji.baidu.com/data/Baidu http://www.ie6countdown.com/#map Microsoft (2014 IE6 Countdown site)

CSS validation issues: These CSS3 features are not final versions, and currently different browsers use different tags to implement these features, which may bring validation problems for your Style Sheet.

Bloated code: Because different browsers use different definitions of syntax, the end result is that your CSS code is very bloated.

Finally, all of our efforts are user-centric

User care: Fast, beautiful, smooth, practical