圖示

首頁 » 圖示

Uiball.com 免費使用 CSS 打造的網頁等待動畫圖示

Uiball.com 免費使用 CSS 打造的網頁等待動畫圖示

瀏覽網頁之所以會覺得網站可能沒有回應,原因有可能出在網頁需要運算時間較久、網路傳輸速率較慢或的數據過多...等等,總之,在這之前如果適時地放上一個等待圖示或是加載中,請稍後...的字樣,都比讓用戶空等帶來的好,如果是要放等待動畫圖示,GIF 是個選擇,而另一選擇則是使用 CSS,Uiball.com 這個網站提供 24個以 CSS 打造的等動畫圖示,喜患的就可以直接複製其 html 與 css語法,直接放到想要顯示的位置即可。

24個純 CSS 打造的等待動畫圖示 隨取即用

24個純 CSS 打造的等待動畫圖示 隨取即用

網頁處理、運算、傳輸都需要時間,如果讓使用者乾等待,就容易產生當機的錯覺,因此,在這段時間產生一個提示訊息藉此告訴使用者耐心等待是有必要的,而現行網頁最常見的就是使用等待動畫圖示,負責處理到呈現這段時間的呈現,這個動畫可以使用 GIF 圖檔,也可以使用純 CSS 語法打造,24 PURE CSS3 PRELOADERS 這個網站展示了 24個純 CSS 等待動畫圖示,只需在網頁中引用該 CSS 檔案,就可輕易實現等待中使用動畫圖示來提示。

EMOJIALL 分類詳細的表情符號 複製就可用

EMOJIALL 分類詳細的表情符號 複製就可用

文字聊天若能適時搭配表情符號,絕對比用多字描述還來的令人容易理解,LINE 或 Facebook Messenger 都有內建豐富的表情符號,即便是在 Windows 作業系統中,我們也同樣可用「Windows + ; (分號)」鍵盤快速鍵叫出 EMOJI 列表,讓我們在各種輸入中快速插入,而 EMOJIALL 這個網站則是將各類表情符號做出詳盡的分類,方便使用者可以快速找到適合符號,而其應用也相當方便,只要複製該符號,便可以貼到要應用的位置。

VectorWiki 提供世界知名企業 LOGO SVG或PNG免費下載使用

VectorWiki 提供世界知名企業 LOGO  SVG或PNG免費下載使用

如果簡報或文宣需要提到一些知名企業的名稱,例如活動中有台積電、Yahoo 或是微軟等企業參與,若只用文字顯示這些參與活動的廠商,感覺就非常單調,如果能搭配該公司的 LOGO,整體的感覺就又上升一個層次,那麼,該如何取得這些知名企業的代表圖標呢?或許到這些企業官網下載是個好管道,但,免不了需要對圖片進行尺寸、格式等作後製動作,VectorWik 這個網站則為這些世界知名企業的圖標提供 SVG 及 PNG 兩種統一格式,這對後續的應用就簡單多了,目前該網站蒐集的圖標超過 12000個,且持續的增加中,使用者可利用搜尋工具,快速尋找所需圖標並下載免費使用。

「Google Fonts」用 Noto Emoji 字型將表情符號或特殊圖示以線條輪廓來呈現

「Google Fonts」用 Noto Emoji 字型將表情符號或特殊圖示以線條輪廓來呈現

在聊天室或是社群網站發文、留言所看的表情符號或特殊圖示都是彩色的,如果想在網頁中改變這類型符號或圖示的顏色或大小,我們可以來使用 Google Fonts 針對這類表情符號與特殊字型所推出的 Noto Emoji 雲端字型,透過其系統化的整理,使用者可以將這類表情符號、特殊圖示改以清爽的線條方式來呈現,並可以利用字重的設定方式來改變圖示或字型輪廓線條粗細,如果再搭配 Windows 系統內建的「表情符號」功能,讓表情符號的應用就更加方便了。

Loaders 讓瀏覽者在等待網頁載入的同時出現動畫圖示

Loaders 讓瀏覽者在等待網頁載入的同時出現動畫圖示

網頁在呈現之前是需要運算及傳輸時間的,如果可以在這個等待時間加入一個進度條,讓瀏覽者知道還要等多久,會是較理想的網頁設計,但進度條的準確度會受到很多條件的限制,因此,大部分的網頁都是提供一個等待圖示動畫,藉此提示瀏覽者,不需要有多餘的動作靜待網頁呈現。以往要加入此類的等待圖示動畫,我們會使用 Gif 圖檔,而現在我們可以更方便的使用 JavaScript 或是純 CSS 就能加入,Loaders 這個網站提供獨特且具有質感的 24個免費 loader ICON,每個均提供 REACT、HTML 及 CSS 原始碼,讓網頁設計使用 loader ICON可以更方便且有更多選擇。

˄