fffuel 免費線上工具,輕鬆產生色彩方案與 SVG 圖檔

fffuel 免費線上工具,輕鬆產生色彩方案與 SVG 圖檔

fffuel 是一個以色彩配套方案與 SVG 圖檔為主的工具型網站,提供了顏色選擇器(cccolor)、調色板生成器(pppalette)、色彩方案(hhhue)及各式形狀包含手繪 SVG 圖檔等幾種主要工具,讓用戶輕鬆構建 各種色彩方案。 在 SVG 圖檔產生器方面,fffuel 提供了背景、無縫圖案、漸變效果、紋理、形狀和斑點等各種類型的圖形製作工具,讓使用者能夠快速創建各種視覺元素。此外,fffuel 還提供了簡易的 SVG 應用參考工具、CSS選擇器實作範例和 SVG Loading 製作範例等實用工具,這些內容對於想直接應用或進階的使用者來說都非常實用。 無論是初學者還是有一定技術基礎的使用者,fffuel 都是一個方便易用的平台,滿足對色彩的設計需求。

SpinKit 馬上就可以套用的網頁 CSS loading 動畫圖示

SpinKit 馬上就可以套用的網頁 CSS loading 動畫圖示

網頁加載時,如果可以給予提示,告訴訪客網站確實有按要求正在動作,相信訪客會比較願意等候,因此,在很多的網站中,會看到利用百分比的進度條、loading 的動畫圖示來顯示,直到加載完成,以 loading 的動畫圖示來說,可以使用 GIF 動畫圖檔來製作,不過前提是須要有 GIF loading 圖檔,另外一種則是利用 CSS 來製作,Tobiasahlin 這個旗下的 SpinKit 網站,提供了以 CSS 為主的 loading 動畫圖示,並提供 HTML 與 CSS 的語法讓有需要的用戶快速套用。

CSS WAND - CSS 動畫免費應用

CSS WAND  - CSS 動畫免費應用

如果網頁要使用一些動畫圖示,例如滑鼠移動按鈕上方,按鈕的形狀會改變或是等待時常見到的 loading 動畫圖示,這些在以往可能需要 JavaScript 或是 gif 圖片來協助實現,而現在你也可以單純利用 CSS 語法就可辦到,CSS WAND 提供 Hover、Loading 類型的 CSS 動畫,只要複製該範例的 CSS 語法,就可以將範例應用到自己的網頁,相當方便。

[ Edge、Chrome ]如何提升下載速度?

[ Edge、Chrome  ]如何提升下載速度?

依照現在的網路速度來下載檔案,其實也不太需要再使用專用的下載軟體來管理,像是 Internet Download Manager、Free Download Manager 等,多數的時候,瀏覽器在下載檔案的時候,就能有很好的表現,當然,對下載速度的追求應該是永無止盡的越快越好,那麼使用 Chrome 或 Edge 瀏覽器時,又該如何提升檔案的下載速度呢?答案就是開啟 Parallel downloading 的實驗功能,讓檔案下載的速度可以有數倍的成長,當然,成長的幅度還是受限於傳送端、下載端與整體的網路環境,但啟用並行下載絕對有助下載效能的提升。

loadinfo 替網頁在讀取資料時,加入一個動態的等待圖示

loadinfo 替網頁在讀取資料時,加入一個動態的等待圖示

讀取網頁的速度常受網路頻寬與讀取資料的大小...等因素所限制,因此在設計網頁時,若資料量較大時,通常會加入一個資料讀取的進度條,來告訴使用者,目前在讀取資料的進度,不過要寫在網頁上寫資料讀取的進度條通常不是那麼容易,所以就使用一個等待圖示來代替。loadinfo 就是一個提供該類圖示的網站,可自訂前景及背景顏色及提供 16x16、24x24、48x48 等尺寸。

loading.io 可產生 CSS、SVG、GIF 的網頁 loading 動畫圖示產生器

loading.io 可產生 CSS、SVG、GIF 的網頁 loading 動畫圖示產生器

製作網頁如果預期會有較長時間的等待,通常會在等待的時間加入一個 loading 的動畫圖示來告知,避免用戶誤以為網頁沒有反應而離開,想要加入一個等待載入的動態圖示,可以來試試 loading.io 網站所提供可自訂圖示動態速度與顏色的動畫圖示產生器,不但可產生 GIF 檔外,還可產生出 CSS 或 SVG 檔,還提供範例語法,讓你輕易地運用到網頁裡。

cssload.net 網頁 loading 動態圖示產生器(CSS3 )

cssload.net 網頁 loading 動態圖示產生器(CSS3 )

在瀏覽網頁的時候,常會看到 loading 動態圖示,尤其是在需要較長時間才能回應的操作上,像是線上影片的觀賞、資料量較大的網頁......等等。想要取得這樣的動態圖示,可以自己製作或是透過 cssload.net 這個免費的網站服務,除了可以利用其提供的 loading 圖示,還可以利用其所提供的工具來編輯該圖示,以取得由 CSS3 語法組成的動畫,來取代 Gif 的動態圖示的缺點,期達到最符合自己網站的要求。