Rachel Cunliffe2006年的7個blog設計趨勢中提到,利用CSS技巧所製作的圓角矩形將在今年的blog版面大為流行,這其實並非偶然,Basement.org有一篇很棒的文章:Why Do We Love Rounded Corners,從iPod的設計談到了為什麼圓角會如此受到歡迎,簡單地說,圓的東西總是令人無法抗拒,忍不住想要握在手裡。

Spiffy Box是Spiffy Corners的作者Greg Johnson的新作,使用者只需要四個步驟就可以產生圓角矩形,並放到自己的網頁中,非常方便。

使用者只要在第一步驟時,依需要填入以下的值: 

影像寬度(Image Width,即該圓角矩形的寬度) 
影像高度(Image Height) 
圓角半徑(Corner Radius):值越大則所產生的圓角會越明顯。 
前景色(Forground Color):矩形內的顏色。 
邊框顏色(Border Color) 
背景色(Background Color):矩形外的顏色,可填入與網頁背景相同的顏色。 
剩餘的三個步驟,都是複製與貼上的工作。在步驟2時,使用者必須按右鍵將圓角矩形圖片另存新檔,預設的檔名為img.php.png,因為在後面的CSS語法當中會用到這張圖片,所以如果存成不同檔名,也要在CSS中作相應修改才行。

步驟3提供了這個圓角矩形效果的完整CSS樣式表,使用者複製之後,可以貼到網頁的head元素之內,放在<style type="text/css">和</style>之間;亦可以貼到獨立的CSS檔案中,如此便能在不同網頁中連結這個外部樣式表,重複使用相同的圓角矩形。

步驟4則提供了產生這個圓角矩形的XHTML原始碼,只要貼在網頁中適合的位置即可。

分析這段原始碼之後可以知道,這個圓角矩形分成了head與body兩個部分,在head處的文字,會套用h2元素的樣式,為放大後的粗體字,而body內的文字,則是包含在一般的p元素之內。各位可以參考下面的範例網頁,這是用Spiffy Box的預設值所製作的圓角矩形。

 HTML代碼

 
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


圓角底圖:


教學說明:自己去玩玩看喔!
 

vemma維瑪珉珉Min 發表在 痞客邦 留言(0) 人氣()