2010年5月17日 星期一

【轉載】CSS3相關文章

CSS3帶來了意想不到的方便,許多以往需借用繪圖軟體把字套用我們想要的字型後,需做成圖片,顯示在網頁上,才不會離了我們想要的效果,但css3不僅僅支援了網路字型,更有其他不錯的效果,讓網頁的呈現更為豐富。

筆者看到css3的出現,只有「我心狂喜」四個字來形容。真的感謝 CSS創始人Hakon Wium Lie 創造了這麼好用的css3讓網頁可以變得美美的,而不是一成不變。

需要注意的是,各瀏覽器的版本,是否有支援css3喔~要不然小叮噹會變成方塊叮噹XD

(奎.Ke.2010/05/17)

以下,有興趣的人,到各文章慢慢品嚐css3帶來的嚮宴。

---

1. 【O專欄】CSS3:網頁外觀新衝擊之圖像背景加工篇(按我前往網頁)

文章引言:「
筆者針對CSS3介紹了網路字型,也就是直接在網頁程式碼中指定存在網路上的字型,便可呈現出在任何平台、任何支援瀏覽器下都一樣美觀的字體。為了讓大家充分利用CSS3的特性,這次要介紹如何修飾圖像邊緣(border)與背景(background)。

過去網頁設計者要將圖像加工,例如在邊界修圓角,經常需要藉助第三方軟體,如Photoshop等工具來修圖。有時候我們想對文字做些立體效果,像是加上陰影,還是得靠PS來修,然後把這些文字轉換為圖像後再上傳,沒辦法直接以程式碼辦到。(Photoshop一套可不便宜!)

CSS3在這一方面做了嘗試,能直接透過CSS代碼來對圖像、文字做出修飾,讓常要作的網頁外觀設計變得更簡單、幾行代碼就能完成。W3C規範對提出了各種不同的功能與外觀修飾語法,今天就來介紹幾個設計者在作圖像加工時常會用到的:「圓角加工(border-radius)」、「陰影加工(box-shadow)」與「拼接背景圖像(multiple background)」。

雖然大部分的主流瀏覽器都已經支援borders和background語法,但由於CSS3還在規劃中、尚未定案,所以有些瀏覽器會使用自己的語法。比方Firefox是-moz-border-radius,Safari與Chrome的Webkit引擎則是-webkit-border-radius。為了避免讓設計者因為配合不同的語法而要寫一堆額外的程式碼,Opera則直接採用最標準的語法,去除指令前瀏覽器的代稱。但在W3C對CSS3標準還沒完全規範之前,如果要使用CSS3語法,又想要所有的支援CSS3的瀏覽器都可以正常支援的話,最好還是將這三種語法都寫進去比較保險。



2. 詳細規範請見:W3C組織CSS3背景與圖像邊緣的完整語法規範(英文)

3. 跨瀏覽器 CSS3 代碼生成器

4. IE-CSS3 讓 IE 支援 CSS3

5. 【O專欄】CSS 3:網頁外觀新衝擊之字型篇
文章引言:

範例1:如何在CSS上套用網路字型
範例2:如何在SVG上套用網路字型
範例3:網路字型也可做特效

CSS 3的網路字型可以讓設計師擺脫以往受限於系統字型,提供多種不同的字型選擇,讓網頁整體設計活潑、富有變化。網路字型可以單獨被使用,同時也可以在如 SVG的圖形下使用,並製造特效,讓網站設計更突出、更具風格。目前最新版的瀏覽器中,Apple Safari(Webkit引擎)、Firefox以及Opera 皆已逐步支援CSS 3中網路字型這項屬性。



6. 網路字型的應用文章(英文版)