【O專欄】CSS3:網頁外觀新衝擊之圖像背景加工篇

【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,SafariChrome的Webkit引擎則是-webkit-border-radius。為了避免讓設計者因為配合不同的語法而要寫一堆額外的程式碼,Opera則直接採用最標準的語法,去除指令前瀏覽器的代稱。但在W3C對CSS3標準還沒完全規範之前,如果要使用CSS3語法,又想要所有的支援CSS3的瀏覽器都可以正常支援的話,最好還是將這三種語法都寫進去比較保險。

1. 圓角加工(border-radius)

設計者經常把這個功能叫做Rounded Corners。顧名思義,它就是要給圖像製造圓角。早期要做圓角,必須把圖像切成小塊然後在影像軟體中作修改,之後再用div把這些小塊圖像接回,費時又費力。現在有了CSS3,就可以直接用border-radius做出圓角效果,下面是各種不同圓角的程式碼,給各位作為參考。

【O專欄】CSS3:網頁外觀新衝擊之圖像背景加工篇

2. 陰影加工(box-shadow)

box-shadow語法則是給圖像製造影子。以下是各種不同陰影造型以及圓角加陰影的程式碼範例。

【O專欄】CSS3:網頁外觀新衝擊之圖像背景加工篇

3. 拼接背景圖像(multiple background)

如果有兩張以上的圖像想要在網頁上併在一起的話,就可以直接使用CSS3的multiple background進行拼貼。套用CSS3後看起來圖像雖然是重疊的,而實際上卻都獨立存在。以下是試作範例:

【O專欄】CSS3:網頁外觀新衝擊之圖像背景加工篇

總結:

CSS3的修飾圖像邊緣(border)與背景(background)幫網頁設計者簡化很多本來一些可能瑣碎但費時的工作。現在變得簡單多了,而且能讓圖像達到更好的效果。

參考資料:

謝子斌(Zi-Bin)
作者

目前Opera挪威總部擔任Opera網路宣講師,在世界各地宣講網路標準技術,包括HTML5、CSS3等。此外也於W3C擔任HTML小組成員、HTML5中文小組主席。

使用 Facebook 留言
發表回應
謹慎發言,尊重彼此。按此展開留言規則