本文分三部分講解:
效果圖與頁面的差異：主要講解頁面與效果圖不同的細微之處
Css3新特性：分兩部分，新特性和實例部分
設(shè)計與構(gòu)建：構(gòu)建的趨勢與現(xiàn)狀
1.效果圖與頁面的差異：
1)內(nèi)核小常識分享
主流內(nèi)核：
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上
Webkit內(nèi)核：Safari,Chrome等
1 Trident內(nèi)核和W3C標(biāo)準(zhǔn)脫節(jié)，Trident內(nèi)核的大量Bug等安全問題沒有得到解決。
2 Gecko：這是Firefox 和 Flock
所采用內(nèi)核，這個內(nèi)核的優(yōu)點就是功能強大、豐富，可以支持很多復(fù)雜網(wǎng)頁效果和瀏覽器擴展接口，但是代價是也顯而易見就是要消耗很多的資源，比如內(nèi)存。
3 Presto：Opera 采用的是 Presto內(nèi)核，Presto內(nèi)核被稱為公認(rèn)的瀏覽網(wǎng)頁速度最快的內(nèi)核，這得益于它在開發(fā)時的天生優(yōu)勢，在處理JS腳本等腳本語言時，會比其他的內(nèi)核快3倍左右，缺點就是為了達到很快的速度而丟掉了一部分網(wǎng)頁兼容性。
4 Webkit：Webkit 是 Safari 采用的內(nèi)核，不過 Safari 是蘋果系統(tǒng)下的瀏覽器(雖然也有windows版，但是比較少)，所以只簡單介紹一下這個內(nèi)核的優(yōu)點和缺點，優(yōu)點就是網(wǎng)頁瀏覽速度較快，雖然不及 Presto 但是也勝于 Gecko 和 Trident，缺點是對于網(wǎng)頁代碼的容錯性不高，也就是說對網(wǎng)頁代碼的兼容性較低，會使一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正確顯示。
5 雙核現(xiàn)在很多國內(nèi)瀏覽器采用雙核(IE+ Webkit)，如遨游，360等
總結(jié)：根據(jù)上述內(nèi)核不同，造成了頁面與效果圖的差異，這是其中一個原因。下面我們看下效果圖與頁面差異性的簡單處理方法。
2)效果圖與頁面之間差異處理
1 引導(dǎo)層你為何有毛邊呢
左圖為：IE7 8 9 10 及火狐谷歌瀏覽器的輸出的透明圖片，右圖為IE6的透明圖
造成毛邊我們采用的方法：
方法一：除IE6外采用PNG24位圖，給IE6做張GIF圖 或者PNG8的，這樣處理不足之處是保證了其它瀏覽器，但是IE6有點毛邊
方法二：我們采用IE6做濾鏡用一張PNG24的，其它瀏覽器也是PNG24，這樣處理的好處是沒有毛邊但是濾鏡是很消內(nèi)存的，一般不采用
方法三：在效果圖上做點簡單的改變?nèi)鐖D：
左圖是IE6右圖是其它瀏覽器，加個底圖透明，毛邊問題就被隱藏起來了，肉眼很難區(qū)分
2 圖標(biāo)擺放小竅門
左圖是原圖對比調(diào)整后的圖，做了簡單的調(diào)整，看第一個圖標(biāo)(手機)，如果不用紅框框出來，很難辨別，
在不影響效果的情況下，我們做出了簡單的改變，把圖標(biāo)向左移動了兩像素，這樣就用一套代碼，不用再單獨給那兩像素定義樣式了，圖標(biāo)達到居中的效果。
3 間距柵格化
看上圖，間距有30px 18px 16px 13px
我們在做間距截圖時，我們通常采用10px 15px 20px 25px 30px這樣的規(guī)律來處理間距，達到一定的規(guī)范性，但又不影響效果
4虛線 項目符號
上面是設(shè)計出來的，下面是系統(tǒng)自帶的，但是我們一般采用下面的，能用代碼寫出來就用代碼，原因是文件小而靈活，比如：一張圖一般幾十k，但是代碼的話，也許就幾k。靈活性的體現(xiàn)：比如能很快的把虛線變成實線
不是特別強調(diào)效果時，我們也可以這么做，如上面關(guān)閉這段代碼，很靈活，可以隨時放大、縮小、換色等
5背景圖的規(guī)律性
背景圖可以整鋪、平鋪、縱鋪規(guī)律性
如上圖，原圖，和后面切出來的10，5像素的圖對比時。怎么取值都找不到平鋪點，這時我們要求助設(shè)計師了，給個平鋪的點。~~~ O(∩_∩)O
6 字體
常用字體：宋體、 Arial 到后來的黑體、微軟雅黑
文字大?。核误w、 Arial建議使用12號+14號字體的混合搭配,微軟雅黑通常用單數(shù)
總體原則：提高文字的辨識性和頁面的易讀性
7 行距間距
當(dāng)出現(xiàn)字間距時，如上圖紅框，我們一般不采用上面的數(shù)字，css中的字間距跟ps中行距的不一樣的，一般采用自動排版
在ps面板中，我們會注意到上面幾個部分，字號像素，行距，字體，字體是否加粗，行間距最好要設(shè)出來，這樣便于構(gòu)建制作時取值
8 文本字段
文本處理要分清字段截取，打點，還是自動換行
Css打點的不足之處：如圖，點的位置，大小的不同
2.Css3新特性： css3新特性，css3現(xiàn)實中的應(yīng)用
總結(jié)以下幾個跟設(shè)計有關(guān)的css3的新特性
1) 不依賴圖片的視覺效果
CSS3包含了大量新特性，可以用來創(chuàng)建一些以前只能通過圖片(或腳本)才實現(xiàn)的視覺效果，比如圓角、陰影、半透明背景、漸變以及圖片邊框等。在這些新特性之中，多數(shù)是屬于“背景和邊框(Backgrounds and Borders)模塊的，其余的則屬于“色彩和圖像”(Colors and Image Values)模塊。
項目中的應(yīng)用：如下圖：
在紅框標(biāo)注中，上圖用到了css3圓角，下圖用到了css3邊框，出來的效果跟原圖一樣，就不用切成圖片了，大大節(jié)省了空間。
2)盒容器變形
CSS3中還有一類視覺效果，讓我們可以在2D或者3D空間里操作盒容器的位置和形狀，比如旋轉(zhuǎn)、縮放或者移動。這些特效稱為變形，在“2D變形”(2D Transforms)和“3D變形”(3D Transforms)模塊中都有涉及。
下面是一些在線工具，兼容性瀏覽表，還有個機器貓的小實例。感興趣的童鞋可以打開看看
http://www.css88.com/tool/css3Preview/Box-Shadow.html 在線CSS3
http://www.css3maker.com/ 在線CSS3
http://fmbip.com/litmus/ 瀏覽器支持對照表
http://www.liulan7.net/labs/css3.html 機器貓實例(雖然有些過時，但是能直觀的看出css3在各個瀏覽器下的不同之處)
3)獨一無二的字體
“字體”(Font)模塊引入了@font-face規(guī)則，隨著CSS3對字體樣式的不斷豐富，中文網(wǎng)頁中對font-face尤其是web app中賦于了新的應(yīng)用場景，那就是用 Icon Font 代替頁面中的圖片。
也就是說Css3字體引用分成兩部分：一個引入@font-face是定義字體，一個引入是@font-face定義圖形
1. Css3可以引入@font-face是定義字體，但是由于中文字體筆畫過多沒有規(guī)律，一般不采用這種方法
而英文字體固定的24個字符，定義好庫，使用比較靈活
2.用css3引入是@font-face定義圖形，如 圖標(biāo)
http://ux.etao.com/fonts/ 網(wǎng)上用@font-face定義出來的icon
http://weiba.weibo.com/?topnav=1&wvr=5 微博在項目中也應(yīng)用了@font-face
這樣做的優(yōu)點就是，文件小，圖標(biāo)易于管理，可以隨時換色，更改大小，變換位置等。缺點就是目前對純色的支持比較好，做漸變的話僅pc端webikit內(nèi)核瀏覽器支持。移動端webkit不支持此屬性，在 Android4.0里測試，也是不支持的。
這里設(shè)計要注意的一點就是：圖標(biāo)做成矢量圖
4)過渡與動畫
CSS3的過渡(transition)在其同名的模塊里描述。它是一種簡單的動畫特效，可以平緩地呈現(xiàn)一個元素的樣式變化。例如，當(dāng)用戶將鼠標(biāo)懸停于按鈕之上時漸進且平滑地改變其顏色。更復(fù)雜的CSS3″動畫”(animation)特性也在其同名的模塊里有相應(yīng)描述，它能夠?qū)崿F(xiàn)更復(fù)雜的樣式變化和元素位移，而不需要用到Flash或JavaScript。
http://www.wheattime.com/common-css3-animation.html CSS動畫(我們麥時同學(xué)整理出來的)
http://css3lib.alloyteam.com/ css3ui
項目中的應(yīng)用： 用谷歌看
http://photo.weibo.com/statics/badge
http://photo.weibo.com/events/travelfeeling
3.構(gòu)建與設(shè)計：趨勢與現(xiàn)狀
首先，重構(gòu)的目標(biāo)： 實現(xiàn)代碼復(fù)用、頁面性能、可維護性、靈活性、相應(yīng)性
其次，CSS3的現(xiàn)有發(fā)展 (不太成熟)
Internet Explorer: 46% 的 Internet 無法看到這些效果，因此不要將這些 東西用于重要的設(shè)計。同時保證，在這些效果不起作用的地方，有替代設(shè)計可用。
瀏覽器現(xiàn)在的使用情況：(重點看下iE)
http://#baidu.com/data/ 百度 http://www.ie6countdown.com/#map 微軟(2014 IE6倒計時網(wǎng)站)
CSS 驗證問題: 這些 CSS3 功能并非最終版本，目前不同的瀏覽器使用不同標(biāo)簽實現(xiàn)這些功能，可能為你的 Style Sheet 帶來驗證上的問題。
臃腫代碼: 因為不同瀏覽器要使用不同定義語法，最終將導(dǎo)致你的 CSS 代碼十分臃腫。
最后，我們所做的一切努力都是以用戶為中心
用戶關(guān)心：快、美觀、流暢、實用性
