2015-08-26 00:04:47yaasas
CSS3 的 Gradients 漸層效果實在太棒了！不用開 GIMP 啦！
CSS3 新推出的 Gradients 功能是一個可以用 CSS 語法就創造出漸層效果的玩意兒，以前我們在設計網頁的時候，每次碰到漸層效果就會不自覺得打開 GIMP（很多設計師是打開 Photoshop）來設計一張可用的漸層圖案，然後插入到網頁內，其實這樣的設計並沒有什麼錯誤，因為這是傳統的設計方式，只是比較麻煩，可是現在 CSS3 有推出一個叫做 Gradients 的功能，可以讓網頁前台的設計師很輕鬆的設計出美麗的漸層效果。
這個 CSS3 的 Gradients 漸層效果因為還蠻新的，所以之前許多的瀏覽器支援度不是很好，最近似乎支援度越來越好，像是 IE 10.0 及以上的版本支援、Google Chrome 最新版本、FireFox 最新版本的支援度都還不錯，似乎是個挺值得學習的技術，CSS3 的 Gradients 最大的特色就是只要會寫 CSS 語法就能創造出很美麗的漸層效果，無稐是方向還是形狀都可以自己設定，超方便的啦！
background: linear-gradient(方向,顏色1,顏色2, ......);
background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);
上面這兩個都是 CSS3 的 Gradients 的基本語法，詳細的操作請看參考資料的 Wibibi 網頁設計教學百科內容介紹，有參數設定、方向設定、顏色設定 ... 等各種設定方式，超級好用的啦！
參考資料
這個 CSS3 的 Gradients 漸層效果因為還蠻新的，所以之前許多的瀏覽器支援度不是很好，最近似乎支援度越來越好，像是 IE 10.0 及以上的版本支援、Google Chrome 最新版本、FireFox 最新版本的支援度都還不錯，似乎是個挺值得學習的技術，CSS3 的 Gradients 最大的特色就是只要會寫 CSS 語法就能創造出很美麗的漸層效果，無稐是方向還是形狀都可以自己設定，超方便的啦！
background: linear-gradient(方向,顏色1,顏色2, ......);
background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);
上面這兩個都是 CSS3 的 Gradients 的基本語法，詳細的操作請看參考資料的 Wibibi 網頁設計教學百科內容介紹，有參數設定、方向設定、顏色設定 ... 等各種設定方式，超級好用的啦！
參考資料
- Wibibi 網頁設計教學百科 > CSS3 > CSS3 Gradients 漸層效果
- GIMP - The GNU Image Manipulation Program