大高雄Linux使用者協會

這幾天在練習 HTML5 mobile app，決定找一個 Android 底下的 app 來重刻成 HTML5 版本，我挑的是 News & Weather 的天氣部分。

這是一個可以根據你現在地點給你當地天氣的 app，按下右邊靠近上面的驚歎號圖示可以看今天一整天的溼度以及溫度變化，在圖形上面用手指滑動可以看指定時間的溼度。

我找了一下如果要每個小時的溼度與溫度的 Weather API 大多都要錢的，所以最後我接了 World Weather Online 的 API, 但是圖表就換成接下來五天的天氣氣溫變化，當作練習就是了。

成果如下，他只能跑在 Firefox for Android 上面，我沒有針對 Chrome/Safari 等 webkit 系列調整。

作完之後有一些感想...

如果不考慮相容性，現在的 CSS3 真的很強大，以前很詭異的排版方法現在都變得好排多了，我連右上角驚歎號圖示按下去顯示另外一頁都是用 CSS3 完成的，不需要 javascript。
CORS 我還是沒搞定，最後用比較醜的 JSONP 解決。
SVG 雖然好用，不過看起來效能在 mobile 上面還無法接受，目前應該還是用 Canvas 比較好。
CSS/SVG 的漸層效果在 Firefox For Android 上面看起來很差，不知道爲什麼。

然後我很懶惰的沒有做 SVG path 的圓角，看起來好像沒有像是 rect 的 rx,ry 可以直接設定...

Source code 我放在 github 上面，有興趣的參考參考。

by Yuren Ju at 3:52 PM under css3 , firefox , html5

目前各家瀏覽器分別開始支援 CSS3，現在 MS 瀏覽器系列只有 IE 9 開始支援 CSS3，所以大家還是趕快升級到 IE 9.0，或者是使用 Google Chrome，FireFox 4.0 吧，以前還沒有 CSS 3 的時候，圓角功能都是靠 jQuery Plugin: Corner，有了 CSS3 大家就不用這麼麻煩了，一行就可以搞定喔。

CSS Border Radius Generator

大家可以參考 CSS Border Radius Generator 這網站，只要輸入4個角所需要的圓角半徑，就會自動產生 CSS 3 的語法喔

/* support Safari, Chrome */
-webkit-border-radius: 5px;
/* support firefox */
-moz-border-radius: 5px;
border-radius: 5px;

也可以個別設定角度
右上圓角：

border-topright-radius: 5px;
-moz-border-topright-radius: 5px;
-webkit-border-topright-radius: 5px;

左上圓角：

border-topleft-radius: 5px;
-moz-border-topleft-radius: 5px;
-webkit-border-topleft-radius: 5px;

右下圓角：

border-bottomright-radius: 5px;
-moz-border-bottomright-radius: 5px;
-webkit-border-bottomright-radius: 5px;

左下圓角：

border-bottomleft-radius: 5px;
-moz-border-bottomleft-radius: 5px;
-webkit-border-bottomleft-radius: 5px;

非常簡單，大家以後不用再自己做圓角的圖，CSS3 一行搞定啦

Ref:
css圓角(border-radius)介紹
 螞蟻的 CSS border-radius
developer mozilla border-radius

Related View

by appleboy at 12:29 PM under css , css3 , jquery (Comments)

大高雄Linux使用者協會

大高雄Linux使用者協會

開放源碼社群活動

People

What people talk about

one page

Meta

tag cloud

tag cloud

CSS Border Radius Generator

Related View