WebGradients 收錄 180 種漸層背景免費下載,一鍵產生 CSS 3 語法

WebGradients2017-02-14_1139-1.png

現在一些新的網路服務都蠻喜歡使用漸層顏色作為背景,一來讓背景不那麼單調,再者是 CSS3 之後加入 linear-gradient 參數表示漸變色背景圖,除了顏色外還能控制漸層的角度等等,幾乎只要幾個控制參數就能做到,在應用上更為靈活。如果你想要在網站開發或部落格使用漸層背景,之前我推薦的「Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器」是一個方法,另外本文要介紹的 WebGradients 就更厲害一些。

 

WebGradients 是一個收錄 180 個線性漸變背景免費集合的網站,你可以從這裡挑選網站背景,利用產生的 CSS 語法將它快速套用到你網站的任何部分。WebGradients 讓使用者能直接點擊後預覽背景效果,一鍵產生 CSS 語法或下載 PNG 圖片格式。

此外,WebGradients 還提供免費的 Photoshop 和 Sketch 下載!如果需要的話,你能從網站上找到購買鏈結,自由贊助金額,亦可免費取得這兩種素材組合包。

 

網站名稱:WebGradients
網站鏈結:https://webgradients.com/

 

使用教學

STEP 1

開啟 WebGradients 網站後,往下拖曳就能找到收錄的所有 180 種線性漸變背景顏色,網站右上角有兩個鏈結,分別是 .Sketch 和 .Psd 兩種不同圖片格式的線上購買鏈結。

 

STEP 2

WebGradients 收錄的每個背景顏色都有名稱、色碼及預覽圖。

點擊預覽後會直接放大、套用到你目前的網頁背景,就能看到該漸層顏色的變化效果。

 

STEP 3

點擊背景圖右上角的「下載」圖示可以取得背景圖的 PNG 格式,不過更方便的方式是點擊右下角的「Copy CSS」,WebGradients 會自動產生漸層圖案的 CSS 樣式並複製到剪貼簿,例如我取得的某一段語法看起來像這樣:

background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

只要把它加入你網站或應用程式的 CSS 樣式表就能輕鬆套用,非常簡單。

 

STEP 4

如果你想獲取這些漸層背景的 Sketch 或 Photoshop 原始圖檔,點擊網站首頁右上角的下載鏈結就能找到,會連接到 Gumroad 商店,可以自由填入購買價格(輸入 $0 元免費下載),若喜歡或覺得對你來說非常有幫助不妨付費贊助一下。

 

原文作者:免費資源網路社群 Pseric

原文出自:WebGradients 收錄 180 種漸層背景免費下載,一鍵產生 CSS 3 語法

責任編輯:BFA 簡報 編輯部

 

簡報小聚 #37 2018 年 8 月聚會

8 月 16 日|職人簡報交流聚會

BFA 簡報小聚是一個以簡報溝通為主題的交流聚會,每次聚會由「主題分享」與「自由交流」兩個環節組成。「主題分享」將由三位講者 (Before, After, Pro Speaker) 依次帶來 20 分鐘的簡報溝通故事、經驗或技巧分享。

而在下個月的聚會,Before Speaker 將在與三位駐場簡報人一對一交流 #結構企劃 #視覺呈現 #訊息傳遞 後再次登台,成為 After Speaker。我們希望通過定期的聚會讓每一位參與的夥伴們都能看到簡報溝通力提升後,帶來的改變力量。

歡迎各領域朋友一起來聽三位講者分享簡報溝通經驗及技巧,並與現場的職場人士交流,渡過不同體驗的夜晚。