<-- IE錯誤修正 --> ColorSpark 隨機產生顏色或漸層色組合,顯示 CSS3 代碼快速複製 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2018-06-28
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 ColorSpark 隨機產生顏色或漸層色組合,顯示 CSS3 代碼快速複製

Click the image to open in full size.

每次要選擇顏色的時候,我總是會從眾多配色工具找一兩個自己喜歡的,無論從中尋找靈感或挑選合適的顏色都很好用,例如:Coolors 快速選色器,後來改版後介面稍微有變得複雜一些;另外還有 Colordot 更人性化的選色工具服務,在移動滑鼠搖標時輕鬆找出配色靈感;我也喜歡 NIPPON COLORS 代表日本的 250 種顏色,這是找尋日本傳統色系配色的絕佳網站。



越簡單的工具越深得我心,至少可快速解決問題而不用花太多時間摸索,本文要推薦的「ColorSpark」是一款非常易用的選色器,開啟網站按下「Generate」按鈕,每次都會隨機出現一種顏色,同時也會顯示 Hex 顏色代碼可快速複製。

除此之外,ColorSpark 還提供漸層色(Gradient)產生器,之前在 WebGradients 和 CoolHue 有介紹過收錄漸層背景免費下載的網站,現在你也可以在這項服務上隨機產生漸層色,一鍵快速複製 CSS3 語法,將它加入你的網站設計。

網站名稱:ColorSpark
網站鏈結:https://colorspark.app/

使用教學

STEP 1

開啟 ColorSpark 會隨機出現一個顏色,下方會有 Hex 色碼,點選「Generate」重新產生一個顏色,每個顏色之間沒什麼關連,可以多按幾次看看有沒有讓自己賞心悅目的顏色。

Click the image to open in full size.

STEP 2

點選上方的「Gradient」切換成漸層色模式,會顯示兩種顏色及偏移角度。

Click the image to open in full size.

點選右下角的「Copy CSS」可快速複製 CSS3 程式碼,將它放進 CSS 檔就能成為背景顏色使用。當然還有其他使用方法,可以自己研究一下語法,總之 ColorSpark 主要用途就是讓使用者找到配色靈感。

Click the image to open in full size.

STEP 3

此外,ColorSpark 還提供夜間模式,從右上角點選月亮圖示切換,夜間模式底色會變深色,但功能一樣沒變,蠻有趣的功能。

Click the image to open in full size.

依照 ColorSpark 說明表示這項服務是為了讓設計師找到獨特的顏色和漸層組合,透過這個可產生隨機顏色和漸變顏色的工具,可以找到一些原本不知道的顏色,這是一個有趣的實驗,或許可以為你的下一個設計專案激發出靈感。

值得一試的三個理由:
  1. 可隨機產生顏色或漸層色組合
  2. 一鍵複製 Hex 色碼或 CSS3 代碼
  3. 介面簡單易用,內建夜間模式降低亮度
喜歡 ColorSpark 隨機產生顏色或漸層色組合,顯示 CSS3 代碼快速複製 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 Google+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆

主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 06:26 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2018,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2