CSS

首頁 » CSS

SiteLocity 將網頁從外部引入的 CSS 合併並最佳化

SiteLocity 將網頁從外部引入的 CSS 合併並最佳化

網頁排版靠 CSS,為求可維護性,我們通常會將共用語法單獨寫在一個 CSS檔案,然後由網頁從外部引進使用,以便將來在維護時會較輕鬆且不會出錯,但從外部引進的 CSS檔案多了,卻會造成網頁加載緩慢的問題,SiteLocity 這個網站提供了 Critical Path CSS Generator 的免費功能,該功能可將網頁從外部引入的多個 CSS 檔案合併成一個並最佳化,而使用方式也非常簡單,使用者僅需輸入網址交由 SiteLocity網站掃描,便可以得到合併後的 CSS語法。

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 檔案,就可輕易實現等待中使用動畫圖示來提示。

「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可以更方便且有更多選擇。

如何轉換 TTF 成 WOFF 字型檔並應用到網頁?

如何轉換 TTF 成 WOFF 字型檔並應用到網頁?

取得開源或可以商用的字體不見得會提供每種字體格式,例如我們想要將 TTF 的字型檔轉換成可以在網頁顯示的 WOFF 字型,這時候我們可透過 Font Converter 這個字型轉換免費網站來協助,其支援 bin、cff、dfont、eot、gsf、otb、otf、pfa、pfb、ps、pt3、sfd、svg、t42、tfm、ttc、ttf、woff 及 woff2 等各類字型檔案,轉換成 TTF、OTF、WOFF、WOFF2、EOT 及 SVG 這六種字型檔案格式,以 手寫硬筆書法「隨峰體」來說,轉成 WOFF 字型檔後,我們就可以透過 CSS 將該字型應用到網頁內,增加網頁設計時對字體能有更多的選擇。

 訂閱/追蹤

 站內搜尋

˄