本文《基于 CSS3 的下一代 Web 應(yīng)用開(kāi)發(fā)》系列文章的第 2 部分，第 1 部分我們將介紹了 CSS 的發(fā)展歷史，個(gè)版本的功能特點(diǎn)差異和 CSS3 引入的新特性。第 2 部分，我們針對(duì)這些 CSS3 新特性介紹其在不同瀏覽器中實(shí)現(xiàn)的差別，并結(jié)合實(shí)例講解如何利用這些特性進(jìn)行開(kāi)發(fā)。
在該系列文章第 1 部分中我們介紹了 CSS 的發(fā)展歷史以及各個(gè)版本的主要功能和差別。之后介紹了一些 CSS3 中引入的新特性和功能。這些新特性極大地增強(qiáng)了 Web 程序的表現(xiàn)能力，同時(shí)簡(jiǎn)化了 Web UI 的編程模型。然而 CSS 一直存在的最大問(wèn)題是眾多瀏覽器對(duì) CSS 標(biāo)準(zhǔn)支持不統(tǒng)一，相同屬性在不同瀏覽器中有不同的實(shí)現(xiàn)。因此了解和處理 CSS3 新特性在各個(gè)瀏覽器中的實(shí)現(xiàn)差別是十分重要的。在本文中，我們將詳細(xì)介紹這些 CSS3 新特性在不同瀏覽器中的實(shí)現(xiàn)支持情況，并結(jié)合實(shí)例講解如何利用這些特性進(jìn)行開(kāi)發(fā)一些絢麗的應(yīng)用。
RGBA 顏色是你可以使用 RGB 來(lái)控制兌現(xiàn)過(guò)的顏色并且可以調(diào)整對(duì)象的透明度，無(wú)論是文本、背景還是邊框均可使用該屬性。該屬的性語(yǔ)法在其支持的瀏覽器中相同，如下：
background:rgba(254, 255, 200, 0.75); |
例如上面代碼所示，前三個(gè)參數(shù)分別是分別是 R、G、B 三原色，范圍是 0-255。第四個(gè)參數(shù)是背景透明度，范圍是 0-1，如 0.5 代表透明度 50%。這個(gè)屬性使我們?cè)跒g覽器中也可以做到像 Win7 一樣的半透明玻璃效果。
另外 RGBA 和 Opacity 之間的不同點(diǎn)是前者只會(huì)應(yīng)用到指定的元素上，而后者會(huì)影響我們指定的元素及其子元素。目前支持 RBGA 顏色的瀏覽器有：Safari 4+、Chrome 1+、Firefox 3.0.5+、和 Opera 9.5+，IE 全系列瀏覽器都不支持該屬性。
CSS3 新特性中除了 RGBA 顏色，最常用的一項(xiàng)就是圓角效果。圓角屬性無(wú)需使用背景圖片就能給任意 HTML 元素添加圓角。使用 CSS3 圓角屬性將大大減少你制作圖片或者調(diào)試 JavaScript 的時(shí)間，并且瀏覽器原生態(tài)的支持運(yùn)行更快、更穩(wěn)定、顯示也更清晰。其在主要瀏覽器中的語(yǔ)法如下：
/*FireFox 語(yǔ)法 */ -moz-border-radius: 6px 6px 6px 6px; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; /*WebKit 核心瀏覽器語(yǔ)法 */ -webkit-border-radius: 6px 6px 6px 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; /*CSS 標(biāo)準(zhǔn)語(yǔ)法 */ border-radius: 6px 6px 6px 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; |
如上面代碼所示，四個(gè)角的效果可以通過(guò)一行代碼 border-radius: 6px 6px 6px 6px來(lái)指定，其中四個(gè)參數(shù)從左到右分別代表：左上角、右上角、右下角、左下角。也可以類(lèi)似 border-top-right-radius: 6px;這樣分別指定每一個(gè)角的效果。
可以看出 Firefox 和 Webkit 核心的瀏覽器和 CSS 標(biāo)準(zhǔn)用法大同小于，只是屬性前綴有些差別。目前支持圓角屬性的瀏覽器有：Safari 3+、Chrome 1+、Firefox 1+，IE 全系列瀏覽器和 Opear 不支持該屬性。
塊陰影和文字陰影是你可以不適用圖片就能對(duì) HTML 元素添加陰影，增加顯示的立體感增強(qiáng)設(shè)計(jì)的細(xì)節(jié)。快陰影使用 box-shadow 屬性，文字屬性使用 text-shadow 屬性，其語(yǔ)法如下：
/*FireFox 語(yǔ)法 */ -moz-box-shadow: 10px 10px 25px #CCC; -moz-text-shadow: 10px 10px 25px #CCC; /*WebKit 核心瀏覽器語(yǔ)法 */ -webkit-box-shadow: 10px 10px 25px #CCC; -webkit-text-shadow: 10px 10px 25px #CCC; /*CSS 標(biāo)準(zhǔn)語(yǔ)法 */ box-shadow: 10px 10px 25px #CCC; text-shadow: 10px 10px 25px #CCC; |
如上面代碼所示，第一個(gè)參數(shù)表示陰影水平偏移量，第二個(gè)表示陰影垂直偏移量，第三個(gè)參數(shù)表示陰影擴(kuò)散的半徑，第四個(gè)參數(shù)定義陰影的顏色。
另外我們還可以定義多個(gè)陰影中間用逗號(hào)隔開(kāi)，陰影的顏色可以使用 RGBA 透明色定義，例如
text-shadow: 0 010px rgba(0,255,0,0.5), -10px5px4px rgba(0,0,255,0.4),15px-4px3pxrgba(255,0,0,0.7); |
目前支持塊陰影和文字陰影的屬性有：Safari 3+、Chrome 1+、Firefox 3.0.5+，IE 全系列瀏覽器和 Opear 不支持該屬性。
漸變色是 Web 設(shè)計(jì)中很常用的一項(xiàng)元素，它可以增強(qiáng) Web 元素的立體感同時(shí)使單一顏色的頁(yè)面看起來(lái)不是那么突兀。過(guò)去為了實(shí)現(xiàn)漸變色我們通常需要先制作一個(gè)漸變的圖片，將它切割成很細(xì)的一小片，然后使用背景重復(fù)使整個(gè) HTML 元素?fù)碛袧u變的背景色。這樣做有兩個(gè)弊端：為了使用圖片背景很多時(shí)候使得本身簡(jiǎn)單的 HTML 結(jié)構(gòu)變得復(fù)雜；另外受制于背景圖片的長(zhǎng)度或?qū)挾龋琀TML 元素不能靈活的動(dòng)態(tài)調(diào)整大小。CSS3 中 Webkit 和 Mozilla 對(duì)漸變都有強(qiáng)大的支持，但是不同之前的一些屬性，這次兩個(gè)廠(chǎng)商沒(méi)有能采用一致的語(yǔ)法。
background: -moz-linear-gradient(center top,/* 漸變開(kāi)始的坐標(biāo) */rgba(254, 216, 80, 0.75),/* 漸變開(kāi)始顏色 */rgba(230, 125, 30, 0.75) 50%,/* 中間漸變顏色 */rgba(254, 235, 121, 0.75)/* 漸變結(jié)束顏色 */ ) repeat scroll 0 0 transparent; |
如上面代碼所示，Mozilla 采用 -moz-linear-gradient標(biāo)簽表示線(xiàn)性漸變。第一個(gè)參數(shù)表示漸變開(kāi)始的坐標(biāo)，可以是坐標(biāo)值，也可以是 top、bottom、left、right、center 等值。后面參數(shù)是漸變的顏色值，個(gè)數(shù)不限，之間用逗號(hào)隔開(kāi)。每個(gè)顏色值可以是普通的十六進(jìn)制顏色也可以是 RGBA 顏色值。每個(gè)顏色后面還可以跟一個(gè)百分比或者 0-1 之間的小數(shù)，表示該顏色在整個(gè)漸變色中的比例。
background:-webkit-gradient(linear,/* 漸變類(lèi)型線(xiàn)性 */left top,/* 漸變開(kāi)始的坐標(biāo) */left bottom,/* 漸變結(jié)束的坐標(biāo) */from(rgba(254, 216, 80, 0.75)),/* 漸變開(kāi)始顏色 */to(rgba(254, 235, 121, 0.75)),/* 漸變結(jié)束顏色 */color-stop(0.5,rgba(230, 125, 30, 0.75))/* 漸變的中間顏色 */ ) repeat scroll 0 0 transparent; |
Webkit 瀏覽器使用 -webkit-gradient屬性表示漸變。第一個(gè)參數(shù)是漸變類(lèi)型，通常是 linear線(xiàn)性漸變。第二個(gè)參數(shù)是漸變開(kāi)始的坐標(biāo)，和 Mozilla 的第一個(gè)參數(shù)相同。第三個(gè)參數(shù)是漸變結(jié)束的坐標(biāo)。第四個(gè)和第五個(gè)分別是漸變開(kāi)始和結(jié)束的顏色，可以是十六進(jìn)制顏色值，也可以是 RGBA 顏色值。最后的 color-stop屬性可以有無(wú)數(shù)個(gè)，在前五個(gè)參數(shù)的后面以逗號(hào)隔開(kāi)，表示家變中間的漸變顏色。在 color-stop屬性中，第一個(gè)參數(shù)是該漸變色占得比例，可以是 0-1 的一個(gè)小數(shù)或者是一個(gè)百分?jǐn)?shù)；第二個(gè)參數(shù)是漸變的顏色值同樣可以是十六進(jìn)制的顏色值或者 RGBA 的顏色值。
從上面的效果圖可以看出，線(xiàn)性漸變是一個(gè)很強(qiáng)大的功能。使我們使用很少的 CSS 代碼就能做出以前需要使用很多圖片才能完成的效果，同時(shí)該功能是瀏覽器原生態(tài)支持的，渲染更快效果更好。很可惜的是目前支持該屬性的瀏覽器只有最新版的 Safari、Chrome、Firefox 瀏覽器支持，且語(yǔ)法差異較大。
形變 Transform 是 CSS 繼線(xiàn)性顏色漸變之后的又一枚重磅炸彈，通常使用 CSS 和 HTML 我們是不可能使 HTML 元素旋轉(zhuǎn)或者傾斜一定角度的。為了使元素看起來(lái)更具有立體敢，我們不得不把這種效果做成一個(gè)圖片，這樣就限制了很多動(dòng)態(tài)的使用應(yīng)用場(chǎng)景。Transform 屬性的引入使我們以前通常要借助 SVG 等矢量繪圖手段才能實(shí)現(xiàn)的功能，只需要一個(gè)簡(jiǎn)單的 CSS 屬性就能實(shí)現(xiàn)。在 CSS3 中 Transform 屬性主要包括 rotate 旋轉(zhuǎn)、scale 縮放、translate 坐標(biāo)平移、skew 坐標(biāo)傾斜、matrix 矩陣變換。下面我們就來(lái)看看每個(gè)屬性是如何使用的。
/*Webkit 核心瀏覽器 */ -webkit-transform: rotate(-90deg); -webkit-transform: scale(2); -webkit-transform: scale(2, 1); -webkit-transform: translate(10px, 20px); -webkit-transform: skew(30deg, -10deg); -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); /*Firefox 瀏覽器 */ -moz-transform: rotate(-90deg); -moz-transform: scale(2); -moz-transform: scale(2, 1); -moz-transform: translate(10px, 20px); -moz-transform: skew(30deg, -10deg); -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); /*Opera 瀏覽器 */ -o-transform: rotate(-90deg); -o-transform: scale(2); -o-transform: scale(2, 1); -o-transform: translate(10px, 20px); -o-transform: skew(30deg, -10deg); -o-transform: matrix(1, -0.2, 0, 1, 0, 0); |
旋轉(zhuǎn)屬性代碼非常簡(jiǎn)單，rotate 屬性加上旋轉(zhuǎn)角度參數(shù)，45deg 代表順時(shí)針?lè)较蛐D(zhuǎn) 45 度。如果是逆時(shí)針旋轉(zhuǎn) 45 度則是 -45deg。
類(lèi)似于旋轉(zhuǎn)，縮放屬性是由 scale 關(guān)鍵字加上縮放參數(shù)實(shí)現(xiàn)的。當(dāng)只有一個(gè)參數(shù) 2 時(shí)表示該 HTML 元素的 X 軸、Y 軸方向同時(shí)被放大 2 被，0.5 表示同時(shí)縮小一半。如果同時(shí)有 2 和 3 兩個(gè)參數(shù)時(shí)，表示該 HTML 元素的 X 軸被放大 2 被 Y 軸方向被放大 3 被。
坐標(biāo)平移屬性顧名思義，就是將該 HTML 元素向 X、Y 軸方向平移若干像素，由 translate 屬性實(shí)現(xiàn)。后面兩個(gè)參數(shù)分別表示向 X 軸、Y 軸平移的量。
skew 屬性也是一個(gè)很有用的 transform 功能，它可以將一個(gè)對(duì)象圍繞著 X 和 Y 軸按照一定的角度傾斜。這和 rotate 的旋轉(zhuǎn)不一樣，rotate 只是旋轉(zhuǎn)而不會(huì)讓 HTML 元素的形狀改變，而 skew 會(huì)讓這個(gè) HTML 元素的形狀改變。skew 有兩個(gè)參數(shù)，分別代表該 HTML 元素沿 X 和 Y 軸的傾斜度數(shù)。
Matrix，你沒(méi)有看錯(cuò)，就是我們通常的矩陣變換。這個(gè)變換就是我們?cè)诮馕鰩缀沃袑W(xué)到的坐標(biāo)系變換。他有六個(gè)參數(shù) (a, b, c, d, e, f)，是一個(gè) 3 × 3 的矩陣，代表坐標(biāo)變換的變換矩陣。使用它我們就可以很靈活的完成任意的坐標(biāo)系變換。有興趣的朋友話(huà)可以查看大學(xué)解析幾何的課本，或者 W3c 在 SVG 中關(guān)于 Matrix 變化的定義和描述。
目前支持這 5 中變換轉(zhuǎn)屬性的瀏覽器有 Safari 4+、Chrome 5+、Firefox 3.5+、Opera10.5+，IE 全系列瀏覽器不支持該屬性。
之前對(duì) CSS3 的一些新特性如何使用以及在各個(gè)瀏覽器中的實(shí)現(xiàn)做了詳細(xì)的介紹。那么如何使用這些屬性來(lái)開(kāi)發(fā)一些絢麗的應(yīng)用呢？下面我們就來(lái)看一個(gè)例子。
Message Bubble 是 Web 應(yīng)用上很常用的 UI 元素，通常較為美觀的 Message Bubble 都是通過(guò)圖片加上一些 JavaScript 來(lái)實(shí)現(xiàn)的。上面是幾個(gè)是用純 CSS3+HTML 編寫(xiě)的 Message Bubble 例子，這樣不但實(shí)現(xiàn)簡(jiǎn)單，而且可以根據(jù)需要?jiǎng)討B(tài)切換樣式。下面就結(jié)合 Message Bubble 的小例子講解如何應(yīng)用我們之前介紹的 CSS3 的新特性。
實(shí)現(xiàn)這類(lèi)帶不規(guī)則角的 Message Bubble 的關(guān)鍵是使用 :before、:after 兩個(gè)偽類(lèi)和 content 屬性。通過(guò) before、:after 兩個(gè)偽類(lèi)在 bubble 的 html 元素后面添加另外兩個(gè) dom 節(jié)點(diǎn)，通過(guò) content 屬性將其內(nèi)容設(shè)置為非空。之后通過(guò)調(diào)整節(jié)點(diǎn)大小和 border 的寬度來(lái)實(shí)現(xiàn)出不同的角的樣式。如下面代碼所示：
<blockquote class="message-bubble"> <p>Hello, I'm Qin Jian</p> </blockquote> .message-bubble { background:#B8DB29; margin:80px; padding:50px 40px; position:relative; width:230px; } .message-bubble:before { background:#B8DB29; bottom:-20px; content:" "; height:30px; left:50px; position:absolute; width:30px; z-index:-1; } .message-bubble:after { content:" "; background:#B8DB29; height:15px; width:15px; position:absolute; left:30px; bottom:-30px; z-index:-1; }
|
上面的代碼是一個(gè)基本的 Message Bubble 的例子。首先為 Message Bubble 添加基本 HTML 結(jié)構(gòu)，加入你想要顯示的文字。之后使用偽類(lèi) before 和 after 為通過(guò)設(shè)置 content 屬性不為空為 Bubble 添加兩個(gè) dom 節(jié)點(diǎn)。通過(guò)設(shè)置這兩個(gè)節(jié)點(diǎn)的大小、四個(gè)邊的邊框?qū)挾取⑽恢玫葘賹?shí)現(xiàn)不同的 Bubble 角的效果。上面代碼運(yùn)行后將有下面的效果。
這樣我們就得到了一個(gè)基本的 Message Bubble 的形狀，接下來(lái)使用我們之前介紹的 CSS3 新特性，為 Bubble 加上一點(diǎn)圓角、背景漸變，效果如下：
這個(gè) bubble 的效果是不是好了很多呢？之后我們?cè)偌由弦稽c(diǎn)文字陰影、邊框陰影、還有鼠標(biāo)懸停在節(jié)點(diǎn)上時(shí)節(jié)點(diǎn)放大和旋轉(zhuǎn)效果。
這樣一個(gè)效果很酷且具有很強(qiáng)交互性的 Message-Bubble 就做好了。重要的是我們沒(méi)有使用任何圖片，只需要更改 CSS 屬性我們就可以變換出各種各樣的樣式。例如圖 5 所示可以通過(guò)調(diào)整兩個(gè)偽類(lèi)生成節(jié)點(diǎn)的大小和邊框?qū)挾葋?lái)設(shè)計(jì)出各種各樣的角的類(lèi)型。有興趣的讀者可以自己實(shí)驗(yàn)一下。以下是這個(gè)例子的全部 CSS 代碼。
.message-bubble { background:#B8DB29; margin:80px; padding:50px 40px; position:relative; width:230px; -moz-border-radius:220px 220px 220px 220px / 120px 120px 120px 120px; -webkit-border-radius:220px 220px 220px 220px / 120px 120px 120px 120px; background:-moz-linear-gradient(center top , #B8DB29, #5A8F00) repeat scroll / 0 0 transparent; background:-webkit-gradient( linear, left top, left bottom, from(#B8DB29), to(#5A8F00) ) repeat scroll 0 0 transparent; text-align:center; border:1px solid #CCC; color:#FFFFFF; -webkit-box-shadow:10px 10px 20px #000000; -moz-box-shadow:10px 10px 20px #000000; box-shadow:10px 10px 20px #000000; } .message-bubble p { font-size:1.25em; text-shadow:5px 5px 10px #000000; } .message-bubble:before { background:#B8DB29; bottom:-20px; content:" "; height:30px; left:50px; position:absolute; width:30px; z-index:-1; -moz-border-radius:30px 30px 30px 30px; -webkit-border-radius:30px 30px 30px 30px; background:-moz-linear-gradient(center top , #B8DB29, #5A8F00) repeat scroll / 0 0 transparent; background:-webkit-gradient( linear, left top, left bottom, from(#B8DB29), to(#5A8F00) ) repeat scroll 0 0 transparent; border:1px solid #CCC; -webkit-box-shadow:10px 10px 20px #000000; -moz-box-shadow:10px 10px 20px #000000; box-shadow:10px 10px 20px #000000; } .message-bubble:after { background:#B8DB29; bottom:-30px; content:" "; height:15px; left:30px; position:absolute; width:15px; z-index:-1; -moz-border-radius:15px 15px 15px 15px; -webkit-border-radius:15px 15px 15px 15px; background:-moz-linear-gradient(center top , #B8DB29, #5A8F00) repeat scroll / 0 0 transparent; background:-webkit-gradient( linear, left top, left bottom, from(#B8DB29), to(#5A8F00) ) repeat scroll 0 0 transparent; border:1px solid #CCC; -webkit-box-shadow:10px 10px 20px #000000; -moz-box-shadow:10px 10px 20px #000000; box-shadow:10px 10px 20px #000000; }
|
.message-bubble:hover{ cursor:pointer; -webkit-transform:scale(1.2) rotate(-5deg); -moz-transform:scale(1.2) rotate(-5deg); -webkit-transition-property:-webkit-transform; -webkit-transition-duration:2s; }
|
CSS3 為我們帶來(lái)的很多令人激動(dòng)的新特性，使我們使用很簡(jiǎn)單的代碼就能實(shí)現(xiàn)以前不能實(shí)現(xiàn)的效果和功能。然而由于這些新特性在不同瀏覽器中的支持不同，特別是 IE 瀏覽器的支持，使得我們很難做到兼容瀏覽器且視覺(jué)效果統(tǒng)一。以下作者根據(jù)對(duì) CSS3 的使用經(jīng)驗(yàn)給出幾個(gè)使用上的建議。
- CSS3 的使用不應(yīng)當(dāng)影像頁(yè)面在各個(gè)瀏覽器中的正常顯示。我們可以使用 CSS3 的一些屬性來(lái)增強(qiáng)頁(yè)面表現(xiàn)力和用戶(hù)體驗(yàn)，但是這個(gè)效果提升不應(yīng)當(dāng)影響其他瀏覽器用戶(hù)正常訪(fǎng)問(wèn)該頁(yè)面。用戶(hù)應(yīng)當(dāng)還能正常使用頁(yè)面的功能，只是頁(yè)面效果不是那么好罷了。
- 同一頁(yè)面在不同瀏覽器中不必完全顯示一致。功能較強(qiáng)的瀏覽器頁(yè)面可以顯示的更炫一些，而較弱的瀏覽器可以顯示的不是那么酷，只要能完成基本的功能就行。大可不必為了在各個(gè)瀏覽器中得到同樣的現(xiàn)實(shí)效果而大費(fèi)周折。
- 在某些不支持 CSS3 的瀏覽器中，我們可以使用替代方法來(lái)實(shí)現(xiàn)這些效果，但是需要平衡實(shí)現(xiàn)的復(fù)雜度和實(shí)現(xiàn)的性能問(wèn)題。
CSS3 雖然還沒(méi)有正式發(fā)布，但是各個(gè)瀏覽器廠(chǎng)商已經(jīng)開(kāi)始迫不及待的支持部分新特性了。本文在該系列文章第 1 部分的基礎(chǔ)上，對(duì) CSS3 的部分新特性進(jìn)行了詳細(xì)的介紹，并結(jié)合一個(gè)實(shí)例講解如何使用這些新特性來(lái)開(kāi)發(fā)一些應(yīng)用。相信良好的藝術(shù)創(chuàng)意加上 CSS3 的變現(xiàn)能力，可以完成很多我們意想不到的效果和功能。然而 IE6/7/8 系列瀏覽器都不支持 CSS3 特性，遲遲未發(fā)布的 IE9 對(duì) CSS3 支持也很有限，這使得很多開(kāi)發(fā)人員因?yàn)?IE 的兼容性問(wèn)題對(duì) CSS3 望而卻步。在該系列文章的最后一部分，將詳細(xì)介紹如何在 IE 系列瀏覽器中使用替代方案來(lái)實(shí)現(xiàn)部分 CSS3 效果。