在網頁設計開發過程中,很多地方有可能會運用到三角形(小三角),例如:tooltips提示框、下拉式功能表、甚至在loading載入動畫裡。不管你喜歡還是不喜歡,這些小元素對各UI元素之間的聯繫關係式很重要的。

在網頁設計開發過程中,有一些不同的方法來設計並製作一個三角形,在本文中,我將介紹:

利用編碼顯示三角形圖片

利用編碼顯示三角形圖片

假如你已經有了三角形的圖片,並且減少HTTP請求,那麼將這個圖片轉換成一個BASE64字串是最好的解決方案。有用的工具(用於圖片轉換成BASE64編碼):

http://webcodertools.com/imagetobase64converter

http://image2base64.wemakesites.net/

優點

你可以按照自己的思想設計陰影,漸變等,然後對其進行轉換編碼

缺點

你需要使用一個圖片編輯軟體去設計

對於較大的圖片,最終轉換成字串佔用大小會很大

舊版本的瀏覽器,如:IE6/IE7是不相容的

CSS 邊框製作一個三角形

CSS 邊框製作一個三角形

這也是一個常用的使用方式,如tooltips資訊提示框和下拉式功能表。以上的示例,這是一個我最喜歡的方法創建小而且有用的三角形。

優點

很容易的通過修改一些CSS代碼屬性值而更改顏色和大小

這是一個跨瀏覽器的解決方案。

缺點

這個方式使用的是border,所以你不能添加陰影、漸變、和其他一些CSS3效果

請記住,IE6是不支持透明邊界的-如果你關心這個問題

如果你使用火狐瀏覽器,要知道,CSS的“透明”有時可能不會是透明的,特別是在對角線邊框

HTML 字元製作一個三角形

HTML 字元製作一個三角形

它是基於使用可用的Unicode字元清單的字元。

優點

它是一個跨瀏覽器的技術

可以使用CSS3的text-shadow屬性添加陰影。

更多完整內容:http://www.singleboy.org/web-design/191.html

arrow
arrow
    全站熱搜

    w3design 發表在 痞客邦 留言(1) 人氣()