50個令人驚奇的 CSS3 動畫特效

看完這些效果後, 原本要使 flash 或是使用 sliverLight 才能達到的效果, 現在完全不用. 只要你的瀏覽器支援 CSS3, 很容易就搞定一切. 當然, Flash 和 SliverLight 各有其優缺點. 但不可否認的, 用簡單的方式達到困難的結果, 才是我們要的.

對於一些前端設計師而言, 不用再學習愈來愈難用的 flash(哈, 個人觀點), 可以很快的做出想要的形式, 讓使用者有跟以往更不同的操作介面和經驗.

圖像在多數時間是比文字來得容易使用. 簡單, 清楚.

google Chrome 在執行 CSS3 的效果時, 流暢到跟 flash 一樣. 雖不完全, 但足以讓人感到驚奇.

以這個時鐘的範例, colorful-clock-jquery-css

很簡單的時鐘, 怎麼設計的?
如果真的把它設計成手錶的實體產品, 也很棒! 可以設定換圈的顏色, 或是多做點不一樣的功能.
有沒有廠商想要把它設計成商品啊? 我會買一支.

CSS3 的出現, 都將改變使用者和以往不同的操作經驗. 很有趣, 值得期待.

簡報需要使用 google Chrome 或是 FireFox 3.6+ 瀏覽

html5 的簡報, http://apirocks.com/html5/html5.html

變成 網頁的演進, 到 html5 ? , 嗯…值得思考

html 5 = html + css + js APIs ?

看完之後, 發現加了許多有趣的新玩意.
但如果要更新功能, 是不是瀏覽器也要一直更新, 或是可以用外掛或是它有元素會自動抓取 w3C 的標準, 自動加入?

Javascript 的 API
應該是直接內建在瀏覽器裡了…那 jQuery , 是不是也要內建了? 不用每次都要找 jQuery 要那裡坎入了. 最好瀏覽器也能自己更新.

1. 可以暫存在 client, 等待連線後, 傳回 server, 嗯, 看來 follow 要再想清楚了, 不知 client 的資料是明碼還是暗碼, 會不會被偷?
2. 可以透過 js 存取 SQL database ? server 不用配合嗎? 這樣不會很危險? 暴露主機的帳號密碼, 這要小心
3. 加入 cache 機制, 不一定是由瀏覽器控制, 而是由你的程式控制
4. web workers ? 這啥功能, 再研究.
5. 也加入了許多新的 js, 可以由 server 自動 push 資料到 js 裡, 而不是等使用者去點選或是事件觸發. 嗯, 這個很早以前, 微軟就有作過, 但沒推廣成功.
6. 可以啟用桌面通知? 這是只有瀏覽器做的還是連結到 OS 做的?哇, 這….會不會開始出現一堆 html5 病毒?
7. 加入拖放功能
8. 顯示你所在的位置, 這不會不小心就被暗暗傳送你的位置嗎, 這功能有點危機..哈.

HTML

1. 加入語意式的 html tag, 有一個標準嗎? 還是使用者可以自己定義? header, footer, menu, navigation….
2. 把原本使用 link rel… 都改成 a rel 了…
3. 加入 microdata, 有點像 title/alt , 但定義不同, 至少是個標準, 但字好長啊 itemprop
4. 新的aria 屬性, 還不了解這是什麼
5. form 的幾個元素加強, range - 好樣地, 以後不用再寫一堆 js 了, 但可以自定外觀嗎? 還加入了一些事件, autofocu, 不用寫 js 了, placeholder 可以提醒知使用者要輸入什麼文字
6. 直接用 html 播放聲音跟影音, 但還要配合 js, 這有點笨, 老實說, 誰想出來的? 要嗎, 就乾脆直接用 html tag 就好了, 為什麼還要和 js 配合. 還有, 外觀可以改變嗎?
7. canvas 功能, 一様要配合 js, 老天….這又是誰想出來的, 不能直接用 html tag解決嗎? 就像 adobe 推的 svg 一樣…唉..
8. 加入了 3D 功能, 哇…很讚…但是…是指什麼? 網頁顯示成 3D, 要用紅藍眼鏡看嗎? 還是什麼 3D, 值得研究…

CSS

1. 在 css 裡, 可以使用邏輯判斷, 這微軟好像很早就幹了這事, 但 Firefox 後來也有. 哈.
2. 動態讀取字型…哇..酷啊, 但中文字檔案都很大, 怎麼辦…華康很久以前有推過類似的, 但沒法像 MAC 的機器顯示的那麼漂亮, 失敗. 不知這技術的成熟度如何..
3. text-overflow 新功能…不會再有人故意打了一堆英文數字, 而破壞了畫面, 這是件好事, 但明明就是瀏覽器的 bug, 變成還要定義一個標準, 有點豬頭. 範例裡, 怎麼沒看到自動折行..怪了.
4. web-kits 多了一個自動欄位的控制, 哈, 不用再寫 js 來處理了, 對於跨欄, 看來有好處
5. 字型以加粗控制, 而不再是醜呆了的 h1~h7, strong, bold 了…
6. opacity , 文字和圖片都可以調透明度, 那區塊可以嗎, 其它元素可以嗎?
7. 多了 HSLA 的文字設定
8. 圓角的語法是一定要的
9. 漸層色, 放射狀漸層…有趣
10. 陰影..哈…我記得這以前不就有了..
11. 透過幾個新加入的語法, 可以讓你快速產生 logo, buttin, 文字特效的變化, 圓角…這很酷, 以後不用再做一堆圖了, 還可以動態並快速產生網頁的元素
12. 針對背景圖的大小做控制, 有點像 100%, fit, crop..等等之類的效果. 還可以疊多個背景圖..哈…酷…意思是, 我想做個藍天白雲, 全部都丟到背景圖去疊就好了, 對吧.
13. transition, 微軟真的有很多好用的 tag, w3c 把它加入並標準化, 像 iframe. 反什麼很多人都反微軟呢?
14. transform, 可以軟角度, 哈, 這也酷
15. animation ? 咦, 竟然把動態特效放到這裡來了. form to , animation …怪怪, 放到 css 控制啊….想想要怎麼用
16. .chrome frame? 怪了, 我在 IE6sp2 試, 卻 js error ? 怪怪..它原本是讓 IE6,7,8 可以支援 html5 的功能…再試試

以上, 看簡報內容, 不負責任, 亂報告.

sometimes, we get jpg files form visual designer.

we’ll find the jpg not show in browser correctly, why ?

because the visual designer made the jpg in CYMK format for print output, not RGB.

browser just only knew RGB format.

if you want correctly show in browser,
tell visual deisnger: convert jpg to RGB format. 3Q!