iT邦幫忙

DAY 4
2

Windows Metro style Apps using HTML5系列 第 4

css3 範例與產生器

http://ithelp.ithome.com.tw/ironman5/player/seanamph/tech/1
http://slides.html5rocks.com/#formula-intro-slide這個投影片表示HTML5 ~= html+js+css3。
所以在研究html5最後就是要了解什麼是css3。
css3 在網路上的範例很多,但最難的地方就是各家瀏覽器支援程度不一。不要說css3了,css1、css2就遇到許多困難了,如果能用最精簡的方法產生各家瀏覽器都能看起來差不多的網頁,那功力一定超強。
有時候也沒辦法記那麼多,除了熟練以外,幸好網路上有一些css產生器,滑鼠調一調就能自動產生css,這種工具不能少阿!
廢話不多說,根據 http://msdn.microsoft.com/zh-tw/library/ie/hh673536(v=vs.85).aspxhttp://www.w3schools.com/css3/整理比較後,以下是我整理一些範例和css3產生器的網址。

border radius 圓角
http://border-radius.com
關於舊版ie可以使用 http://fetchak.com/ie-css3/產生圓角

border image 邊框圖
http://border-image.com

background-size 背景圖大小
http://www.w3schools.com/css3/tryit.asp?filename=trycss3\_background-size

Exclusions 排除範圍:文字自動換行,讓文字圍繞在元素周圍,而不是將元素限制在文字的左邊或右邊浮動。
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on\_positionedfloats.htm

Regions 區域:接受包含文字與影像的 HTML 內容單一資料流,然後將該內容串流至標準 HTML 文件中定義的多個空的容器中。
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on\_regions.htm

Multi-column Layout 多欄版面配置:將內容填入多欄中,各欄之間允許間距和選擇性的間隔線。
http://www.w3schools.com/css3/tryit.asp?filename=trycss3\_column-count
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on\_multi-column.htm

Flexible Box ("Flexbox") Layout 彈性區塊 ("Flexbox") 配置:在定義區塊尺寸時考量可用空間,如此可使用相對大小和位置。
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3\_box-flex
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on\_flex.htm

Grid Layout 格線配置
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on\_grid.htm

Device Adaptation 裝置適應
IE:@-ms-viewport 規則搭配 CSS 媒體查詢來適應不同的裝置。
http://msdn.microsoft.com/zh-tw/library/ie/hh708740(v=vs.85).aspx

Transforms 轉換 :包含2D、3D轉換
http://www.w3schools.com/css3/css3\_2dtransforms.asp
http://desandro.github.com/3dtransforms/docs/cube.html
http://www.useragentman.com/tests/cssSandpaper/cube3.html
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on\_3d-transforms.htm

Animations 動畫
http://www.w3schools.com/css3/tryit.asp?filename=trycss3\_animation1
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on\_animations.htm

Fonts 字型
http://www.w3schools.com/css3/tryit.asp?filename=trycss3\_font-face\_rule
http://msdn.microsoft.com/zh-TW/library/gg699339.aspx

Gradients 漸層
http://www.colorzilla.com/gradient-editor/
http://gradients.glrzad.com/
http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Transitions 轉場:動畫效果。
http://www.w3schools.com/css3/tryit.asp?filename=trycss3\_transition1
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on\_transitions.htm

Text 文字:將陰影套用到文字,或為文字區塊進行自動斷字處理。
http://www.css3-generator.de/box-shadow.html
http://www.w3schools.com/css3/tryit.asp?filename=trycss3\_text-shadow\_tut
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on\_text-shadow.htm

更多ie10 css3 範例下載
http://code.msdn.microsoft.com/ie/site/search?f%5B0%5D.Type=Technology&f%5B0%5D.Value=CSS3


上一篇
Javascript 書單
下一篇
Windows 8 HTML5 WinRT App : 花30分鐘做一個 rss reader
系列文
Windows Metro style Apps using HTML537

尚未有邦友留言

立即登入留言